Cara Membuat Page Navigation Number Pada Blog

B-digg - Tutorial Blogger dan SEO BloggerCara Membuat Page Navigation Number. Sudah pernah melihat kan beberapa template yang menggunakan page navigation number pada templatenya. fungsi dari page navigation number ini adalah untuk menggantikan link posting lama atau posting baru yang ada pada bawah postingan halaman utama pada sebuah template. Dengan page navigation number ini pengunjung bisa bebas memilih halaman postingan keberapa yang ingin dibaca.

Tutorial Blog lengkap, b-digg

Page navigation number ini juga bisa dibilang memberikan kesan rapi dan indah pada blog kita, walaupun saya sendiri tidak menggunakannya. Tetapi jika ada sobat yang ingin menggunakan page navigation pada blognya, berikut ini saya berikan Cara Membuat Page Navigation Number Pada Blog.

1.Log in ke blogger.
2.Klik template » edit HTML » centang Expand Template Widget.
3.Cari kode ]]></b:skin> dan letakkan kode dibawah ini tepat di atasnya.


 /* -- 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> dan letakkan kode dibawah ini tepat di atasnya.

 <!-- 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:
  • Jika anda ingin mengganti jumlah postingan yang akan ditampilkan pada setiap halaman silahkan ganti kode yang berwarna biru.
5.Cari kode 'data:label.url' dan ganti kode itu dengan kode dibawah ini.

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

Keterangan:

var pageCount=4; (Jumlah postingan yang akan ditampilkan)
var displayPageNum=4; (Jumlah tombol angka navigasi)


6.Save Template anda.

Nah selesai sudah Cara Membuat Page Navigation Number Pada Blog mudah-mudahan artikel ini bisa bermanfaat bagi anda

36 komentar:

  1. Itu link script JS punya agan bukan? Sudah di hapus tuh konfirmasi file hilang/ error

    BalasHapus
  2. postingan yang bagus tentang cara membuat page navigation number

    BalasHapus
  3. Tetep ga mau keluar itu no nya,,gmana yah,,ada yang punya cara lain ga..

    BalasHapus
  4. @M.kurnia YudantoMas,,cara buat posting lama sama dengan tampilan utama gimana?Punya saya cuma judulnya aja gak muncul berupa postingan.Mohon pencerahannnya.

    BalasHapus
  5. cra yg agan sebutin udh ane ikutan, tpi msh blum muncul gan navigation page numbernya..mhon pncrhannya ya

    BalasHapus
  6. bang, bagaimana cara mengatasi error saat dibuka template. ada tulisannya "/b/app-preview?token=-np01zgBAAA.-tsQB7Cau5FCdHMR1b6uoQ.kapuV5D7oxUncjfvvbPEYw" di URL.
    terima kasih.

    BalasHapus
  7. waduhh,,,gak berhasil gan,,,
    gmn tuch,,,

    BalasHapus
  8. Thanks sob ifonya :)
    Nanti saya coba di blog baru saya :)

    BalasHapus
  9. ga'mempan om jrus nya buat template zoom magazine v2 -__-'
    mampir jga gan ke blog ane :) di sini om .. ada solusi laen g'.. blum lagi data:label.url ada 5.. buset nah template.. help gan :'(

    BalasHapus
  10. coba dulu kak..keren jadinya terlihat profesional blognya hehe

    BalasHapus
  11. kok gagal ya mas aku coba ditemplate yang aku gunain...!

    BalasHapus
  12. sy heran ya sob..sebelum nya page navrigation ada di template blog sy... namun ko tampilan nya berubah sendiri ya sob..terganti sama post lama n baru gitu..apa pengaruh dari penambahan kode lain atau apa ya sob.. :)

    BalasHapus
  13. Kode sudah diperbaiki sob mudah-mudahan kali ini berhasil.

    BalasHapus
  14. thanks sudah berbagi ilmunya, sukses selalu..

    BalasHapus
  15. Mksh bro... bermanfaat bgt tuh...

    BalasHapus
  16. Alhamdulillah kelar juga, terima kasih gan ... salam

    BalasHapus
  17. di blog ane gak bisa sob,,
    apa template ane yang kurang support yah ??

    BalasHapus
  18. makasih ya infonya..... salam balik sob?...

    BalasHapus
  19. Kalau ada teman2 yg gak bisa, kemungkinan html sobat gak suport tuh ada yg kurang, ada tutorial yg lain silahkan cari di google coba :)

    BalasHapus
  20. nice info gan, mo tanya klo laman baru cuma bisa 1 postingan aja ya gan ?? beda sama laman "home" ato "beranda yang bisa lebih dari satu postingan, bisa ga laman baru dibuat agar tampilan nya lebih dari 1 postingan aja sama kya laman "home" ato "beranda" ??

    BalasHapus
  21. Saya coba pasang di blog saya, berhasil untuk dihalaman depan tetapi untuk di dalam halaman kategori yang muncul tombol posting lama, kenapa ya?
    kira2 bagaimana solusinya. terimakasih

    BalasHapus
  22. Thank's Gan =D Berhasil..!

    BalasHapus
  23. mas tanya tapi bukan pada topik " komentar di blogku gak bisa replay

    www.abu-uswah.blogspot.com

    BalasHapus
  24. menarik informasinya gan, klo artikelnya menarik dan sangat saya suka penjelasannya yg cukup menarik lagipula loe, juga bagi teman2 yg suka film box office ampe semi terbaru silakan kunjungi situsnya saya ok, makasi untuk admin situs ini loe, salam blogger indonesia.

    BalasHapus
  25. Sedikit kasih masukan sob...

    Yang gak pada muncul coba kodeksi di CSS #blog-pager. kalau disana ada css display:none; ganti dengan clear:both;

    Lalu perhatikan lagi langkah no5 data:label.url kalau anda sebelumnya sudah memasang breadcrumb, cari dan ganti yang di kode breadcrumb tsb.

    Saya suidah praktek dan berhasil. tq...

    BalasHapus
  26. mas kode 'label.url'
    kox gak da di html blog saya....
    tolong dijelasin ya mas...
    mampir dulu sambil minum kopi mas di blog ane....
    http://ricosulistiyanto.blogspot.com/

    BalasHapus
  27. Kok yang ini ngak ada " data:label.url' "

    BalasHapus
  28. WOW BAGUS BANGET GAN
    SALAM SUPER!!!
    SYA TUNGGU POSTINGAN BERIKUTNYA!!

    BalasHapus
  29. Terima kasih banyak infonya, blog saya menjadi lebih bagus...

    BalasHapus
  30. Terimakasih atas info nya gan...
    Sangat membantu sekali buat saya..

    Salam kenal dari ane..
    http://aan-shared.blogspot.com

    BalasHapus
  31. Bro...kenapa setelah pasang page navigasi, kota komentarnya hilang..mampir ke okenusantara.blogspot.com

    BalasHapus

Hallo tamu, setelah anda membaca artikel di atas, jangan lupa untuk meninggalkan komentarnya ya. Klik subscribe by email, untuk mengetahui balasan komentar anda melalui email.

Your left Slidebar content. -->