Cara Membuat Nomor Halaman Blog

Navigasi halaman bernomer ini adalah Pengganti Blog pagger tetapi terlihat lebih elegant dan profesional dengan menampilkan juga total page yang ada. Lihat contohnya di bawah ini.

Jika anda ingin menggunakannya, silahkan ikuti langkah-langkah berikut.

1. Login ke dalam blog anda.

2. Pilih pada pengaturan Rancangan > Edit elemen.

3. Tambahkan Gadget HTML/JavaScript.

4. Tulis / Copy semua kode dibawah dan masukkan kedalam Gadget HTML/JavaScript

<style>.showpageArea a{text-decoration:underline}.showpageNum a{text-decoration:none;border:1px solid#ccc;margin:0 3px;padding:3px}.showpageNum a:hover{border:1px solid#ccc;background-color:#ccc}.showpagePoint{color:#333;text-decoration:none;border:1px solid#ccc;background:#ccc;margin:0 3px;padding:3px}.showpageOf{text-decoration:none;padding:3px;margin:0 3px 0 0}.showpage a{text-decoration:none;border:1px solid#ccc;padding:3px}.showpage a:hover{text-decoration:none}.showpageNum a:link,.showpage a:link{text-decoration:none;color:#333}</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=6;var firstPageWord='First';var endPageWord='last';var upPageWord='Back';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}}}}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++}}}if(thisNum>1){if(!isLablePage){html='<span class="showpage"></span>'+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span class="showpage"> Total '+(postNum-1)+': </span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}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>

5. Simpan Gadget.

6. Bawa Gadget HTML/JavaScript yang telah anda buat tadi tepat di bawah footer. Lihat Hasilnya

Keterangan:

Anda bebas mengubah tulisan yang saya kasih warna hijau, angka 6 adalah jumlah posting yang tampil tiap halaman sedangkan yang 5 adalah tombol navigasi yang tampil. Next adalah text untuk ke halaman selanjutnya, sebalikanya previous untuk kembali kehalaman sebelumnya.