Cara Membuat Page Navigation Numbers Responsive Keren - HP Yitno Cara Membuat Page Navigation Numbers Responsive Keren - HP Yitno

Bisnis Online I Affiliasi I Tutorial Blog I Tips & Trick I Motivation I SEO

Cara Membuat Page Navigation Numbers Responsive Keren

Cara Bikin Page Navigasi Nomor Keren Responsive
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 :

Iklan Lucu & Super Kreatif Di Dunia

Amazing..!!! - Kata itulah yang mungkin akan anda katakan tatkala melihat iklan paling kreatif & termahal di dunia berikut https://youtu.be/jYsx0nlGtJ4.
7 Komentar untuk "Cara Membuat Page Navigation Numbers Responsive Keren"

Menu diatas sudah saya praktekkan sendiri dan telah banyak saya gunakan dalam template rancangan saya.

blogku kayaknya masih menggunakan template bawaan blogger deh

blogku kayaknya masih menggunakan template bawaan blogger deh

terima kasih om, tutorialnya sangat tokcer

Sdh aku pasang di blog aku dan Its work mas, terima kasih banyak ya!

sip banget, bangg
terimakasih ya untuk tutorialnya

sip mantab informasinya!!
tapi kenapa postingan saya ada yang hilang ya setelah pake page navigation number misalkan total postingan 50 itu yang tampil hanya 25.. itu kenapa ya? tolong dibantu..

http://cinemaputar.blogspot.co.id/

1. Silakan buka Daftar Isi untuk melihat artikel menarik lainnya
2. Komentar sobat adalah investasi besar untuk meningkatkan jumlah pengunjung ke Blog Sobat

Back To Top