Menu Hover Black Lava Hover Cool Style

Menu Black Lava Hover Cool Cara Membuat Menu yang Black Lava Hover di blogspot, ok sobat kali ini saya ingin memposting Arikel Cara Membua...

Menu Black Lava Hover Cool

Cara Membuat Menu yang Black Lava Hover di blogspot,
ok sobat kali ini saya ingin memposting Arikel Cara Membuat Menu yang Black Lava Hover di blogspot. ini postingan permintaan dari teman PAMBAH.Corps yang beberapa hari lalu meminta tutorial ini Menu Keren Buat BLOGGER dengan Effet yang lain dari pada yang lain dengan FUNGSI yang sama, tapi saya baru bisa posting sekarang yah, sebelum nya saya juga sudah buat postingan cara membuat menu dropdown yang keren bisa di lihat di Cara Membuat Menu Fixed yang keren atau bisa lihat postingan Cara Membuat Menu Drop Down yang Keren dengan Menu Search
tanpa basa basi langsung saja lihat penampakan menu nya

kalau anda yang tertarik langsung saja kita mulai ke cara pembuatan nya

pertama login ke blog dan masuk ke Edit HTML
setelah itu cari code ]]></b:skin> dan copy code di bawah ini pas di atas code ]]></b:skin>

.container {
height: 571px;
margin: 30px auto;
width: 957px;
}
#nav,#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
background: url(http://goo.gl/Gq9T4h) no-repeat scroll 0 0 transparent;
clear: both;
font-size: 12px;
height: 58px;
padding: 0 0 0 9px;
position: relative;
width: 957px;
}
#nav ul {
background-color: #222;
border:1px solid #222;
border-radius: 0 5px 5px 5px;
border-width: 0 1px 1px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
left: -9999px;
overflow: hidden;
position: absolute;
top: -9999px;
z-index: 2;
transform: scaleY(0);
}
#nav li {
background: url('http://bit.ly/178rdD6') no-repeat scroll right 5px transparent;
float: left;
position: relative;
}
#nav li a {
color: #FFFFFF;
display: block;
float: left;
font-weight: normal;
height: 30px;
padding: 23px 20px 0;
position: relative;
text-decoration: none;
text-shadow: 1px 1px 1px #000000;
}
#nav li:hover > a {
color: #00B4FF;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
background: none repeat scroll 0 0 #121212;
outline: 0 none;
}
#nav li:hover ul.subs {
left: 0;
top: 53px;
width: 180px;
transform: scaleY(1);
}
#nav ul li {
background: none;
width: 100%;
}
#nav ul li a {
float: none;
}
#nav ul li:hover > a {
background-color: #121212;
color: #00B4FF;
}
#lavalamp {
background: url('http://bit.ly/17LIFi4') no-repeat scroll 0 0 transparent;
height: 16px;
left: 13px;
position: absolute;
top: 0px;
width: 64px;
transition: all 300ms ease;
}
#lavalamp:hover {
transition-duration: 3000s;
}
#nav li:nth-of-type(1):hover ~ #lavalamp {
left: 13px;
}
#nav li:nth-of-type(2):hover ~ #lavalamp {
left: 90px;
}
#nav li:nth-of-type(3):hover ~ #lavalamp
{
left: 172px;
}
#nav li:nth-of-type(4):hover ~ #lavalamp {
left: 253px;
}
#nav li:nth-of-type(5):hover ~ #lavalamp {
left: 334px;
}
#nav li:nth-of-type(6):hover ~ #lavalamp {
left: 415px;
}
#nav li:nth-of-type(7):hover ~ #lavalamp {
left: 495px;
}
#nav li:nth-of-type(8):hover ~ #lavalamp {
left: 570px;
}

keterangan

pada script #nav li:nth-of-type(1):hover ~ #lavalamp { left :13px; } sampai yang #nav li:nth-of-type(8):hover di ganti agar gambar yang mengikuti images sesuai dengan letak menu nya
ok setelah itu cari code </head> atau langsung saja save template, dan paste code html di bawah ini di gedget javascript/HTML

<div class="container">
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a class='hsubs' href='#'>About</a>
<ul class='subs'>
<li><a href='URL TUJUAN'>About Us</a></li>
<li><a href='URL TUJUAN'>Contact Us</a></li>
</ul>
</li>
<li><a href='URL TUJUAN'>Privacy Policy</a></li>
<li><a href='URL TUJUAN'>Disclaimer</a></li>
<li><a href='URL TUJUAN'>Put Banner</a></li>
<li><a class='hsubs' href='#'>IT Knowledge</a>
<ul class='subs'>
<li><a href='URL TUJUAN'>Hacking</a></li>
<li><a href='URL TUJUAN'>Programing</a></li>
<li><a href='URL TUJUAN'>Networking</a></li>
</ul>
</li>
<li><a class='hsubs' href='#'>Blogger Tips</a>
<ul class='subs'>
<li><a href='URL TUJUAN'>Making a Website</a></li>
<li><a href='URL TUJUAN'>Domain</a></li>
<li><a href='URL TUJUAN'>Kontes Blog</a></li>
</ul>
</li>
<li><a href='#'>ETC</a>
<ul class='subs'>
<li><a href='URL TUJUAN'>Link Exchange</a></li>
<li><a href='URL TUJUAN' title='Masukkan Artikel mu dan jadikan blog ini sebagai SosBok'>Be Writer</a></li>
<li><a href='URL TUJUAN'>Update Status Via</a> </li>
</ul>
</li>
<div id='lavalamp'/>
</ul>
</div>

Ubah lah Link URL yang bertuliskan URL TUJUAN [ganti dengan url anda] dan Nama Menu nya sesuai dengan yang kalian inginkan, jika ingin buat di bawah code </head> boleh, yang mau buat di gedget javascript/HTML juga boleh

Happy coding !!!!!
Sekian lah artikel saya, semoga bisa bermanfaat bagi sobat sobat sekalian.. jika ingin blog nya saya kunjungi, berkomentar lah dengan sopan dan sesuai aturan,.. saya tidak memperbolehkan kata kata kotor, jika kamu sopan saya segan salam blogger dan tetap semangat

Anda Juga Bisa Mengganti Backgrund Menu Nya Dengan Background Yang Saya Edit Ini.

Cara Nya Mengganti Adalah Dengan :

Perhatikan Code CSS yang diatas Pasti tulisan yang di blog warna kuning seperti ini
#nav
background: url(http://goo.gl/Gq9T4h) no-repeat scroll 0 0 transparent;
clear: both;
font-size: 12px;
height: 58px;
padding: 0 0 0 9px;
position: relative;
width: 957px;
Kamu ganti yang bertuliskan Merah dan diselimutin Hijau diatas dengan gambar yang saya sediakan dibawah ini