Pernah saya bahas sebelumnya mengenai cara membuat dropdown menu namun rasanya banyak teman-teman blogger sekalian yang kurang menyukai formatnya. Maka dari itu saya akan coba berbagi model menu dengan format yang lain.
Untuk contoh bisa anda lihat pada menu yang saya gunakan di blog ini. Menurut saya menu ini cukup sederhana dan pemasangannya tidak begitu sulit.
Membuat Menu Dropdown
1. Untuk membuatnya hal pertama yang harus anda lakukan adalah login ke blogger.com
2. Buka menu TEMPLATE dan pilih EDIT HTML
3. Cari kode ]]></b:skin> (Untuk memudahkan pencarian gunakan CTRL + F)
4. Kemudian letakanlah kode di bawah ini tepat di atas kode ]]></b:skin>
/* Menu Horizontal Dropdown */
#menuwrapperpic {background:#008ec3;width:980px;margin:0 auto;padding:0 auto;}
#menuwrapper {width:970px;margin:0 auto;height:34px;}
#menubar {width:100%;}
#menubar, #menubar ul {padding: 0;margin: 0;list-style: none;font-family:'Arial', serif;}
#menubar a {display: block;text-decoration: none;padding: 9px 10px 8px 10px;font:bold 13px/15px Arial,serif; text-decoration:none;color: #fff;border-right:1px solid #444}
#menubar a.trigger {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ9_3TDHfRhAxPZBFTa8Xl0jSG9FL_a_d6UEctn8rMH3-K3HB0_J6ovUuugAvXf7-6QO2FWafN2mztkjYk3ecrOWvEoEPDw2nuOlOlj3FUyNnncN4LP0dfr3KiShhfnpqofIH6bdcUEjWH/s1600/arrow_black_bottom.gif);background-repeat: no-repeat;background-position: right center; padding: 9px 20px 8px 10px;}
#menubar li {float: left;position: relative;background:#008ec3;}
/* hide from IE mac */
#menubar li {position: static; width: auto;}
/* end hiding from IE5 mac */
#menubar li ul, #menubar ul li {width:170px;}
#menubar ul li a {text-align:left;color: #fff;padding: 8px 13px;font-size: 13px;font-weight:normal;text-transform:none;font-family:Arial;border:1px solid #444;}
#menubar li ul {z-index:100;position: absolute;display: none;background:#000;}
#menubar li ul {-moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.6); -webkit-box-shadow:0 rgba(0, 0, 0, 0.6);}
#menubar li:hover a, #menubar a:active, #menubar a:focus, #menubar li.hvr a{background-color:#fff;color: #004276;text-decoration:underline;}
#menubar li:hover ul, #menubar li.hvr ul {display: block;}
#menubar li:hover ul a, #menubar li.hvr ul a {color: #edfdfd;background-color:transparent;text-decoration:none;}
#menubar li ul li.hr { display:block; font-size: 1px; height: 0px; line-height: 0px; margin:0px 0;}
#menubar ul a:hover {background-color: #fff!important;color: #004276 !important;text-decoration:none;}
#menubar li.selected a, #menubar li.selected a:visited {border-right:1px solid #444}
#menubar li.selected a:hover {background:none;color:#F7D528;}
5. Lalu SIMPAN template anda.
6. Langkah selanjutnya adalah cari lagi kode </head>
7. Copy paste kode di bawah ini dan letakan tepat di bawah kode </head> tersebut
<!-- Menu Horizontal -->
<script type='text/javascript'>
//<![CDATA[
function Menubar(){ //v1.1.0.2 by PVII-www.projectseven.com
if(navigator.appVersion.indexOf("MSIE")==-1){return;}
var i,k,g,lg,r=/s*hvr/,nn='',c,cs='hvr',bv='menubar';
for(i=0;i<10;i++){g=document.getElementById(bv+nn);if(g){
lg=g.getElementsByTagName("LI");if(lg){for(k=0;k<lg.length;k++){
lg[k].onmouseover=function(){c=this.className;cl=(c)?c+' '+cs:cs;
this.className=cl;};lg[k].onmouseout=function(){c=this.className;
this.className=(c)?c.replace(r,''):'';};}}}nn=i+1;}}
//]]>
</script>
<!--[if lte IE 7]> <style> #menuwrapper, #menubar ul a {height: 1%;} a:active {width: auto;} </style> <![endif]-->
8. Sekarang menuju ke menu TATA LETAK dan pilih ADD GADGET.
9. Cari menu HTML/JAVASCRIPT
10. Lalu letakanlah copy dan paste kode di bawah ini
<div id='menuwrapperpic'> <div id='menuwrapper'> <ul id='menubar'> <li><a href='http://digitalareas.blogspot.com/search/label/Hot%20News'>Hot News</a></li> <li><a href='http://digitalareas.blogspot.com/search/label/Blogging'>Blogging</a> <ul> <li><a href='http://digitalareas.blogspot.com/search/label/Blogger'>Blogger</a></li> <li><a href='http://digitalareas.blogspot.com/search/label/Wordpress'>Wordpress</a></li> <li><a href='http://digitalareas.blogspot.com/search/label/SEO%20Trick'>SEO Trick</a></li> </ul> </li> <li><a href='http://digitalareas.blogspot.com/search/label/Devices'>Devices</a> <ul> <li><a href='http://digitalareas.blogspot.com/search/label/Komputer'>Computer</a></li> <li><a href='http://digitalareas.blogspot.com/search/label/Laptop'>Laptop</a></li> <li><a href='http://digitalareas.blogspot.com/search/label/Gadget'>Gadget</a></li> </ul> </li> <li><a href='http://digitalareas.blogspot.com/search/label/Download'>Download</a> <ul> <li><a href='http://digitalareas.blogspot.com/search/label/Antivirus'>Antivirus</a></li> <li><a href='http://digitalareas.blogspot.com/search/label/Application'>Application</a></li> <li><a href='http://digitalareas.blogspot.com/search/label/Browser'>Browser</a></li> <li><a href='http://digitalareas.blogspot.com/search/label/Template'>Template</a></li> </ul> </li> <li><a href='http://digitalareas.blogspot.com/search/label/Entertainment'>Entertainment</a> <ul> <li><a href='http://digitalareas.blogspot.com/search/label/Game'>Game</a></li> <li><a href='http://digitalareas.blogspot.com/search/label/Movie'>Movie</a></li> </ul> </li> <li><a href='http://digitalareas.blogspot.com/search/label/Internet'>Internet</a> <ul> <li><a href='http://digitalareas.blogspot.com/search/label/Alexa'>Alexa</a></li> <li><a href='http://digitalareas.blogspot.com/search/label/Bisnis%20Online'>Bisnis Online</a></li> <li><a href='http://digitalareas.blogspot.com/search/label/Email'>Email</a></li> <li><a href='http://digitalareas.blogspot.com/search/label/Youtube'>Youtube</a></li> </ul> </li> <li><a href='http://digitalareas.blogspot.com/search/label/Social%20Media'>Social Media</a> <ul> <li><a href='#'>Google +</a></li> <li><a href='http://digitalareas.blogspot.com/search/label/Facebook'>Facebook</a></li> <li><a href='http://digitalareas.blogspot.com/search/label/Twitter'>Twitter</a></li> </ul> </li> <li><a href='http://digitalareas.blogspot.com/search/label/Tips-Trik'>Tips-Trik</a></li> </ul> <br class='clearit'/> </div> <div style='clear:both;'></div> </div>
11. Kemudian klik tombol SIMPAN
12. Sekarang coba lihat hasilnya pada blog anda.
Menu ini sengaja saya beri warna latar belakang hitam gelap. Jika anda ingin menggantinya silakan ganti kode warna #161616 yang ada pada kode CSS dengan kode yang anda inginkan.
Dan untuk menu yang ada pada contoh merupakan menu yang ada pada blog ini, anda harus menggantinya dengan menu dan URL yang anda inginkan.
Baiklah, saya rasa artikel tentang Membuat Menu Dropdown Dengan CSS saya rasa cukup sampai disini. Semoga bermanfaat dan Happy Blogging !
Source code : kucoba.com
