BELAJAR NGEBLOG: Cara Membuat Halaman Bernomor Di Blog

Cara Membuat Halaman Bernomor Di Blog

Kalau sobat blogger berada di halaman depan (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 tiga postingan untuk setiap halaman. Kalau jumlah postingan yang saya tampilkan lebih dari tiga 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. Untuk lebih jelasnya, ikuti saja tutorial blogspot yang saya berikan dibawah ini.

Cara Buat Navigasi Halaman di Blog:
- Sign In di blogger.com
- Pilih Tata Letak
- 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=3;
var displayPageNum=3;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://indosoftgame.blogspot.com/" rel="dofollow">
http://indosoftgame.blogspot.com/</a></p>




- Simpan widget sobat.
- Pindahkan Gadget HTML tersebut dengan mendragnya ke bawah Posting Blog (Blog Post)

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

Referensi: http://indosoftgame.blogspot.com/2012/07/cara-membuat-halaman-bernomor-di-blog.html#ixzz2FynhIZ00

Tidak ada komentar:

Posting Komentar