Xivanki Share !!: Cara Membuat Page Navigation Keren dengan Nomor di Blog

Cara Membuat Page Navigation Keren dengan Nomor di Blog - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Cara Membuat Page Navigation Keren dengan Nomor di Blog !! Semoga tulisan dengan kategori Desain Blog !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Cara Membuat Page Navigation Keren dengan Nomor di Blog ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->

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.