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.
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;}
.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='Previous';
var downPageWord='Next';
</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 ^_^
1 komentar:
thanks sob...
Posting Komentar
Sampaikan komentar Anda dengan sopan..