Cara Membuat Page Navigasi atau Pagination Page di Blogger atau Blogspot

Themelix - 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  langsung saja berikut adalah tutorial membuat page navigasi di blogger atau blogspot :

1. Silahkan backup terlebih dahulu template bawaan anda, berikut adalah tutorial cara backup template blogger:

2. Selanjut anda edit template blogger anda, jika anda tidak tahu cara edit template blogger berikut adalah cara edit template blogger:

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 silahkan Save template anda.

Berikut adalah keterangan pengaturannya:

Kode Keterangan per Page 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

Mudah bukan, Cara Membuat Page Navigasi atau Pagination Page di Blogger atau Blogspot hasil contoh bisa dilihat nanti di web ini.

Berbagi :