Home » » Page Navigation Ala Lentera Langit, Cantik..!

Page Navigation Ala Lentera Langit, Cantik..!

Page Navigation Ala Lentera Langit
Bismillah....

Bahasa kerennya Page Navigation/Numbered Page, kalau bahasa gak kerenx nomor halaman hehe.., jadi bukan hanya buku saja sob yang punya nomor-nomor halaman tapi blog pun ada. Sebenarnya secara default blog juga telah menyediakan fasilitas untuk membuka-buka halaman posting cuma kelemahan dari fasilitas bawaan blog ini adalah perlompatan yang mampu dilakukan hanyalah satu halaman saja, misalnya halaman 1 (satu) ke halaman 2 (dua) dan seterusnya. Sedangkan Paga Navigation yang akan kita bahas ini mampu melompat dari halaman 1 (satu) hingga ke halaman 5 (lima) bahkan bisa lebih dari itu.

Lentera Langit gak ngerti sama sekali dengan bahasa-bahasa asing untuk blogger, yang Lentera Langit tahu hanya copy kode ini lalu simpan diatas kode ini heheh..., daripada makin aneh ngomongnya mari kita simak langsung cara-cara pembuatannya..., cekibrottt...! :)

1. Login ke Akun blog
2. Pilih Rancangan/Design
3. Edit HTML
4. Backup terlebih dahulu template anda lalu Cari kode  ]]></b:skin>, untuk memudahkan pencarian gunakan control + f
5. Masukkan kode dibawah ini sebelum/diatas kode ]]></b:skin>

.blog-pager,#blog-pager{font-family:"Times New Roman", Times, serif;font-weight:normal;font-size:12px;width:700px;padding:17px;} 
.showpageNum a,.showpage a {background:#069; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;} 
.showpageNum a:hover,.showpage a:hover {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
.showpageOf{margin:0 8px 0 0;font-family:'Coming Soon', cursive;text-decoration:none;font-size:100%;}
.showpagePoint {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}

6. Masukkan kode dibawah ini sebelum/diatas kode </body>

<script type='text/javascript'>;
var home_page=&#39;/&#39;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
var upPageWord =&#39;Prev&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://stylifyyourblog1.googlecode.com/svn/trunk/pagination.js' type='text/javascript'/>

7. Klik Pratinjau/PREVIEW
8. Kalau tidak ada yang erorr, klik Simpan Template/Save Template

Hasilnya akan seperti gambar dibawah ini.

Semoga Bermanfaat... :)
Sumber : http://www.stylifyyourblog.com

105 komentar:

  1. pertamax unkign sob...!!! waaaa keren nich spob...!!! ada ngak yang untuk icon mata saharinggan sob...??? hehehehehehehehehe

    BalasHapus
  2. @ArhyErna_Blogheheh.., kursor mouse kamu dah saharinggan, gmn klo saringan aja hhee...

    BalasHapus
  3. wah bagus nih,di bookmark dulu ah :)

    BalasHapus
  4. hmm bagus ya warnanya..
    btw yg saya tanyain tadi maksudnya kalau ada yang komen di blog saya terus saya jawab, naah jawaban saya itu dia terima via email, seperti wordpress yang menyediakan thread comment gitu, atau seperti disquss. tapi ada yang bilang kl disquss bikin lemot jd saya ga jadi nyoba :)

    BalasHapus
  5. Saya juga bikin yang versi numbering. Tapi error. Halah. Udah puyeng duluan setiap kali edit XML, HTML, dan CSS-nya. T_T

    BalasHapus
  6. Balasan
    1. Masukin aja welcome to my zone di tab tukeran link :) makasiihh

      Hapus
  7. wah emang keren tuh pagenav-nya,
    save dulu siapa tahu nanti tak ganti punyaku:}trims sob.

    BalasHapus
  8. @Ayu Welirangcoba langsung ke sumber aslix, dan tanya2..,ke sini

    http://www.stylifyyourblog.com/2011/10/pagination-in-blogger.html

    BalasHapus
  9. Wah..iya neh, sudah kepikiran utk expand html dengan navigasi ini...thx for share:)

    BalasHapus
  10. wah unik.......

    iyah...iyah bagus..

    BalasHapus
  11. @Annur EL- Kareemdicoba yaa.., ntr aq tuntun..., ingat backup terlebih dahulu templatex.., :)

    BalasHapus
  12. keren banget, cuma kalu mau memilih bentuknya gimana tu sob?

    BalasHapus
  13. @agusbgmaaf banget sob sy gk tau :(

    sebenarx msh bnyk yg lebih keren drpd diatas..,coba buka webx Abu Farhan.. :)

    BalasHapus
  14. Ane dah berkali-kali nyoba masang, tapi gk pernah sukses, sob! Hehehe

    BalasHapus
  15. . . bagus banget,, jadi pengen. ijin simpan ya?!? buat besok^ kalo udah ganti template. he..86x . .

    BalasHapus
  16. @eksakcoba lihat langsung sumber aslix sob..,

    http://www.stylifyyourblog.com/2011/10/pagination-in-blogger.htm

    BalasHapus
  17. @♥VPie◥♀◤MahaDhifa♥iya silahkan..., bnyk template yg lbh bagus hehe..99x

    BalasHapus
  18. keren sob
    izin simpan ya
    kapan-kapan bisa dipraktekkan

    BalasHapus
  19. woha , baek banget dah, bagi bagi ilmu .. :D
    thank's
    btw,
    salam kenal sob :D
    dan
    salam kumis juga :D

    BalasHapus
  20. Wah bnyak yg menarik gan :D

    BalasHapus
  21. makin asik aja nih tutorialnya sob, di tunggu ah, tutor yg keren lainnya sob, okey ... ^^

    BalasHapus
  22. Manteoo ni keren page navugationnya sukses terus bang

    BalasHapus
  23. weeww...keren,saya bookmar yaaa,sapa tau perlu

    BalasHapus
  24. Kalau untuk blog saya yang pakai domain dan berbasis Wordpress bisa nggak saya, menarik euy :)
    Nice post

    BalasHapus
  25. @Lentera Langitbuat page navigation ane mbak...!!! reques nich loch mbak...!! hehehehehehehehe

    BalasHapus
  26. @Lentera Langit maksudnya buat navigasinya sob reques loch nich sob...!!!

    BalasHapus
  27. @wahid sahiduterima kasih.., kamu jg... sukses terus bang :)

    BalasHapus
  28. @Lensamf sy gk tau sob.., tp dicoba aja dlu.., sempat aja bisa :)

    BalasHapus
  29. @Lentera LangitHehehehe kalau milih bentuknya bisa ubah ubah sendiri mas dengan modifikasi CSS-nya?

    BalasHapus
  30. @Lentera LangitWkwkwkwkw Si Kamseupay komentar di sini rupanya?

    BalasHapus
  31. @Lentera LangitBisa kok, cari ajah plug in WP di Internet? Alias tnya di Mbah Google? hehehehe

    BalasHapus
  32. Hehehehe sya juga pkek gitu mas, tapi sya udah modifikasi jadi ndak tampak kyak aslinya? BTW aq suka tombol navigasi warna hijau ntu mas? Hehehehe bagus?

    BalasHapus
  33. Wah, keren nih, ane pengen coba, sangat menarik warnanya, o iya, ada bingkisan dari ane, silahkan diboyong ya sob... :)

    BalasHapus
  34. @ArhyErna_Bloghehhe.., sy kan sdh tulis diatas bahwa sy ngerti bhs asing blogger, mulai HTML, CSS dst..,

    lagian sy bukan mbk sy laki2 sob heheh...99x

    BalasHapus
  35. @The7Bloggershehhe.., sy kan sdh tulis diatas bahwa sy ngerti bhs asing blogger, mulai HTML, CSS dst.., :)

    coba kesini sob tuk nanya2...,sumber asli scrip

    http://www.stylifyyourblog.com

    BalasHapus
  36. @The7Bloggerssebenarx msh bnyk ko' yg lbh bagus dr page navi diatas tp seperti biasa tanya sj sama mbah google hehehe.... :)

    BalasHapus
  37. @Lentera LangitYa sih mas memang ada videonya, tapi nanti jadi ndak enak. Kan video itu bukan hasil karya saya sendiri? Wkwkwkwkwk Nama videonya "Harun Yahya - Rahasia Penciptaan Manusia" ...?

    BalasHapus
  38. @Lentera LangitHehehehehe ya kyak yang saya pkek di blog saya nih mas?

    BalasHapus
  39. Hadiir kembali disini sob, untuk mnyambung silaturahmi...

    BalasHapus
  40. kereen...
    ntar dicoba
    Oya.Ada Award dari Saya.^_^
    A Award (Lihat No. 24) dan Friendship Award
    Award ini bertujuan untuk menyambung silaturahim dan tentu saja sebagai bentuk penghargaan saya karena kita sudah menjadi
    Sahabat di Dunia Blog. Silahkan untuk diambil Awardnya disini
    ARR'S AWARD
    Mohon Maaf Pemberitahuannya telat.
    Terima Kasih

    BalasHapus
  41. kalau aku mah pengguna wordpress jadi tinggal pake plugin doang beres deh

    BalasHapus
  42. wah mantap nih page navigationnnya dulu pernah make tapi sekarang tak copot hehe

    BalasHapus
  43. Kunjungan malam mas, lama tak berkunjung kemari
    Wah navigasinya kereeen
    Nice post mas

    BalasHapus
  44. kepengen juga pasang page navigation seperti ini di blog saya sobat...

    BalasHapus
  45. really nice share...ntar coba ah...
    tapi postnya baru dikit...
    ntar kalau uah banyak...
    btw dah follow ni sob..
    follback ya....

    BalasHapus
  46. Admin Lentera langit, bagi2 dong cara bikin kotak komentar FB di blogspot :D
    *request-dot-com

    BalasHapus
  47. waduh ak plg mals edi html

    BalasHapus
  48. waduh ak plg mals edi html

    BalasHapus
  49. @The7Bloggers
    Terimakasih untuk sarannya sobat :)

    BalasHapus
  50. Terimakasih untuk info dan sarannya kawan :)

    BalasHapus
  51. weeehh,belum update ya sob,ane tunggu....

    BalasHapus
  52. sebenarnya aku ingin saja mmpercantik blogku hanya saja takut makin memberatkan blog

    BalasHapus
  53. Iya sob, sederhana dan efisien

    BalasHapus
  54. Mampir lagi baca-baca :)

    BalasHapus
  55. ijin nyimak sob .. blogger awam .. hee

    BalasHapus
  56. wahh keren banget sob...
    Sukses selalu yah

    BalasHapus
  57. wah bentuknya kaya gitu ya gan, seru jadinya.. mantap. hehehe. biar lebih banyak mengexplore blog

    BalasHapus
  58. hmm... ini bisa diubah warnanya kan?
    *sepertinya bisa.. hmm..

    BalasHapus
  59. @R10tdk memberatkan blog ko' sob, justru ini malam membantu para visitor... :)

    BalasHapus
  60. @Asis Sugiantosilahkan sob.., lagian pas ko' dgn warna dasar dr template sobat :)

    BalasHapus
  61. mantap nih tampilan page navigationnya keren..

    BalasHapus
  62. Wah keren sob, patut dicoba.

    Salam sukses selalu sob...

    BalasHapus