Cara Membuat Tombol Next di Blog

Wah sudah lumayan lama tidak posting tentang tutorial blog nih, jadi agak kurang update deh blog ini. Setelah dulu saya pernah membahas tentang Mengganti Tulisan Posting Lama Dan Posting Baru Jadi Lebih Menarik , sekarang kita akan membahas cara membuat navigasi halaman blog. Lihat gambar di bawah ini sebagai contoh.

 

Memang cara ini sudah banyak sekali yang membahas, tapi tidak apa-apa saya bahas lagi untuk pengunjung setia blog ini. Navigasi halaman ini saya padukan dengan sedikit sentuhan css3 gradient, border radius, dan text sadhow. Bagi kalian yang sudah terbiasa dengan kode css, silahkan di modifikasi agar jadi lebih menarik sesuai template.


Oke langsung saja dengan menambahkan kode css berikut DI ATAS ]]></b:skin>
Berikut adalah contohnya sob.

Pastinya sobat sudah tau semua yah, fungsi tombol itu untuk apa, dan dimana letaknya, kalau yang belum tau, letaknya nanti berada dibawah postingan pada halaman home page sob.

Ouke mari kita buat.

1. Langkah yang pertama, Login blog sobat, kemudian pilih Template.

2. Lalu klik edit HTML, selanjutnya klik Lanjutkan.

3. Jangan lupa klik Expand Template Widget, lalu cari kode ]]></b:skin>

4. Kemudian letakan kode dibawah ini diatas kode ]]></b:skin>
 

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

5. Belum selesai sob, jangan buru-buru tekan simpan, hehe.... selanjutnya cari kode </body>

6. Lalu copy kode yang ada dibawah ini diatas kode </body> tadi.

<script type='text/javascript'>

var pageCount=5;

var displayPageNum=5;

var upPageWord=&#39;Previous&#39;;

var downPageWord=&#39;Next&#39;;

</script>

<script src='http://marbun.googlecode.com/files/scriptsnext.js' type='text/javascript'/>

 7. Nah, yang ke"tujuh" ini baru SIMPAN sob, hehe....

Ouke semoga ini bisa bermanfaat, dan terimakasih ^_^