Membuat Page Navigasi dengan Nomor di Blogger

Berikut ini langkah-langkah dalam membuat Page Navigation dengan nomor di Blog. 1. Masuk ke  Blogger , pilih blog sobat 2. Klik menu  T...

Berikut ini langkah-langkah dalam membuat Page Navigation dengan nomor di Blog.

1. Masuk ke Blogger, pilih blog sobat

2. Klik menu Template > Edit HTML. Dan cari kode ]]></b:skin> (Ctrl+F)

3. Jika sudah ketemu, silahkan letakkan kode di bawah ini tepat diatas kode ]]></b:skin>.

/* Numbered Page Navigation */
.pagenavi{clear:both;margin:20px 0 10px;text-align:center;font:bold 12px Arial;color:#333!important;text-transform:capitalize}
.pagenavi span,.pagenavi a{padding:5px 10px;margin-right:3px;display:inline-block;color:#333;background-color:#fff;border:1px solid #ccc}
.pagenavi a:hover{background-color:#0f74b5;border:1px solid #0f74b5;color:#fff !important}
.pagenavi .current{color:#333!important;border:1px solid #222;font:bold 13px Arial;}
.pagenavi .current,.pagenavi .pages{background-color:#0f74b5;color:#fff!important;border:1px solid #0f74b5;font:bold 12px Arial;}
.pagenavi .pages {display:none}
span.showdates{font:bold 13px Arial;margin:10px 0 0}

4. Kemudian silahkan sobat cari kode 

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>

</div>
<div class='clear'/>
</b:includable>

Jika sudah ketemu, ganti kode tersebut dengan kode di bawah ini

<b:includable id='nextprev'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 6,
numPages: 6,
firstText: "Recent",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}
</script>
<script type='text/javascript'>
//<![CDATA[
function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='<span class="pages">Pages '+e+' of '+a+"</span> ";if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();
//]]>
</script>
</div>
</b:includable>

Ganti angka yang berwarna biru dengan jumlah postingan yang ada pada Homepage blog sobat, agar page navigation bekerja dengan baik