Cara Membuat Page Navigation Keren dengan Nomor di Blog

Page Navigation adalah sebuah navigasi untuk menuju ke halaman-halaman yang ada di blog. Dengan adanya page navigation, maka pengunjung akan lebih mudah dalam menelusuri isi blog kita.

Nah, pada postingan kali ini saya akan membagikan cara untuk membuat page navigation dengan nomor keren di blog.

Sebenarnya, pihak Blogger sendiri sudah menyediakan page navigation. Namun, banyak Blogger yang menggantinya dengan page navigation yang lebih keren. Kenapa diganti ? Karena page navigation yang disediakan oleh Blogger, memiliki tampilan yang kurang memuaskan dan tidak user friendly.

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

5. Langkah terakhir adalah klik Simpan Template

6. Silahkan cek blog sobat, selesai


Dengan memasang page navigation dengan nomor, maka pengunjung akan lebih mudah untuk menelusuri setiap halaman di Blog sobat.

Demikianlah postingan saya kali ini, semoga bermanfaat.