Mudah Membuat Navigasi Halaman Blog

21 February 2012
Kali ini saya ingin sharing tentang cara membuat navigasi halaman pada blog. Sebenarnya cara ini sudah banyak di ulas oleh para blogger, namun saya rasa tidak ada salahnya kalau saya juga ingin berbagi dengan anda semua. Paling tidak bisa menambah referensi anda. Oke, langsung saja ke pokok  permasalahan. Untuk membuat navigasi halaman ini, anda harus benar-benar mengikuti langkah demi langkah yang saya uraikan , karena kita akan sedikit mengutak-atik HTML Template blog. Berikut langkah-langkahnya:
  1. Masuk ke Dashboard => Template => Edit HTML
    Edit Html, Navigasi halaman blog

  2. Cari kode ]]></b:skin> (agar lebih mudah, gunakan ctrl+f untuk mencarinya) lalu masukkan script di bawah ini tepat di atas kode tersebut.
  3. .showpageArea {font-family:verdana,arial,Helvetica;color: #000;font-size:11px;margin:10px;}
    .showpageArea a {color: #000;text-shadow:0 1px 2px #fff;font-weight: 700;}
    .showpageNum a {padding: 3px 8px;margin:0 4px;text-decoration: none;border:1px solid #3d85c6;
    -webkit-border-radius:3px;-moz-border-radius:3px;
    background: #ddd url(http://3.bp.blogspot.com/-0fdrDtrdJJ0/Ty35ZW3IN7I/AAAAAAAAAQs/a0Z1QhDjZeA/s1600/halaman.jpg) 0 -50px repeat-x;}
    .showpageNum a:hover {border:1px solid #aeae0a;
    background: #ccc url(http://3.bp.blogspot.com/-0fdrDtrdJJ0/Ty35ZW3IN7I/AAAAAAAAAQs/a0Z1QhDjZeA/s1600/halaman.jpg) 0 -25px repeat-x;}
    .showpageOf{margin:0 8px 0 0;}
    .showpagePoint {color:#fff;text-shadow:0 1px 2px #333;padding: 3px 8px;margin: 2px;font-weight: 700;
    -webkit-border-radius:3px;-moz-border-radius:3px;
    border:1px solid #919106;
    background: #666 url(http://3.bp.blogspot.com/-0fdrDtrdJJ0/Ty35ZW3IN7I/AAAAAAAAAQs/a0Z1QhDjZeA/s1600/halaman.jpg) 0 0 repeat-x;
    text-decoration: none;
    
  4. Selanjutnya cari kode </body>, lalu masukkan script di bawah ini di atas kode tersebut.
  5. <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <script type='text/javascript'>
    var pageCount=5var displayPageNum=5; 
    var upPageWord =&#39;Sebelumnya&#39;; 
    var downPageWord =&#39;Selanjutnya&#39;; 
    </script>
    <script src='https://firebasestorage.googleapis.com/v0/b/pwcode-56c84.appspot.com/o/UMUM%2Fnavigasiku.js?alt=media&amp;token=30a48155-817a-47dc-a58c-8a5c3ad00950' type='text/javascript'/>
    </b:if>
    
     
  6. Simpan template dan selesai.Anda bisa lihat hasilnya.
Catatan:
  • Huruf yang berwarna biru (var pageCount=5) jumlah angkanya harus di samakan dengan jumlah halaman posting yang akan di tampilkan. Untuk mengesetnya, silahkan masuk ke Dashboard => Setelan => Pos dan Komentar
  • Huruf yang berwarna merah (var displayPageNum=5) jumlah angkanya bisa anda sesuaikan menurut tab angka halaman yang ingin di tampilkan.

INFORMASI PENTING

Apabila ada script atau tips & trik yang tidak bisa digunakan, silahkan beritahu kami melalui kolom komentar atau email kami di psnpenting@gmail.com

papa wardi
papa wardi Updated at: 13:25

8 komentar

keren sob,,ane dah pasang..

Balas Hapus

Salam kenal bro.
Mantap dan keren bro, saya tadi sempat lama cari-cari navigasi halaman yang pas dengan template blogku, setelah mencoba trik dari blog yang lain, tapi tidak ada yang berhasil, saya akhirnya menemukan di sini yang betul-betul pas dengan tampilan blogku. thank's so much and sukses selalu.
Salam.

Balas Hapus

SALAM KENAL BOZ... SENANG SEKALI DENGAN SEGALA URAIAN ANDA,... MUDAH DICERNA DAN SANGAT MEMBANTU SAYA UNTUK MEMPERBAIKI BLOG SAYA TERIMA KASIH BANYAK BOZ...

Balas Hapus

Terima kasih pak. sangat bermanfaat ilmunya. semoga dibalas Allah

Balas Hapus

keren,,, jangan lupa mampir disini,,, http://hanyasekedarblogg.blogspot.com/

Balas Hapus

mantap gan, terima kasih banyak ya atas ilmunya.. :)

Balas Hapus

ane baru belajar blogspot nih
selama ini pake wordpress
thanks gan tutornya :)

Balas Hapus

Kolom komentar adalah tempat untuk Tanya-Jawab, Kritik-Saran dan tempat untuk berbagi ilmu, BUKAN TEMPAT PROMOSI.
Maaf jika saya tidak bisa membalas satu per satu komentar sahabat semua. Harap maklum.

Copyright 2016 © papawardi