Apakah Blog kamu memiliki lebih dari 1.000 Blog posting? Apakah kamu khawatir tentang navigasi halaman kamu? Maka jangan khawatir kamu bisa menggunakan halaman navigasi widget ini.
Jika kamu memiliki lebih dari 5000 atau 10000 posting Blog, bahkan halaman nomor navigasi ini akan bekerja. Sebagian besar nomor halaman navigasi widget berhenti bekerja ketika posting Blog mencapai lebih dari 500. Akibatnya, Blog pengunjung tidak mampu untuk mengunjungi posting lama dari Blog kamu dan akhirnya kamu kehilangan views halaman Blog kamu. Jadi solusinya adalah dengan menggunakan unlimited widget navigasi halaman ini.
mari kita lanjutkan bagaimana cara menerapkannya di blog kita
Step 1, letakkan kode CSS ini sebelum kode </head>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
/* Page Navigation */
#blog-pager{background:#fff;clear:both;width:auto;padding:22px;line-height:normal;position:relative;display:block;text-align:left;overflow:visible;margin:20px 0 5px 0}
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{position:relative;background:#fff;display:inline-block;font-family:'Arial', Helvetica,font-size:15px;color:rgba(0,0,0,.8);padding:5px 8px;margin:0 4px 0 0;border: 1px solid #F1F1F1;transition:all .3s}
.showpageOf{float:right;background:#FB9543;color:#fff;}
.showpageNum a:before{content:' ';position:absolute;top:0;bottom:0;left:0;right:0;box-shadow:inset 0 -2px 2px rgba(0,0,0,0.02);transition:box-shadow 0.5s}
.showpage a:hover,.showpageNum a:hover,.showpagePoint:hover{background:#FB9543;color:#FFFFFF;position:relative; border: 1px solid #FB9543;}
.showpagePoint{background:#FB9543;color:#fff;}
@media screen and (max-width:640px) {
#blog-pager {padding:12px;}
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{margin:0 2px 2px 0;box-shadow:0 1px 2px 1px rgba(0,0,0,0.1);}}
@media screen and (max-width:320px) {
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{padding:3px 6px}}
</style>
</b:if>
</b:if>
Step 2, letakkan kode javascript ini di atas kode <body>
<b:if cond='data:blog.pageType == "index"'>
<script type='text/javascript'>
/*<![CDATA[*/
var postperpage=6;
var numshowpage=3;
var upPageWord ='< Prev';
var downPageWord ='Next >';
var bspagenavi=location.href;
var home_page="/";
/*]]>*/
</script>
<script type='text/javascript'>
//<![CDATA[
function looppagenavi(a){var e=" ";numberleft=parseInt(numshowpage/2),numberleft==numshowpage-numberleft&&(numshowpage=2*numberleft+1),start=pagenumber-numberleft,start<1&&(start=1),maximum=parseInt(a/postperpage)+1,maximum-1==a/postperpage&&(maximum-=1),end=start+numshowpage-1,end>maximum&&(end=maximum),e+="<span class='showpageOf'>Page "+pagenumber+" of "+maximum+"</span>";var s=parseInt(pagenumber)-1;pagenumber>1&&(e+=2==pagenumber?"page"==type?'<span class="showpage"><a href="'+home_page+'">'+upPageWord+"</a></span>":'<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">'+upPageWord+"</a></span>":"page"==type?'<span class="showpageNum"><a href="#" onclick="redirectpage('+s+');return false">'+upPageWord+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+s+');return false">'+upPageWord+"</a></span>"),start>1&&(e+="page"==type?'<span class="showpageNum"><a href="'+home_page+'">1</a></span>':'<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">1</a></span>'),start>2&&(e+="...");for(var r=start;r<=end;r++)e+=pagenumber==r?'<span class="showpagePoint">'+r+"</span>":1==r?"page"==type?'<span class="showpageNum"><a href="'+home_page+'">1</a></span>':'<span class="showpageNum"><a href="/search/label/'+lblname1+"?&max-results="+postperpage+'">1</a></span>':"page"==type?'<span class="showpageNum"><a href="#" onclick="redirectpage('+r+');return false">'+r+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+r+');return false">'+r+"</a></span>";end<maximum-1&&(e+=""),end<maximum&&(e+="page"==type?'<span class="showpageNum"><a href="#" onclick="redirectpage('+maximum+');return false">'+maximum+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+maximum+');return false">'+maximum+"</a></span>");var n=parseInt(pagenumber)+1;pagenumber<maximum&&(e+="page"==type?'<span class="showpageNum"><a href="#" onclick="redirectpage('+n+');return false">'+downPageWord+"</a></span>":'<span class="showpageNum"><a href="#" onclick="redirectlabel('+n+');return false">'+downPageWord+"</a></span>");for(var t=document.getElementsByName("pageArea"),l=document.getElementById("blog-pager"),p=0;p<t.length;p++)t[p].innerHTML=e;t&&t.length>0&&(e=""),l&&(l.innerHTML=e)}function arithmetictotaldata(a){var e=a.feed,s=parseInt(e.openSearch$totalResults.$t,10);looppagenavi(s)}function pagenaviblogger(){var a=bspagenavi;-1!=a.indexOf("/search/label/")&&(lblname1=-1!=a.indexOf("?updated-max")?a.substring(a.indexOf("/search/label/")+14,a.indexOf("?updated-max")):a.substring(a.indexOf("/search/label/")+14,a.indexOf("?&max"))),-1==a.indexOf("?q=")&&-1==a.indexOf(".html")&&(-1==a.indexOf("/search/label/")?(type="page",pagenumber=-1!=bspagenavi.indexOf("#PageNo=")?bspagenavi.substring(bspagenavi.indexOf("#PageNo=")+8,bspagenavi.length):1,document.write('<script src="'+home_page+'feeds/posts/summary?max-results=1&alt=json-in-script&callback=arithmetictotaldata">')):(type="label",-1==a.indexOf("&max-results=")&&(postperpage=20),pagenumber=-1!=bspagenavi.indexOf("#PageNo=")?bspagenavi.substring(bspagenavi.indexOf("#PageNo=")+8,bspagenavi.length):1,document.write('<script src="'+home_page+"feeds/posts/summary/-/"+lblname1+'?alt=json-in-script&callback=arithmetictotaldata&max-results=1" >')))}function redirectpage(a){jsonstart=(a-1)*postperpage,nopage=a;var e=document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript",s.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost"),e.appendChild(s)}function redirectlabel(a){jsonstart=(a-1)*postperpage,nopage=a;var e=document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript",s.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost"),e.appendChild(s)}function finddatepost(a){post=a.feed.entry[0];var e=post.published.$t.substring(0,19)+post.published.$t.substring(23,29),s=encodeURIComponent(e);if("page"==type)var r="/search?updated-max="+s+"&max-results="+postperpage+"#PageNo="+nopage;else var r="/search/label/"+lblname1+"?updated-max="+s+"&max-results="+postperpage+"#PageNo="+nopage;location.href=r}var nopage,type,pagenumber,lblname1;pagenaviblogger();
//]]>
</script>
</b:if>
Step 3, cari kode <!-- navigation --> , seperti contoh dibawah
<!-- navigation -->
<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi'/>
<b:else/>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
</b:if>
</b:if>
lalu ganti semua dengan kode di bawah
<!-- navigation -->
<b:if cond='data:blog.pageType == "index"'>
<b:include name='nextprev'/>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='nextprev'/>
<b:else/>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>
</b:if>
</b:if>
Step 4, save teplate dan lihat hasilnya
source: bloggerspice
