Membuat Page Number pada Homepage

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

Gambar contoh dibawah ini,

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

Masuk ke dasbor > pilih Rancangan > Edit HTML, Beri tanda rumput / centang Option Expand Widget Templates

Backup terlebih dahulu template blog sampeyan

Selanjutnya cari kode berikut ]]></b:skin>

Letakkan kode di bawah ini diatas kode ]]></b:skin>

.showpageArea a { 
text-decoration:underline; 
background: #ffffff; 
x 10px; 
} 
.showpageNum a { 
padding: 10px 10px 10
ptext-decoration:none; 
border: 1px solid #cccccc; 
ng:3px; 
} 
.showpageNum a:hove
border-top: 1px solid #cccccc; 
margin:0 3px; 
padd
ir { 
border: 1px solid #cccccc; 
background-color:#cccccc; 
} 
.showpagePoint { 
c; 
margin:0
color:#333; 
text-decoration:none; 
border: 1px solid #cccccc; 
background: #cccc
c 3px; 
padding:3px; 
} 
.showpageOf { 
text-decoration:none; 
padding:3px; 
d #cccccc; 
padding
margin: 0 3px 0 0; 
} 
.showpage a { 
text-decoration:none; 
border: 1px sol
i:3px; 
} 
.showpage a:hover { 
text-decoration:none; 
} 
ne; 
color:#333333; 
} 
.showpageNum a:link,.showpage a:link { 
text-decoration:n
o

Senjutnya cari dengan tekan Ctrl +F kode berikut </body>

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'> 
geNum=5; 
var upPag
var pageCount= 5 ; 
var displayP
aeWord ='Previous'; 
var downPageWord ='Next'; 
[CDATA[ 
f
</script> 
<script type='text/javascript'> 
//<
!unction 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>

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

'data:label.url + &quot;?&amp;max-results= 5 &quot;'

Simpan template dan lihat hasilnya

Selesai