Bikin Menu Blog

Terinspirasi melihat beberapa blog yang menggunakan effect pada tampilan menu, hari ini saya kembali membuka rahasia isi script untuk menampilkan menu seperti pada contoh SAMPEL MENU

Bagi anda yang baru pertama kali berkunjung ke blog watonoe, ada beberapa tulisan di blog ini tentang Menu blog. silahkan anda link Tentang Menu 1, Tentang Menu 2, Tentang Menu 3.

Untuk tampilan effect menu sebagaimana yang saya maksudkan pada Sampel Menu diatas, beginilah cara menerapkannya.


Masuk ke editor html templates anda, kemudian cari kode berikut ini ]]></b:skin>
lalu tempatkan kumpulan script berikut tepat diatas kode ]]></b:skin>

#onhomenu {
position: fixed;
left: 10px;
top: 30px;
background-color:none;
border-radius: 15px;
-moz-border-radius: 15px;
width: 202px;
height: 20px;
color: #000;
transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
z-index: 3;
overflow: hidden;
padding: 4px 7px 5px;
}
#onhomenu h3 {
margin: 0;
padding: 0;
text-align: center;
cursor: pointer;
}
#onhomenu ul {
border-radius: 10px;
-moz-border-radius: 10px;
background-color: none;
margin: 15px 0;
padding: 0 15px;
}
#onhomenu li {
list-style: none;
margin: 0 0 5px;
padding: 0;
}
#onhomenu li a {
color: #FFF;
text-decoration: none;
font-size: 14px;
}
#onhomenu li a:hover {
color: #00FF00;
}
#onhomenu:hover {
z-index: 5;
height: 150px;
}

setelah kode diatas anda tempatkan pada template, klik simpan template.

perlu diingat, bahwa anda dapat memodifikasi bagian background-color pada script diatas sesuai dengan kemauan anda.

selanjutnya adalah menempatkan script menu pada widget html blog anda.
klik tambah gadget/widget, kemudian pilih gadget HTML lalu tempatkan kode berikut ini didalamnya.

<div id="onhomenu">
<h3>SAMPLE MENU</h3>
<ul>
<li><a href="URL LINK" title="">PROJECT 1</a></li>
<li><a href="URL LINK" title="">PROJECT 2</a></li>
<li><a href="URL LINK" title="">PROJECT 3</a></li>

<li><a href="URL LINK" title="">LINK</a></li>
</ul>
</div>

kemudian klik simpan.
Silahkan ganti tulisan URL LINK dengan alamat url tujuan menu dan tulisan PROJECT 1,dst silahkan ganti dengan Judul bagian menu yang ditampilkan.