Ada banyak cara untuk
membuat Menu/Pages horizontal dan vertikal pada blog. Tampilan pada
menu/pages juga bermacam-macam bentuknya. namun pembuatanya
memerlukan waktu agak lama dan agak rumit soalnya anda di tuntut untuk
meng Edit HTML, salah sedikit saja maka template anda akan rusak
amburadul karena itu anda dituntut untuk memBackUp template blog anda terlebih dahulu untuk antisipasi.
Cara membuat Menu/Pages berikut sangat sederhana karena anda akan memakai widget yang labih simpel. Langsung saja:
- Log in ke blog anda
- Home=>klik Layout/tata letak
- Setelah muncul gambar seperti di bawah Klik Add a Gadget/tambah gadget. jangan lupa letakan gadget pada tempat yang sesuai (biasanya di bawah header)
- Kemudian pilih HTML/JavaScript
- Kemudian masukan kode (kode berada di bawah) pada kolom yang tersedia
- Save/Simpan
Kode:
<style>
/*------------------------------------------------------------------*/
/* CATEGORY MENU */
/*------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#f5f5f5;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='http://ibtimain.blogspot.com/'>Home</a></li>
<li><a href='@'> Pages 1</a></li>
<li><a href='@'> Pages 2</a></li>
<li><a href='@'> Pages 3</a></li>
<li><a href='@'> Pages 4</a></li>
<li><a href='@'> Pages 5</a></li>
</ul>
</div>
Keterangan:
Ganti tanda ( @ ) pada kode <a href='@'> dengan link yang anda inginkan dari blog anda,
bisa link label, postingan, atau link yang menuju ke web/blog yang lain.
ganti tulisan Pages 1 - Pages 5 dengan nama menu yang anda inginkan.
Tidak ada komentar:
Posting Komentar
Silahkan Tuliskan Komentar Anda