Membuat Navigasi Halaman Bernomor

Kalau sobat blogger berada di halaman beranda (Home page) blog ini, maka sobat blogger akan melihat atau menemukan adanya Page Navigation (Navigasi halaman). Halaman bernomor ini saya buat untuk mempermudah pengunjung blog saya untuk menemukan postingan yang mereka butuhkan. Setiap halaman sudah saya atur sedemikian rupa sehingga hanya menampilkan lima postingan untuk setiap halaman. Kalau jumlah postingan yang saya tampilkan lebih dari lima postingan, sudah pasti loading untuk tiap halamannya akan berat.

Untuk membuat navigasi halaman bernomor, sobat blogger tidak perlu edit template (Ya... Jauh berbeda dengan tutorial blogger di blog lain). Yang perlu sobat blogger lakukan hanya menambahkan sedikit kode CSS (Cascading Style Sheet) di kolom HTML/JavaScript. 

Cara Buat Navigasi Halaman Di Blogger

• Sign In di blogger.com
• Pada Menu Drop Down klik Layout
• Klik Add a gadget dan pilih HTML/JavaScript.
• Copy Paste kode berikut pada kolom yang tersedia :

<style type='text/css'>
#blog-pager{height: 28px;
    padding: 10px 0 0;
overflow:hidden;
text-align:center;
}
.showpageArea a {text-decoration:underline;
font-size: 16px;
       text-align: center;}
.showpageNum a {font-size:16px;text-decoration:none;border: 1px solid #cccccc;margin:0 5px;padding:5px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {font-size:16px;text-decoration:none;border: 1px solid #cccccc;background: #216FD9;margin:0 5px;padding:5px;color:#ffffff;}
.showpageOf {text-decoration:none;padding:5px;margin: 0 5px;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:5px;}
.showpage a:hover {text-decoration:none;background: #cccccc;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style>
<script style='text/javascript'>var pageCount=5;
var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script>
<script style='text/javascript' src='http://tutorialblogspot.googlecode.com/files/halamanblog.js'></script>
<p style="display:none;">Page Navigation by<a href="http://www.tutorialblogspot.com/2012/07/membuat-halaman-bernomor-di-blog.html" rel="dofollow">Tutorial Blogspot</a></p>

• Simpan widget sobat.

Tambahan :

1. Jangan kasih judul buat widget sobat.
2. Angka 5 merupakan jumlah posting yang akan ditampilkan.
3. Yang warna merah adalah kode warna, silahkan sobat blogger sesuaikan.

Perhatikan Gambar di bawah ini...!!!

 

 

 

 

 

Source : 

http://www.tutorialblogspot.com/