Buat Page Number pada Homepage

Di blogger, secara default, kita melihat link posting lama, Baru Posting dibagian bawah halaman yang berfungsi untuk navigasi atau mengarahkan ke posting lain dari blog Anda. Masalahnya adalah pengunjung sulit melihat posting yang lebih baru dan lebih lama di blog Anda. Jadi untuk meningkatkan tampilan halaman blog  kita dapat menggunakan Page Number atau disebut juga Navigasi Halaman dengan menggunakan nomor atau angka yang berfungsi sebagai alat navigasi pada halaman utama (homepage) dengan tujuan untuk memudahkan pengunjung dalam menjelajahi halaman  website atau blog kita.

Gambar contoh Page Number seperti di bawah ini,

Langkah Membuat Page Number-Navigasi Halaman pada blogspot.com :

  1. Masuk ke dasbor
  2. Pilih Rancangan
  3. Edit HTML klik Option Expand Widget Templates
  4. Backup template blog biar aman
  5. Selanjutnya cari kode berikut  ]]></b:skin> 
  6. Letakkan kode di bawah ini diatas kode ]]></b:skin> 

.showpageArea a { 
text-decoration:underline; 
background: #ffffff; 
padding: 10px 10px 10px 10px; 
} 
.showpageNum a { 
text-decoration:none; 
border: 1px solid #cccccc; 
border-top: 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; 
} 

  7. Senjutnya cari  dengan tekan Ctrl +F kode berikut  </body>
  8. Letakkan kode di bawah ini di atas kode </body>

<b:if cond='data:blog.pageType != "item"'> 
<b:if cond='data:blog.pageType != "static_page"'> 
<script type='text/javascript'> 
var pageCount= 5 ; 
var displayPageNum=5; 
var upPageWord ='Previous'; 
var downPageWord ='Next'; 
</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"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><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"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea" style="padding:10px 10px 10px 10px;"><span style="COLOR: #000;" 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"><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"> <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: #000;" 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> 
</b:if> 
</b:if> 

  9. Selanjutnya carilah kode berikut 'data:label.url' kemudian hapus  dan gantilah dengan kode di bawah ini:

'data:label.url + "?&max-results= 5 "' 

10. Simpan template dan lihat hasilnya

Selesai, silahkan yang mau mencoba.....