Cara Membuat Page Navigation Numbers Responsive Keren

By HP Yitno

Page Navigation Number saat ini telah banyak digunakan oleh kalangan blogger di indonesia khususnya pengguna template responsive. Pertanyaannya bisakah menu tersebut dipasang pada template bawaan blogspot? Tentu saja bisa dan saya sendiri telah lama menggunakannya.

Untuk membuat menu nomor navigasi ini juga sangat mudah. Kita hanya perlu menambahkan sedikit kode css dan javascript. Adanya menu ini membuat pengunjung bebas menuju page (halaman) yang diinginkan bahkan pada postingan pertama kita sekalipun.

Jumlah postingan yang tampil pada halaman pencarian juga bisa kita batasi sesuai keinginan kita. Sehingga hasil pencarian yang muncul tidak memakan tempat yang terlalu banyak. Sebagai akibatnya, pengunjung akan lebih mudah dalam menentukan artikel mana yang akan dibaca. Kalau pembaca benar-benar haus akan informasi, ia akan rela menekan tombol navigasi untuk menemukan tulisan yang mereka butuhkan.

Bagi sobat blogger yang tidak sabar untuk membuat menu page navigasi keren responsive ini, silahkan ikuti tutorial di bawah ini. Pastikan anda memback-up terlebih dahulu template yang anda punya untuk menghindari hal-hal yang tidak kita inginkan.

1. Login ke www.blogger.com
2. Klik template kemudian edit html
3. Cari kode ]]></b:skin> dengan bantuan CTRL + F
4. Salin seluruh kode dibawah ini tepat diatas kode tersebut

.pagenavi{clear:both;margin:20px 0 10px;text-align:center;font-weight:bold;color:#000!important;text-transform:uppercase}
.pagenavi span,.pagenavi a{padding:5px 10px;margin-right:3px;display:inline-block;color:#000!important;background-color:#fff;border:1px solid #ccc}
.pagenavi .current{color:#000!important;border:1px solid #222}
.pagenavi .current,.pagenavi .pages,.pagenavi a:hover{color:#000!important;border:1px solid #222}
.pagenavi .pages {display:none}
span.showdates{font-size:14px;margin:10px 0 0}

5. Cari kode <b:includable id='nextprev'> dengan bantuan CTRL + F

<b:includable id='nextprev'>
........ kode javascript yang panjang ............
</b:includable>

6. Jika sudah ketemu, hapus kode tersebut beserta kode javascript yang ada didalamnya kemudian ganti dengan kode dibawah ini.

<b:includable id='nextprev'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 12,
numPages: 6,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;Next&quot;,
prevText: &quot;Prev&quot;
}
</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>

7. Simpan template dan lihatlah hasilnya

Keterangan:
perPage: 12, berfungsi untuk mengatur jumlah postingan yang tampil.
numPages: 6, berfungsi untuk mengatur banyaknya page navigation yang terlihat di halaman utama

Demikianlah tutorial singkat cara membuat page navigation keren yang responsive. Semoga artikel sederhana ini bisa membantu anda dalam merancang template responsive yang bagus dan berkualitas. Jika sudah berhasil membuat template responsive yang keren, silahkan share ke temen-temen blogger yang lain.

SHARE :