Cara Membuat Page Navigation Keren dengan Nomor di Blog - Selamat datang di blog Yulia Webs !!, Info kali ini adalah tentang Cara Membuat Page Navigation Keren dengan Nomor di Blog !! Semoga tulisan singkat dengan kategori
Desain Blog !! ini bermanfaat bagi anda yang membutuhkan. Dan untuk anda yang baru berkunjung kenal dengan blog sederhana ini, Jangan lupa ikut menyebarluaskan postingan bertema Cara Membuat Page Navigation Keren dengan Nomor di Blog ini ke social media anda, Semoga rezeki berlimpah ikut di permudahkan sang khalik yang maha kuasa, Selengkapnya lansung lihat infonya dibawah -->
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 */4. Kemudian silahkan sobat cari kode
.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}
<b:includable id='nextprev'>Jika sudah ketemu, ganti kode tersebut dengan kode di bawah ini
<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>
<b:includable id='nextprev'>Ganti angka yang berwarna biru dengan jumlah postingan yang ada pada Homepage blog sobat, agar page navigation bekerja dengan baik
<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>
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.
Demikianlah Artikel Cara Membuat Page Navigation Keren dengan Nomor di Blog, Semoga dengan adanya artikel singkat seperti Informasi postingan Cara Membuat Page Navigation Keren dengan Nomor di Blog ini, Anda benar benar sudah menemukan artikel yang sedang anda butuhkan Sekarang. Jangan lupa untuk menyebarluaskan informasi Cara Membuat Page Navigation Keren dengan Nomor di Blog ini untuk orang orang terdekat anda, Bagikan infonya melalui fasilitas layanan Share Facebook maupun Twitter yang tersedia di situs ini.
