Menu Navigasi pada blog merupakan elemen yang perlu diperhatikan di
dalam sebuah blog yang mementingkan penampilan dan style untuk setiap
detilnya. Ada bermacam-macam bentuk menu navigasi di dalam sebuah blog
itu, ada menu navigasi horizontal, menu navigasi vertikal atau yang
lainya. Tempat menyimpan menu navigasi juga bermaca- macam, ada yang di atas judul blog, di bawah judul blog, di samping atau juga di bawah postingan. Khusus menu navigasi di bawah postingan, biasanya berupa menu Next Page.
Menu navigasi next page ini fungsi nya sama dengan menu navigasi yang lain, yaitu untuk memudahkan pengunjung blog dalam mencari artikel yang mereka butuhkan. Makin sering nya kita membuat postingan blog, maka makin banyak pula artikel yang di buat. Karena halaman blog tidak mungkin memuat semua postingan yang sangat banyak, maka dari itu dibuatlah menu navigasi agar postingan bisa di simpan dalam beberapa halaman. Misalnya kita buat per halaman home/beranda sebanyak 5 judul postingan. Kalau blog kita sudah memiliki 50 posting, maka menu navigasi nya terdiri dari 10 nomor navigasi.
Untuk lebih jelasnya, silahkan kalian bisa coba cara membuat menu navigasi next page di bawah ini.
Pertama kali kita masuk dulu ke blog, klik menu Template >> Klik menu HTML , kemudian cari kode ]]></b:skin>. Copy kode script di bawah ini dan paste kan di atas kode ]]></b:skin>.
CSS
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;}
Selanjutnya, cari kode script </body>, dan copy kan kode script di bawah ini dan paste kan persis di atas kode </body>.
HTML
<script type='text/javascript'>
var pageCount=3;
var displayPageNum=3;
var upPageWord='Previous';
var downPageWord='Next';
</script>
<script src='http://marbun.googlecode.com/files/scriptsnext.js' type='text/javascript'/>
var pageCount=3;
var displayPageNum=3;
var upPageWord='Previous';
var downPageWord='Next';
</script>
<script src='http://marbun.googlecode.com/files/scriptsnext.js' type='text/javascript'/>
Setelah selesai, jangan lupa simpanlah template blog anda yang telah di edit itu. Jika anda mau merubah jumlah posting yang muncul tiap halaman, maka gantilah angka "3" dengan angka yang anda inginkan. Begitu juga dengan warna menu navigasi nya, anda bisa merubahnya sesuai dengan selera anda.
0 Comments