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://bit.ly/14Chqrv) 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='http://yudhacomunity.blogspot.com/p/about-us.html'>About Us</a></li>
<li><a href='http://yudhacomunity.blogspot.com/p/contact-us.html'>Contact Us</a></li>
</ul>
</li>
<li><a href='http://yudhacomunity.blogspot.com/p/privacy-policy.html'>Privacy Policy</a></li>
<li><a href='http://yudhacomunity.blogspot.com/p/disclaimer.html'>Disclaimer</a></li>
<li><a href='http://yudhacomunity.blogspot.com/2011/12/cara-memasang-iklan-diblog-komunitas-anak-tkj.html'>Put Banner</a></li>
<li><a class='hsubs' href='#'>IT Knowledge</a>
<ul class='subs'>
<li><a href='http://yudhacomunity.blogspot.com/search/label/hacking'>Hacking</a></li>
<li><a href='http://yudhacomunity.blogspot.com/search/label/programing'>Programing</a></li>
<li><a href='http://yudhacomunity.blogspot.com/search/label/jaringan'>Networking</a></li>
</ul>
</li>
<li><a class='hsubs' href='#'>Blogger Tips</a>
<ul class='subs'>
<li><a href='http://yudhacomunity.blogspot.com/search/label/Cara%20membuat%20website'>Making a Website</a></li>
<li><a href='http://yudhacomunity.blogspot.com/search/label/Domain'>Domain</a></li>
<li><a href='http://yudhacomunity.blogspot.com/search/label/kontes%20blog'>Kontes Blog</a></li>
</ul>
</li>
<li><a href='#'>ETC</a>
<ul class='subs'>
<li><a href='http://yudhacomunity.blogspot.com/2012/02/link-blog-sahabat.html'>Link Exchange</a></li>
<li><a href='http://yudhacomunity.blogspot.com/2012/07/daftar-sebagai-penulis-blog-ini_25.html' title='Masukkan Artikel mu dan jadikan blog ini sebagai SosBok'>Be Writer</a></li>
<li><a href='http://yudhacomunity.blogspot.com/2011/08/cara-update-status-via-terserah-kita.html'>Update Status Via</a> </li>
</ul>
</li>
<div id='lavalamp'/>
</ul>
</div>
rubah la Link URL 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
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 live link, jika kamu sopan saya segan salam blogger dan tetap semangat
