Cara Membuat Menu Horizontal DropDown ala BoyTrik

Rahasia Blogspot | Sebenarnya ini udah lama banget, tapi mohon maaf ya buat mas Andi Adris karena baru di posting. Beliau pernah bertanya udah lama banget lewat PM di facebook, kira-kira seperti ini beliau bertanya ;

"gimana cara buat menu kayak ounya mu kalau di tekan langsung banyak menu" di PM Facebook

oleh Andi Adris Pemilik Blog http://andi-adriz.blogspot.com/

Berlanjut dari pertanyaan tersebut, Kali ini saya ingin coba jawab Request dari mas Andi, yaitu mas Andi minta Cara Membuat Menu Horizontal DropDown kalau saya translate pakai bahas keren, hehe... Untuk Screen Shootnya, bisa anda lihat dibawah ini ...
 

Biar gak panjang lebar lagi, berikut tutorialnya:

1. buka blogger lalu pilih Template
2. klik Edit HTML dan Lanjutkan (jangan lupa download dulu backupan Templatenya)
3. copy paste kode berikut dan letakan di atas kode ]]></b:skin>

/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:#333;width:980px;margin:0 auto;padding:0 auto}
#menuwrapper{width:980px;height:27px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:8px 10px 8px}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh92kIKDVRNMawgi6AMFDRsiPrRpfdXWnte1O5ZSiW9jQ7WTx3Rhm8bAJnlZn3oKFFVydss_7DCm2ENKObfeTYUU1Fm7bO0JS-MEuuNgrlt75RWjM_yDF3gUW-iaXVhHbDRjb5qU-4Qptk/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:8px 24px 8px 10px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#fff}
#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{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

4. cari kode seperti di bawah ini

    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='MaxSide Blog (Header)' type='Header'>

5. letakkan kode berikut di atas nya 

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0KxMHt43wMHXf0A6XJbWZC4sYr7yd-HF9a3G6uTBpbt6cCOkLg0VOru3UuHj6gdzPIxFhHhk1NgIWaT46PrjB7fzdrlSBaobPBHZ-RHcwcE1WizqIw6h-M96qT_DtE6-tj7klcqgO_ug/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='#'>About Us</a></li>
<li><a class='trigger' href='#'>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'>Sport</a></li>

<li><a href='#'>Culture</a></li>
<li><a class='trigger' href='#'>Entertainment</a>
<ul>
<li><a href='#'>Music</a></li>
<li class='hr'/>
<li><a href='#'>Movie</a></li>
<li class='hr'/>
<li><a href='#'>Television</a></li>
</ul>
</li>
<li><a href='#'>Health</a></li>

<li><a class='trigger' href='#'>More</a>
<ul>
<li><a href='#'>Themes</a></li>
<li class='hr'/>
<li><a href='h#'>Tutorial</a></li>
<li class='hr'/>
<li><a href='#'>Resource</a></li>
<li class='hr'/>
<li><a href='#'>Advertise</a></li>
<li class='hr'/>
<li><a href='#'>Javascript</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>

6. Terakhir Simpan template,,,  SELAMAT MENCOBA ...

Posted by Ajang rahmat

Tweet