Membuat Page Navigation

Tentunya brader sudah tidak asing lagi dengan tampilan gambar disamping. Sering kita jumpai disebagian situs-situs atau blogger besar, kecil (Nano Banget), profesional, maupun amatir (Nano lagi...) dengan bermacam-macam jenis tampilan. Setiap Situs atau Blogger mempunyai ciri khas, ada juga yang sama (mungkin malas ngedit...hhh).

Setahu Nano namanya adalah Page Navigation (maklum amatiran...). Page Navigation yang Nano pakai adalah hasil karya dari senior Nano yaitu Abu Farhan dalam postingan Numbered Page Navigation For Blogger New Script. Fungsinya untuk mempermudah pengunjung saja, lebih praktis.

---

Cara membuatnya

Dari Dashboard >> Design >> Edit HTML.

Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>

#nano-page{margin:0px 10px; padding:10px 0px; font-family:Trebuchet Ms; font-size:13px; overflow:hidden}
.showpageOf{margin:0 8px 0 5px}
.showpageNum a{padding:1px 8px 3px; margin:0 2px; text-decoration:none;border-radius:3px; -moz-border-radius:3px; background:#444; color:#aaa}
.showpageNum a:hover{background:#000; color:#fff}
.showpagePoint{padding:1px 8px 3px; margin:0 2px; text-decoration:none;border-radius:3px; -moz-border-radius:3px; border:1px solid #222; background:#fff; color:#222}
.showpage{display:none}

dan cari kode : #blog-pager {isi yang didalam ganti dengan >> display:none;} jadinnya:

#blog-pager{display:none}

Langkah kedua > Penempatan URL dan JavaScript
Cari kode </body>
ganti dengan :

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=7;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://pagenano.googlecode.com/files/Nano%20Navi.js'></script>

</body>

var postperpage=7; >> Kode ini disamakan dengan pengaturan blogspot anda, bisa dilihat Settings >> Formatting.

var numshowpage=7; >> ini untuk tombol yang akan muncul.

Langkah ketiga > Penempatan kode HTML

letakkan dibawah widget post

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

<div id='nano-page'>
</div>

Sebelum kelangkah selanjutnya silahkan di Preview dan Save Template.

Setelah berhasil, beri tanda centang pada Expand Widget Templates.

Cari kode ini menggunakan CRTL+f :

'data:label.url'

ganti dengan :

'data:label.url + "?&max-results=7"'

Angka yang berwarna merah, disesuaikan dengan angka var postperpage di JavaScript di atas.

Preview dan Save Template

---

Credit : Abu Farhan

Alhamdulillah