2011-02-22

Halaman navigasi dengan angka - Update

Lama gak upade diblog ini, bukan karena males tapi kesibukan dilingkungan membuat lupa sebagai seorang netter yang berkiprah di dunia blog! postingan ini akan membahas bagaimana cara membuat navigasi halaman menggunakan angka berbeda dengan navigasi bawa'an/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 JavaScripnya 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!

1. Login ke blogger anda!
2. Masuk ke Dasboard>>Rancangan>> Edit HTML (tidak perlu memberikan klik pada Expand template widget)
3. Cari kode  ]]></b:skin> Kemudian Copy dan paste kode CSS berikut tepat diatas kode  ]]></b:skin>
 /* -- 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}
4. Cari kode </body> kemudian Copy dan paste kode dibawah 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-->
5. Sekarang cari 'data:label.url'
6. Dan ganti kode langkah 5 dengan ini 'data:label.url + &quot;?&amp;max-results=7&quot;'
7. Klik SIMPAN TEMPLATE silahkan lihat hasilnya!

Catatan :
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!

Selamat mencoba, dan semoga berhasil membuat halaman navigasi dengan angka!!

Dapatkan artikel terbaru seperti Halaman navigasi dengan angka - Update langsung ke Email kamu..!!!


Ada 26 komentar untuk Halaman navigasi dengan angka - Update

  1. nice info about page number.
    thanks bos :)

    BalasHapus
  2. mantab ....
    terima kasih telah berbagi

    BalasHapus
  3. MANGSTAB GAN!!!!!!!!!!!!!!!!!!

    BalasHapus
  4. realy usefull post, thank u so much

    BalasHapus
  5. maksih atas triks bang...

    BalasHapus
  6. Bisa gan .....
    Tetapi sayang ya hanya bisa di halaman HOME...
    Ketika di halaman Label tidak bisa...

    BalasHapus
  7. @PHOTOSHOP DASAR :
    Bisa gan tp caranya harus dengan manual caranya buatlah link label seperti ini :

    http://domainkamu.blogspot.com/search/label/Blogger%20templates?max-results=9

    yaitu menambahkan ?max-results=9 pada tiap label yg dibuat dan rubahlah angka 9 dengan keinginan berapa posting yang akan ditampilkan dalam tiap halamannya.

    BalasHapus
  8. Bisa tetapi yang tampil malah postingan HOME bukan label. Dan ketika di klik link label sefaultnya blogger tetap tidak muncul...
    Help gan.....

    BalasHapus
  9. @PHOTOSHOP DASAR :
    O itu maksudnya, klw itu memang seperti itu jadi navigasinya akan terlihat setelah tombol Older Posts diklik.

    BalasHapus
  10. Maksud saya begini Gan :
    Bila dibikin manual seperti saran Agan, navigasi angka bisa muncul sesuai harapan. Tetapi ketika di-KLIK, link yang muncul kok malah halaman HOME..? Bukan halaman Label ya..
    Dan ketika di-klik Label bawaan Blogger yang ada pada postingan baik di bawah judul atau di bawah postingan (bukan yang buatan manual sendiri), Navigasi angka tetap tidak terlihat.

    Tolong gan bagaimana agar navigasi angka mempunyai link yang hanya berisi postingan Label, sehingga ketika di-Klik angka navigasi, yang tampil tetap postinga-postingan label....
    Thank banyak sudah Share......

    BalasHapus
  11. Tq Sangat Infonya,,,,
    Sangat Membantu...

    BalasHapus
  12. thank's gan infonnya
    http://kendill.blogspot.com

    BalasHapus
  13. Terima Kasih Tutorialnya...
    Sangat Bermanfaat.

    Tp kenapa pd waktu sy pindah ke halaman 2, pagenumber.y tidak ada?? Yg muncul tetap "Newer Post", "Home", "Older Post"...


    Kalo ada waktu, silahkan berkunjung ke bLog sy..
    Sekali lg TERIMA KASIH

    BalasHapus
  14. Satu lg,,,, setiap kali sy klik misal.y halaman 2,, disebelah angka 2 itu ada angka 3,4,5,6,7... Angka 1 jg masih tetap ada,,,,

    Lalu ketika sy klik angka 10, yg muncul itu Pages 95 << 5,6,7,8,9,10,11,12,13,14,15 >>.

    Apakah memang sprti itu??
    Mohon pencrahannya........

    BalasHapus
  15. Iya memang begitu mas bro...modelnya....
    coba bs dilihat di blog saya yg ini templatemaxs.com

    BalasHapus
  16. kode 'data:label.url' gak ketemu gan. ane klik expand widget malah muncul 3._.

    BalasHapus
  17. d blog sya kode "body" ny g' ada.....
    jd d smpn d mna neh?

    BalasHapus
  18. ohh thansks bro...........sangat bermanfaat

    BalasHapus
  19. Makasih banyak informasinya dan saya akan coba di blog saya.
    Trims

    BalasHapus
  20. mantap kaaangggggg nice share


    www.start-xp.com

    BalasHapus
  21. 'data:label.url' ada 2 di template ku bang... apakah keduanya diganti?

    BalasHapus
  22. terimakasih atas tutorialnya mas, sangat membantu

    BalasHapus
  23. woke gan....tutornya berhasil..
    suksel selalu

    BalasHapus