Belajar SEO Blogspot, Teknik SEO Blogspot, Blog SEO Tips, SEO Friendly Blogger Template

Membuat Page Navigation di Blogger

Beberapa rekan sempat menanyakan kepada saya mengenai page navigation yang saya gunakan di blog ini sebagai pengganti page navigation standar milik blogspot. Saat ini untuk membuat page navigation seperti itu sangatlah mudah (terimakasih untuk Imam yang telah membuat script code untuk page navigation), karena dilakukan hanya dengan menambahkan javascript pada page element di blogspot.





Berikut adalah langkah-langkah untuk menambahkan page navigation widget :
  1. Login ke account blogger dan tujulah ke tab Layout, kemudian klik link "Add Page Element".
  2. Pilih HTML/JAVASCRIPT dalam window Page Element tersebut.
  3. Copy semua javascript code di bawah ini dan paste javascript kedalam window.


  4. <style>
    .showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
    }
    .showpageArea a {border: 1px solid #505050;
    color: #000000;font-weight:normal;
    padding: 3px 6px !important;
    padding: 1px 4px ;margin:0px 4px;
    text-decoration: none;
    }
    .showpageArea a:hover {
    font-size:11px;
    border: 1px solid #333;
    color: #000000;
    background-color: #FFFFFF;
    }

    .showpageNum a {border: 1px solid #505050;
    color: #000000;font-weight:normal;
    padding: 3px 6px !important;
    padding: 1px 4px ;margin:0px 4px;
    text-decoration: none;

    }
    .showpageNum a:hover {
    font-size:11px;
    border: 1px solid #333;
    color: #000000;
    background-color: #FFFFFF;

    }
    .showpagePoint {font-size:11px;
    padding: 2px 4px 2px 4px;
    margin: 2px;
    font-weight: bold;
    border: 1px solid #333;
    color: #fff;
    background-color: #000000;


    }

    .showpage a:hover {font-size:11px;
    border: 1px solid #333;
    color: #000000;
    background-color: #FFFFFF;

    }
    .showpageNum a:link,.showpage a:link {
    font-size:11px;
    padding: 2px 4px 2px 4px;
    margin: 2px;
    text-decoration: none;
    border: 1px solid #0066cc;
    color: #0066cc;
    background-color: #FFFFFF;}

    .showpageNum a:hover {font-size:11px;
    border: 1px solid #333;
    color: #000000;
    background-color: #FFFFFF;
    }
    </style>



    <script type="text/javascript">

    function showpageCount(json) {
    var thisUrl = location.href;
    var htmlMap = new Array();
    var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
    var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
    var isPage = thisUrl.indexOf("/search?updated")!=-1;
    var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
    thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
    var thisNum = 1;
    var postNum=1;
    var itemCount = 0;
    var fFlag = 0;
    var eFlag = 0;
    var html= '';
    var upPageHtml ='';
    var downPageHtml ='';


    var pageCount=5;
    var displayPageNum=3;
    var firstPageWord = 'First';
    var endPageWord = 'Last';
    var upPageWord ='Previous';
    var downPageWord ='Next';



    var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

    for(var i=0, post; post = json.feed.entry[i]; i++) {
    var timestamp = post.published.$t.substr(0,10);
    var title = post.title.$t;
    if(isLablePage){
    if(title!=''){
    if(post.category){
    for(var c=0, post_category; post_category = post.category[c]; c++) {
    if(encodeURIComponent(post_category.term)==thisLable){
    if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }

    postNum++;
    htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
    }
    }
    }
    }//end if(post.category){

    itemCount++;
    }

    }else{
    if(title!=''){
    if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }

    if(title!='') postNum++;
    htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
    }
    }
    itemCount++;
    }
    }

    for(var p =0;p< htmlMap.length;p++){
    if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
    if(fFlag ==0 && p == thisNum-2){
    if(thisNum==2){
    if(isLablePage){
    upPageHtml = labelHtml + upPageWord +'</a></span>';
    }else{
    upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
    }
    }else{
    upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
    }

    fFlag++;
    }

    if(p==(thisNum-1)){
    html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
    }else{
    if(p==0){
    if(isLablePage){
    html = labelHtml+'1</a></span>';
    }else{
    html += '<span class="showpageNum"><a href="/">1</a></span>';
    }
    }else{
    html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
    }
    }

    if(eFlag ==0 && p == thisNum){
    downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
    eFlag++;
    }
    }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
    }//end for(var p =0;p< htmlMap.length;p++){

    if(thisNum>1){
    if(!isLablePage){
    html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
    }else{
    html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
    }
    }

    html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

    if(thisNum<(postNum-1)){
    html += downPageHtml;
    html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
    }

    if(postNum==1) postNum++;
    html += '</div>';

    if(isPage isFirstPage isLablePage){
    var pageArea = document.getElementsByName("pageArea");
    var blogPager = document.getElementById("blog-pager");

    if(postNum <= 2){
    html ='';
    }

    for(var p =0;p< pageArea.length;p++){
    pageArea[p].innerHTML = html;
    }

    if(pageArea&&pageArea.length>0){
    html ='';
    }

    if(blogPager){
    blogPager.innerHTML = html;
    }
    }

    }
    </script>

    <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
    <div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://www.techieblogger.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a></div>



  5. Setelah javascript tersebut ditambahkan, pindahkan (drag n drop) widget tersebut kebawah widget utama Blog Post.




  6. Jangan lupa untuk save template / layout untuk menyimpan perubahan yang telah dilakukan.
Pada code diatas kamu dapat merubah nilai berikut (berwarna merah) sesuai kebutuhan :
  • var pageCount = 5; angka "5" menujukan jumlah posting yang ditanpilkan dalam setiap page.
  • var displayPageNum = 3; angka "3" menunjukan banyaknya jumlah page yang ditampilkan diblog.
  • Atau kamu juga bisa ganti warnanya. untul melihat kode warna silakan klik disini
Untuk lebih jelasnya silahkan dicoba untuk mengganti nilai-nilai atau warna tersebut sehingga perubahannya bisa diketahui langsung.

Cukup mudah bukan...!!! Tanpa perlu mengutak-atik code dalam template kita sudah bisa mendapatkan page navigation yang kita inginkan...smile

Recommended Posts :

8 komentar:

ozyee mengatakan...

ko ga bisa ya,...

blog buat bloggers mengatakan...

=)) makasih tas postingannya tapi diotak atik juga gak muncul postingkan dong keseluruhan kodenya scriptnya

agasponger mengatakan...

matur suwun bos atas info2nya

jangan ada bom lagi mengatakan...

keren banget nih.,,,,

maksih

Anggra mengatakan...

wew...g berhasil bos...mohon pencerahan

o-iDc_LoRd-o mengatakan...

woi.......g berhasil....... x(

o-iDc_LoRd-o mengatakan...

owh..gitu mas..!! ngerti ngerti sry tadi marah2 :D

mau mengelola blog bareng mas..?? ntar gw update jd lebih detail lagi...dgn SS yg lengkap..biar pada ngerti yg ngunjungin blog mas..

i-bH mengatakan...

iya neh ga berhasil.. ga muncul pagenya.. blank doank..gmana donk?

Posting Komentar - Kembali ke Konten

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

 

Alexa Site Info