Cara Membuat Navigasi Page Number Dengan Edit HTML

Cara Membuat Navigasi Page Number Dengan Edit HTML

 

 Hallo iklankers semua... Udah lama ya gak ngepos, maklum lah beberapa waktu ini banyak kesibukan dalam pekerjaan ne!!!... gimana ne kabar sobat semua???

sekarang Iklankers mau kasi sedikit trik ne buat sobat Iklankers semua, semoga aja bermamfaat buat perkembangan blog nya...
ok kita langsung aja pada topik di atas:
 

Salah satu cara untuk membantu pengunjung blog menemukan content yang mereka cari adalah tersedianya navigasi yang mudah dijalankan. Bagaikan sebuah stir kemudi blog, pengunjung dengan mudah berganti halaman menuju tulisan yang ingin mereka baca dengan menggunakan Navigasi Page Number ini. Selain memudahkan pengunjung menemukan content yang mereka cari, Navigasi Page Number atau Navigasi Pencarian Halaman juga dapat mempercantik tampilan halaman utama blog. Navigasi ini berupa halaman berurut atau next page number 1, 2, 3... Next Page Number yang terletak di bawah posting. Lebih jelasnya lihat gambar berikut!

Sebenarnya ada beberapa tampilan dan cara untuk membuat Navigasi Page Number, tetapi pada posting kali ini saya akan membahas Cara Membuat Navigasi Page Number dengan Edit pada HTML. Berikut langkah-langkah untuk membuatnya pada blogspot:

• Login ke Blogger 
• Masukan email dan password anda
• Pada Dasbor klik Rancangan
• Pada Rancangan klik Edit HTML.
• Jangan lupa klik Download Template Lengkap
• Centang Expand Template Widget
• Cari Kode berikut: ]]></b:skin> (Gunakan Ctrl+F untuk memudahkan pencarian)
• Setelah ketemu, di atas kode ]]></b:skin> letakkan script di bawah ini :

.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;
}

• Lalu cari lagi kode seperti ini: </body> (Biasanya terletak pada bagian bawah kode template anda)
• Jika sudah ketemu, di atas kode </body> letakkan script di bawah ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
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>

• Selanjutnya carilah kode berikut ini : 'data:label.url'
• Hapus kode 'data:label.url' dan ganti dengan script di bawah ini:

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

     

• Jangan lupa Simpan Template anda
• Sekarang lihat hasilnya

Demikianlah langkah praktis Cara Membuat Navigasi Page Number Dengan Edit HTML di blogspot. Coba cara lain membuat Navigasi Page Number yang lebih mudah di sini

Semoga bermanfaat. Salam sukses selalu.

Jika artikel ini bermamfaat, jangan lupa di like ya....