32

Membuat Navigasi Nomer Halaman Blog untuk Blogger

Bisnis Berkah Halal
Membuat Navigasi Nomer Halaman Blog untuk blogger / blogspot. Navigasi nomer halaman blogger ini intinya sebagai pengganti dari blog pager. Tentunya navigasi halaman bernomer ini terlihat lebih elegant dan profesional dengan menampilkan juga total page yang ada. Lihat contohnya di bawah ini.
Membuat Navigasi Nomer Halaman Blog
Lihat juga contohnya pada blog Template Blogger, nah kalau yang ini beda lagi desainnya hehe. Buat anda yang sudah bisa edit css, bisa langsung edit sendiri tampilannya. Tapi tanpa di edit sudah bagus kok, terlihat lebih profesional dari pada tampilan "Older Post" atau "Posting Sebelumnya" dll. Bagaimana cara membuat navigasi nomer halaman blog di blogger? yoi lanjut baca tutorialnya di bawah ini.

Cara Membuat Navigasi Nomer Halaman Blogger

  • Login ke blog anda  kemudian menuju halaman Design dan Edit HTML, jangan lupa di back up dulu templatenya untuk keamanan soalnya akhir akhir ini sering error blogger.
  • Cari kode ]]></b:skin> lalu paste Css di bawah ini tepat di atas kode ]]></b:skin>
.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;
}
Langkah selanjutnya anda cari kode </body> , kalau sudah ketemu paste kode berikut ini tepat di atas kode </body>
<!--Page Navigasi-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigasi -->
Simpan template dan lihat hasilnya :).

Keterangan :
Anda bebas mengubah tulisan yang saya kasih warna hijau, angka 6 adalah jumlah posting yang tampil tiap halaman sedangkan yang 5 adalah tombol navigasi yang tampil. Next adalah text untuk ke halaman selanjutnya, sebalikanya previous untuk kembali kehalaman sebelumnya.

Membuat Navigasi Nomer Halaman Blog

Cara membuat Navigasi Nomer Halaman Blog untuk blogger ini di dapat dari jalan jalan tadi ke blog lain hehe. Thanks bloggerplugin yang sudah posting tutorial ini. Oh ya buat anda yang males mau edit HTML atau bingung dengan cara yang saya kasih di atas, bisa langsung add widget navigasi halaman untuk blogger di bawah ini.

Tambahan :
Untuk menyesuaikan Tampilan pada label, silahkan cari kode
'data:label.url' dan ganti dengan kode 'data:label.url + &quot;?&amp;max-results=5&quot;'
Nah angka 5 di sana samakan dengan Pagecount pada kode Navigasi. Semoga sukses
Tweet

32 comments:

  1. kea wp-pagenavi yak...

    BalasHapus
  2. @Amri MF: ho oh gan hehee

    BalasHapus
  3. berhasil sob,
    thx for info

    BalasHapus
  4. @ash: sama sama sob :)

    BalasHapus
  5. Tanya bro, kalo kita edit html (utk pasang keyword, script, meta tag dsb) via hape koq slalu gagal yo? Dah gak cukup buat nambah karakter. Ada solusi?

    BalasHapus
  6. @asroma kp: walah, saya g pernah coba pake hp gan, hehe

    BalasHapus
  7. Thanks gan

    BalasHapus
  8. sama sama kawan :)

    BalasHapus
  9. LEMBAGA PENDIDIKAN KETRAMPILANFeb 14, 2012 01:20 AM

    terima kasih sdh bagi2 ilmunya..........

    BalasHapus
  10. kalo menampilkan seluruh isi label tapi formatnya dengan navigasi nomor halaman kaya gini juga gimana ? bukan di halaman utamanya, tapi pas kita klik LABEL A, isi label A banyak... dan tampilannya kaya gitu juga, gimana caranya ??

    BalasHapus
  11. aq kok g bisa ea gan? apa pengaruh template yang memang g bisa di ubah yea???

    BalasHapus
  12. bintangindonesiaFeb 15, 2012 09:56 PM

    Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  13. matur nuhun pak............

    BalasHapus
  14. Rossi AgistiFeb 16, 2012 01:13 AM

    makasih yaa pak ;)

    BalasHapus
  15. ak dah praktekin mas.. tapi ko cuma halaman depan aja yg berubah ya.. truuss page 2 dan seterusnya masih model bawaan blog,.. mohon pencerahannya..

    BalasHapus
  16. gan,Punya ane kok gak bisa keluar ya? saya sudah mengikuti langkah-langkah di atas secara teliti , mohon bantuannya gan >> lihat blog saya ini gan >> http://blogovoo.blogspot.com thanks Gan!

    BalasHapus
  17. @senirupa: jumlah posting yang tampil di halaman blog di sesuaikan dengan var pageCount=..;

    ke halaman setting > formating

    BalasHapus
  18. @Admin Ovoo: biasanya lancar2 saja mas, coba lagi mas

    BalasHapus
  19. punya saya belum ditanggapi :
    kalo menampilkan seluruh isi label tapi formatnya dengan navigasi nomor halaman kaya gini juga gimana ? bukan di halaman utamanya, tapi pas kita klik LABEL A, isi label A banyak... dan tampilannya kaya gitu juga, gimana caranya ??

    BalasHapus
  20. itu sudah saya tambahkan pada posting mas . Good luck

    BalasHapus
  21. ...:::DieBrie:::...Feb 19, 2012 05:52 AM

    Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  22. Dudi SuswandiFeb 19, 2012 10:17 PM

    wah ...yang saya ko ga keluar ya gan

    www.dudi-suswandi.blogspot.com

    BalasHapus
  23. Fakry Naras WahidiFeb 26, 2012 05:05 AM

    ijin menggunakan kodenya iya
    makasi...

    BalasHapus
  24. Cataatn Blog M HasbiFeb 26, 2012 10:37 PM

    @bamz gz : ane kurang ngerti gan,,,tolong kasih penjelasan yabg lebih jelas lagi donk,,
    atau buat vide nya aja gitu,,biar lebih gampang

    BalasHapus
  25. campor baworMar 2, 2012 09:35 AM

    mas aku coba kok gak bisa ya... gak muncul ..kira2 apa penyebabnya

    BalasHapus
  26. @Cataatn Blog M Hasbi: itu sudah paling manteb gan :)

    BalasHapus
  27. @campor bawor: mungkin salah kode penempatan :)

    BalasHapus
  28. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  29. kereen, akhirnya blogku ada page navigationnya, tadinya bingung mau diapain, btw thanks gan!

    BalasHapus
  30. makasih mas infonya, salam kenal ^^

    BalasHapus
  31. makasih info nya, berguna banget buat blog baru saya

    BalasHapus
  32. 321 Full DownloadMar 13, 2012 11:52 PM

    I Like To Post. Visit http://321fulldownload.blogspot.com/ to vew navigasi, sucessfull

    BalasHapus

◄ Posting Baru Posting Lama ►
 

Komentar Terbaru