menu dropdown kali ini adalah menu horizontal yang memiliki sub menu..
Ini contohnya
Nah kalo kamu berminat lakukan langkah2 berikut
- Loggin ke blogger kamu
- Pilih edit HTML
- Expant Tempelate Widget
- Setelah itu cari code ini :
Kalo susah gunakan CTRL + F
Kalo udah dapat Letakan Copy/Paste Berikut Tepat Di Atasnya :
#catmenucontainer{
height:33px;
width:730px;
margin:0 auto;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1GI71GeEH1fzXVsk_WxIRIMshUQVcaL_13gyHD3AkhmnKldS18qdZ335XD7mna1HE1Yw5xKAk6fKwX6Co77OP50Gx3CzyJJYHYEIzFZZw_ayFz2xYxT6TjCJ7zGM8qMSXhztg7otNU17S//) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:14px;
font-family:Tempus Sans ITC;
font-weight:normal;
border-top:0px solid #252424;
}
#catmenu{
margin: 0px;
padding: 0px;
width:730px;
background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1GI71GeEH1fzXVsk_WxIRIMshUQVcaL_13gyHD3AkhmnKldS18qdZ335XD7mna1HE1Yw5xKAk6fKwX6Co77OP50Gx3CzyJJYHYEIzFZZw_ayFz2xYxT6TjCJ7zGM8qMSXhztg7otNU17S//) repeat-x;
height:33px;
}
#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}
#catmenu li a:hover, #catmenu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP7SW86Qwv-Xfi5YokhExwZYrirbRnSwQVKXQRO_ekNMY9_5rRY9udkW2ZOxxAsXMHzd2XJ2KZNK1lOyC36WqURsCjrohzoOSbZ9MjQEjk0AP-xKFVTBpsOg-AmQEDX_KB8ymSIWHuMHwa//) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1GI71GeEH1fzXVsk_WxIRIMshUQVcaL_13gyHD3AkhmnKldS18qdZ335XD7mna1HE1Yw5xKAk6fKwX6Co77OP50Gx3CzyJJYHYEIzFZZw_ayFz2xYxT6TjCJ7zGM8qMSXhztg7otNU17S//) repeat;
width: 150px;
color: #fae7df;
font-family:Tempus Sans ITC;
font-weight: normal;
float: none;
margin: 0px;
padding: 9px 10px 10px 10px;
border-bottom: 0px solid #252424;
}
#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP7SW86Qwv-Xfi5YokhExwZYrirbRnSwQVKXQRO_ekNMY9_5rRY9udkW2ZOxxAsXMHzd2XJ2KZNK1lOyC36WqURsCjrohzoOSbZ9MjQEjk0AP-xKFVTBpsOg-AmQEDX_KB8ymSIWHuMHwa//) repeat-x;
color: #fff;
padding: 9px 10px 10px 10px;
}
#catmenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 150px;
margin: 0px;
padding: 0px;
}
#catmenu li li {
}
#catmenu li ul a {
width: 120px;
}
#catmenu li ul a:hover, #catmenu li ul a:active {
}
#catmenu li ul ul {
margin: -34px 0 0 170px;
}
#catmenu li:hover ul ul, #catmenu li:hover ul ul ul,
#catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
left: -999em;
}
#catmenu li:hover ul, #catmenu li li:hover ul,
#catmenu li li li:hover ul, #catmenu li.sfhover ul,
#catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
left: auto;
}
#catmenu li:hover, #catmenu li.sfhover {
position: static;
}
Langkah Berikutnya Loggin Lagi Ke Rancangan Pilih HTML/Javasricpt, Lalu Copy/Paste Code Berikut
<div id="catmenu">
<ul>
<li><a href="http://michael932.blogspot.com/">Home</a></li>
<li><a href="http://www.proxyfami.com/"target=_"blank">Proxyfami</a></li>
<li><a href="http://www.henderick.co.cc/search/label/TKJ"target=_"blank">T K J</a></li>
<li><a href="http://michael932.blogspot.com/search/label/Tips%20And%20Trick"target=_"blank">Tips and trik blog</a></li>
<li><a href="http://michael932.blogspot.com/"target=_"blank">My friend</a>
<ul class="children">
<li><a href="http://michael246.blogspot.com/" target="_blank">EKEL</a></li>
<li><a href="http://onalzgaul.blogspot.com/" target="_blank">Onalz</a></li>
<li><a href="http://koreankomputer.blogspot.com/" target="_blank">Endy</a></li>
</ul>
<li><a href="http://www.4shared.com/u/ULNyq9vt/rohama_virgo.html" target="_blank">My 4shared</a></li>
<li><a href="http://michael932.blogspot.com/search/label/Artis" target="_blank">Artis</a></li>
<li><a href="http://michael932.blogspot.com/search/label/Asian%20Drama" target="_blank">Drama</a></li>
<li><a href="http://michael932.blogspot.com/search/label/Band" target="_blank">Band</a></li>
</li></ul></div>
</div>
<div style="float: right; margin-right: 20px;">
<a href="http://michael932.blogspot.com/feeds/posts/default" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAsEUdAhrKtLxEY70N1aVfUYrQ5hiehZHebpMIYFpiHunC-w9vKICYV_9ZgmVCfi0y8xpjyrMZsUMUc_ktjs11H2oxOqwamkJywdymEhkJT4WhaPU14WXsgMUDF7UV9JEf_5AFivr1uXP5/s1600/rss.png" /></a>
<a href="http://www.youtube.com/" target="_blank"><img src="http://henderickz.googlecode.com/files/1313.png" height="35" width="35" /></a>
<a href="http://www.twitter.com/cheenlie69" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9KQyJJ_o6iiXMFMDgqzi3K6XWg2WPffTRI03Wl9A7HfYwXHDGuz8qoEvEpGf0YxiH51Tlgh2CCHB4_jVn387bZmCS06ARYjiFT9PzJ6bmK-evt5dPyzsXPy2Ns3yr8YQWvP1Rao6pC7_S/s1600/twitter.png" /></a>
<a href="http://www.facebook.com/e99.nz" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgocqw3KMb3s9WoCaz5N9E9bxJccKDUuhEn_ykv9Rv1txjHOfmCAg6d7GCtm73VLAvABg6LV73A7ELzDl9esqeVXwZfwiCguTuDkIvZjaLihE38kYuE_H2TtpYGlqdxlOVUMxGGmHa0gpg8/s1600/facebook.png" /></a>
<a href="http://www.google.com/" target="_blank"><img src="http://henderickz.googlecode.com/files/Chrome.png" height="35" width="35" /></a>
</div>
<div class="clear"></div>
Selamat Mencoba Guyzz ..... ??
Etz jangan lupa Code yang berwarna ungu itu ganti dengan URL blogspot kamu
No comments:
Post a Comment