Blogging

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/AVvXsEgUaw0OvEp1ijewqYhGya9wZ0EWsOEcIP9SeQdFHF0Hpq_WmHWlqmw8jZ6Uf0dg8axWPywVT19vXqbD80WieyOAap3asrJGv1pNDGPOmIcbHightPhHPyiQ9_W4yYNY2s1S2HJoyQO99ND3/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 !

<div style='padding: 5px; overflow: auto; width: auto; height:200px;border:1px solid #000000'> 

Simpan tulisan agan atau apapun disini. 

(Tulisan ditulis di mode Compose, sedangkan kode di tulis pada mode Edit HTML)

</div>