MEMBUAT NUMBER PAGE NAVIGATION DI BLOGGER

Barusan Pas lihat template Valentine ane ngedapetin image yang ngelink ke imagehack pada ngeblank semua.... permasalahannya karena aku belum register ke imageshack untuk hosting image, jadi yach terpaksa aku update ulang link-nya make photobucket...

Sekalian update link image pada template valentine, aku juga tambahin number page navigation, dimana pada standar blogger secara default hanya akan terlihat link Posting lama dan posting baru yang terletak di bawah postingan, sehingga pengunjung akan susah melihat link postingan sebelumnya, apabila postingannya banyak.

Number page navigation ini dikembangkan oleh Muhammad Rias dari Techie Blogger dan disempurnakan oleh Abu Farhan, dimana hasilnya bisa dilihat pada DEMO Template Valentine.

Hal pertama yang harus dilakukan adalah, backup dulu template blog-nya untuk menghindari hal-hal yang tidak diinginkan.

1. Kemudian Login ke blogger dan pilih menu Setting >> Formmating dan pada pilihan show post pilih 5 post

2. Selanjutnya pilih menu Design >> Edit HTML dan jangan lupa centang Expand Widget Templates.

3. Langkah selanjutnya cari kode

]]></b:skin>

kemudian posisikan kode css dibawah ini tepat diatasnya

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

4. Setelah itu, cari lagi kode,

</body>

dan pastekan kode dibawah ini tepat diatasnya,

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://daffa.googlecode.com/files/page_navigation.txt' type='text/javascript'/>
</b:if>
</b:if>

5. Sekarang kita cari lagi kode link untuk label

'data:label.url'

setelah ketemu ganti kode diatas atau replace saja dengan kode dibawah :

'data:label.url + &quot;?&amp;max-results=5&quot;'

6. Selesai.


Sedikit penjelasan dan yang patut menjadi perhatian adalah kode dibawah ini;

var pageCount=5;

kode ini akan menentukan jumlah posting yang akan ditampilkan per halamannya, dan tentunya juga harus disesuaikan setting show post formatting seperti pada langkah pertama.

var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;

Dan kode diatas tentunya sudah tahu akan bentuk hasilnya dan bisa diganti sesuai keinginan.
Nach begitu saja postingan kali ini, semoga ada manfaatnya.