Cara Membuat Posting Lama, Home, Dan Posting Baru Dengan Angka

Postingan ini akan membahas bagaimana cara membuat navigasi halaman menggunakan angka berbeda dengan navigasi bawaan/default dari template Blogger original yang hanya menampilkan sebuah link Older post dan Newer post tetapi secara fungsi sama saja, perbedaannya terletak pada angka-angka tersebut dengan demikian pengunjung akan merasa nyaman dan selain itu blog juga akan terlihat lebih rapih...karena jumlah posting yang akan kita tampilkan dalam tiap perhalaman bisa kita ubah suaikan dengan keinginan kita.

Caranyapun cukup mudah karena saya sudah upload JavaScriptnya khusus buat anda jadi tidak perlu pusing-pusing ngelihat JavaScript yang ngejelimet karena tinggal copy paste gitu...hehe... saya yakin anda pasti bisa menerapkannya. untuk contohnya lihat gambar diatas atau pada blog ini dibagian bawah posting itu ada angka-angka dalam beberapa tombol kotak! itulah yang saya maksud dengan Navigasi halaman dengan angka!

Nah, bila anda berminat untuk memasangnya di blog anda, ikutilah langkah langkah berikut ini:

1. Login ke akun Blogger anda
2. Klik Rancangan
3. Klik Edit HTML ( biasanya terletak pada bagian atas kiri )
4. Cari kode ]]></b:skin> ( Gunakan CTRL + F untuk memudahkan pencarian anda )
5. Bila sudah ketemu, masukkan kode dibawah ini tepat diatas kode ]]></b:skin> tersebut.


 /* -- NUMBER PAGE NAVIGATION -- */
.showpageNum a{font:15px Arial,Verdana;padding:4px 8px;margin:0 4px;text-decoration:none;border:0 solid #333;background:#dfdfdf;color:#686868;border:1px solid #989898}
.showpageOf{margin:0 8px 0 0;color:#222;font:15px Arial,Verdana}
.showpageNum a:hover{color:#494949;background:#dfdfdf;border:1px solid #626262}
.showpageArea{margin:10px 0;font:15px Arial,Verdana;color:#111}
.showpagePoint{color:#434343;font:bold 15px Arial,Verdana;padding:4px 8px;margin:2px;border:1px solid #b6b5b5;background:#fff;text-decoration:none}

6. Tidak sampai di situ saja, berikutnya cari kode </body> ( Gunakan juga CTRL + F untuk memudahkan pencarian )
7. Bila sudah ketemu, masukkan kode di bawah ini tepat diatas kode </body>.


 <!-- PAGE NAVIGATION START-->
<script type='text/javascript'>
var pageCount=4;
var displayPageNum=4;
var upPageWord =&#39;&#171; &#39;;
var downPageWord =&#39; &#187;&#39;;
</script>
<script src='http://u-sup.googlecode.com/files/page_num.js' type='text/javascript'/>
 <!-- PAGE NAVIGATION END-->

Keterangan:

Perhatikan pada kode yang dicetak hijau itu dapat anda sesuaikan dengan keingin anda kode tersebutlah yang menentukan berapa jumlah posting yang akan ditampilkan pada setiap halamannya, contoh saya akan menampilkan 10 Posting  dan 5 tombol angka navigasi berarti kode saya sebagai berikut :
var pageCount=10;
var displayPageNum=5;
Dan untuk merubah Tampilan silahkan rubah kode CSSnya sesuai dengan selera anda, jika merasa tampilannya kurang cantik menurut anda!

8. Cari kode 'data:label.url' ( Gunakan juga CTRL + F untuk memudahkan pencarian )
9. Ganti kode 'data:label.url' tersebut dengan kode di bawah ini.

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

10. Klik Simpan Template dan lihat hasilnya pada blog anda.