
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:
- Masuk ke Dashboard => Template => Edit HTML
- Cari kode ]]></b:skin> (agar lebih mudah, gunakan ctrl+f untuk mencarinya) lalu masukkan script di bawah ini tepat di atas kode tersebut.
- Selanjutnya cari kode </body>, lalu masukkan script di bawah ini di atas kode tersebut.
- Simpan template dan selesai.Anda bisa lihat hasilnya.
.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;
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Sebelumnya';
var downPageWord ='Selanjutnya';
</script>
<script src='https://firebasestorage.googleapis.com/v0/b/pwcode-56c84.appspot.com/o/UMUM%2Fnavigasiku.js?alt=media&token=30a48155-817a-47dc-a58c-8a5c3ad00950' type='text/javascript'/>
</b:if>
- 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.
8 komentar
keren sob,,ane dah pasang..
Balas Hapussemoga bermanfaat
Balas HapusSalam kenal bro.
Balas HapusMantap 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.
SALAM KENAL BOZ... SENANG SEKALI DENGAN SEGALA URAIAN ANDA,... MUDAH DICERNA DAN SANGAT MEMBANTU SAYA UNTUK MEMPERBAIKI BLOG SAYA TERIMA KASIH BANYAK BOZ...
Balas HapusTerima kasih pak. sangat bermanfaat ilmunya. semoga dibalas Allah
Balas Hapuskeren,,, jangan lupa mampir disini,,, http://hanyasekedarblogg.blogspot.com/
Balas Hapusmantap gan, terima kasih banyak ya atas ilmunya.. :)
Balas Hapusane baru belajar blogspot nih
Balas Hapusselama ini pake wordpress
thanks gan tutornya :)
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.