Membuat Effect Menu di Blog

Pada postingan terdahulu, blog ini bercerita tentang bagaimana membuat menu versi classic di blog. kali ini kita akan membuat menu blog dengan effect yang lebih baru.
Bagi para blogger khususnya pemula, dapat mencoba menggunakan menu dengan effect untuk mempercantik blog anda.

Contoh Gambar :


URL Gambar ini :

http://i1124.photobucket.com/albums/l577/watono/tab-4.png

contoh ketika ditambahkan effect akan menjadi seperti ini :
(sorot cursor mouse anda ke menu dibawah ini. sebagai contoh untuk menu HOME saya arahkan ke halaman pembuatan classic menu)

Yang perlu anda tambahkan pada HTML Template adalah script berikut ini :

/* --------------------Menu style #3-------------------- */
.navi3 {
width: 525px;
position: relative;
display: block;
margin:0 auto;
height: 72px;
}
.navi3 ul {
float: none;
list-style-image: none;
list-style-type: none;
margin: 3px 0;
}
.navi3 ul li {
height: 72px;
background-image: url(DISINI URL GAMBAR MENU ANDA);
background-repeat: no-repeat;
float: left;
margin: 0px;
position: absolute;
padding-top: 5px;
}
.navi3 ul li a{
width: 100%;
height: 100%;
display: block;
}
.navi3 ul li.sm1 {
background-position: 0px 0px;
width: 125px;
left: 0px;
}
.navi3 ul li.sm2 {
background-position: -125px 0px;
width: 124px;
left: 100px;
}
.navi3 ul li.sm3 {
background-position: -249px 0px;
width: 124px;
left: 200px;
}
.navi3 ul li.sm4 {
background-position: -373px 0px;
width: 125px;
left: 300px;
}
.navi3 ul li.sm5 {
background-position: -498px 0px;
width: 126px;
left: 400px;
}
.navi3 ul li:hover{
z-index: 1000;
}
.navi3 ul li.sm1:hover {
background-position: 0px -72px;
}
.navi3 ul li.sm2:hover {
background-position: -125px -72px;
}
.navi3 ul li.sm3:hover {
background-position: -249px -72px;
}
.navi3 ul li.sm4:hover {
background-position: -373px -72px;
}
.navi3 ul li.sm5:hover {
background-position: -498px -72px;
}

Masuk ke editor HTML Template blog anda, kemudian letakan kode script diatas, tepat sebelum kode ]]></b:skin>
jangan lupa untuk mengganti tulisan DISINI URL GAMBAR MENU ANDA dengan alamat url gambar sobat! (atau silahkan copy paste url gambar yang ada diatas jika ingin menggunakan gambar menu seperti contoh diatas).
untuk lebar (width) menu, sesuaikan dengan ukuran blog sobat!

Simpan Template anda.

Langkah selanjutnya adalah menempatkan kode kedalam Gadget HTML Blog anda
masuk ke  Edit Halaman,
pilih Tambah Gadget
lalu pilih gadget HTML / Javascript,

kemudian tempatkan kode dibawah ini kedalamnya :

<div class="navi3">
<ul>
<li class="sm1"><a href="#"></a></li>
<li class="sm2"><a href="#"></a></li>
<li class="sm3"><a href="#"></a></li>
<li class="sm4"><a href="#"></a></li>
<li class="sm5"><a href="#"></a></li>
</ul>
</div>

ingat tanda (#) silahkan sobat ganti dengan url tujuan dari menu anda!

Simpan seluruh hasil pekerjaan anda dan lihat hasilnya