Mudah Membuat Navigasi Halaman Blog

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
   
   
2. Cari kode ]]></b:skin> (agar lebih mudah, gunakan ctrl+f untuk mencarinya) lalu masukkan script di bawah ini tepat di atas kode tersebut.

.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj901feI-xmzOBgxTsM593Ksi1ZgEOgGeB_-2jZCpOhZwvYX3Emp5oNw-FB0C_9_C_f_m4_g8Rai_iMs55GA-sTdTUrJkZY_gjNKthfS1TR362aa_Gm-x_-_-jF9AzdAzI_vOXoO83NeSM/s1600/halaman.jpg) 0 -50px repeat-x;}
.showpageNum a:hover {border:1px solid #aeae0a;
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj901feI-xmzOBgxTsM593Ksi1ZgEOgGeB_-2jZCpOhZwvYX3Emp5oNw-FB0C_9_C_f_m4_g8Rai_iMs55GA-sTdTUrJkZY_gjNKthfS1TR362aa_Gm-x_-_-jF9AzdAzI_vOXoO83NeSM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj901feI-xmzOBgxTsM593Ksi1ZgEOgGeB_-2jZCpOhZwvYX3Emp5oNw-FB0C_9_C_f_m4_g8Rai_iMs55GA-sTdTUrJkZY_gjNKthfS1TR362aa_Gm-x_-_-jF9AzdAzI_vOXoO83NeSM/s1600/halaman.jpg) 0 0 repeat-x;
text-decoration: none;

3. Selanjutnya cari kode </body>, lalu masukkan script di bawah ini di atas kode tersebut.

<b:if cond='data:blog.pageType != "item"'>
<script>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Sebelumnya';
var downPageWord ='Selanjutnya';
</script>
<script src='https://cdn.jsdelivr.net/gh/papawardi/code@master/navigasiku.js'/>
</b:if>

 
4. 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.

Apabila ada script yang rusak/ tidak bisa digunakan, mohon untuk memberitahu kami melalui email atau bisa juga melalui kolom komentar di bawah. Terima kasih