Jika kita lihat, page navigasi bawaan blogger kurang menarik, untuk itu saya akan coba buat tutorial bagaimana cara membuat page navigasi menggunakan nomor halaman di blogger atau blogspot ala gianmr dengan tampilan tombol yang 3d.
Ok sobat gianmr, langsung saja berikut adalah tutorialnya:
1. Silahkan backup terlebih dahulu template bawaan anda, berikut adalah tutorial cara backup template blogger:
Cara mudah backup template blogger atau blogspot
2. Selanjut anda edit template blogger anda, jika anda tidak tahu cara edit template blogger berikut adalah cara edit template blogger:
Cara edit template blogger atau blogspot
3. Setelah masuk ke halaman editor template anda, taruh kode berikut sebelum kode ]]></b:skin> atau </style>:
/* CSS Page Navigation */
.gmr-pagenav {text-align:center;line-height:1.4em;margin:15px 0 30px 0;text-align:center;font-size:14px;}
.gmr-pagenav span,
.gmr-pagenav a{background-color: #3498DB;box-shadow: 0px 6px #2980B9;-moz-box-shadow: 0px 6px #2980B9;-webkit-box-shadow: 0px 6px #2980B9;-moz-transition: none;-webkit-transition: none;transition: none;display: inline-block;padding:10px 15px;margin-left:3px;margin-right:3px;vertical-align: middle;font-size: 14px;color: #fff !important;text-decoration: none !important;}
.gmr-pagenav .pages{background:$colorscheme;color:#fff;}
.gmr-pagenav .current,
.gmr-pagenav a:hover {top:4px;position:relative;box-shadow: 0px 2px #2980B9;-moz-box-shadow: 0px 2px #2980B9;-webkit-box-shadow: 0px 2px #2980B9;}
.gmr-pagenav a:active {top:6px;position:relative;box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;}
.gmr-pagenav .pages {display:none;}4. Kemudian cari kode <b:include name='nextprev'/> setelah itu replace atau timpa dengan kode berikut:
<b:if cond='data:blog.isMobile == "true"'>
<b:include name='nextprev'/>
<b:else/>
<div class='gmr-pagenav'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 7,
numPages: 5,
firstText: "First",
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]+'" title="First Page" rel="nofollow">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'" title="Previous Page" rel="nofollow">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'" title="Previous Page" rel="nofollow">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'" title="Next Page" rel="nofollow">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'" title="Last Page" rel="nofollow">'+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>
<div style='clear:both;'>
</b:if>Ok dari keterangan diatas diketahui bahwa jika menggunakan domain atau custom mobile template maka navigasi akan menggunakan default navigasi, selain di mobile maka page navigasi akan muncul. Alasannya karena kode diatas tidak support untuk custom mobile template.
5. Lalu save template anda.
Berikut adalah keterangan pengaturannya:
| Kode | Keterangan |
|---|---|
| perPage | Jumlah yang ingin ditampilkan dalam satu halaman |
| numPages | Jumlah tombol navigasi yang ingin ditampilkan |
| firstText | Teks tombol halaman pertama |
| lastText | Teks tombol halaman terakhir |
| nextText | Teks tombol halaman selanjutnya |
| prevText | Teks tombol halaman sebelumnya |
0 comments