Membuat Nomor Halaman Web atau Blog

nomor halaman
Cara membuat nomor halaman atau biasa juga disebut navigasi page yang diletakkan dibagian bawah halaman posting, dan sekaligus untuk mempermudah navigasi selain daftar isi pemasangan nomor halaman ini juga cukup membantu para pengunjung untuk sedikit berlama-lama dan memungkinkan pengunjung mencari artikel-artikel lain yang mungkin di cari sembari melihat isi dari blog tersebut.
Adanya Nomor Halaman dibawah Postingan juga sebagai pelengkap dan bisa juga untuk mempercantik tampilan blog kita, sehingga terkesan sedikit lebih lengkap, untuk mempersingkat intro berikut caranya.
  1. Login Ke Dasboor Blogger Sahabat
  2. Kemudian Masuk Template kemudian klik button Edit HTML


    template blogspot

    Atau jika menggunakan interface klasik blogspot bisa dengan ke rancangan kemudian pilih edit html.

  3. Kemudian cari kode ini  ]]></b:skin> Setelah ketemu paste scrip css dibawah ini tepat diatasnya kode tadi.

    .showpageArea a {text-decoration:underline;}
    .showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}
    .showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
    .showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}
    .showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
    .showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}
    .showpage a:hover {text-decoration:none;}
    .showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}
  4. Kemudian cari kode ini </body> dan paste scrip html dan java diabawah ini

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <!-- PAGE NAVIGATION START-->
    <script type='text/javascript'>
    var pageCount=4;
    var displayPageNum=3;
    var upPageWord =&#39;&#171; &#39;;
    var downPageWord =&#39; &#187;&#39;;
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;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+'&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){upPageHtml='<span class="showpage" style="padding: 4px 8px;margin:0 4px;text-decoration:none;background:#dfdfdf;color:#686868; border:1px solid #989898;font-family: Arial, Verdana;font-size: 15px;"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage" style="padding: 4px 8px;margin:0 4px;text-decoration:none;background:#dfdfdf;color:#686868; border:1px solid #989898;font-family: Arial, Verdana;font-size: 15px;"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){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" style="padding: 4px 8px;margin:0 4px;text-decoration:none;background:#dfdfdf;color:#686868; border:1px solid #989898;font-family: Arial, Verdana;font-size: 15px;"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="COLOR: #676767;background:#fff;border: 1px solid #b6b5b5;font-size: 15px;padding:4px 8px;margin:0 4px;" class="showpageOf"> Pages '+(postNum-1)+'</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';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}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-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 labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&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){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage" style="padding: 4px 8px;margin:0 4px;text-decoration:none;background:#dfdfdf;color:#686868; border:1px solid #989898;font-family: Arial, Verdana;font-size: 15px;"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'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" style="padding: 4px 8px;margin:0 4px;text-decoration:none;background:#dfdfdf;color:#686868; border:1px solid #989898;font-family: Arial, Verdana;font-size: 15px;"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #999;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';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}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
    //]]>
    </script>
    <!-- PAGE NAVIGATION STOP-->
    </b:if>
  5. Simpan Template
Agar loading blog tidak terlalu berat bisa juga dengan mengupload script tersebut ke googlecode, silahkan baca artikel cara upload file javascript ke google code,  untuk menyederhanakan kode page navigasi atau nomor halaman.

Dari scrip diatas ada kode yang diberi warna hijau dan biru, jika sobat mengikut sertakan yang berwarna hijau saat copy paste scripnya maka nomor halaman akan muncul pada halaman depan saja, tetapi jika sobat inginkan nomor halamannya muncul di setipa halaman, baik itu halaman utama atau posting silahkan hapus scrip kode yang diberi warna hijau.
    Semoga berhasil, scrip diatas bisa dipersingkat dengan cara menyimpannya ke hosting yang sobat miliki, atau bisa simpan di googlecode, dan berharap artikel membuat nomor halaman web atau blog ini bisa menjadi tambahan refrensi buat sobat.