Canda Blogs: Cara Membuat Menu Horizontal Dropdown Black Orange dengan CSS

Kamis, 14 Juni 2012

Cara Membuat Menu Horizontal Dropdown Black Orange dengan CSS

Cara Membuat Menu Horizontal Dropdown Black Orange - Kali ini saya akan membahas Cara Membuat Menu Horizontal Dropdown Black Orange. Black Orange itu maksudnya adalah warna dasar dari menu ini yaitu berwarna hitam dan jingga, apalagi dengan bantuan CSS menu ini akan terlihat lebih keren dan lebih profesional. Nah, berikut contohnya :

Berikut, langkah-langkahnya :

1. Login ke Account Blogger sobat

2. Pilih Rancangan, Edit HTML, lalu Centang Expand Template Widget

3. Cari kode ]]></b:skin>

4. Bila sudah, Copy kode dibawah ini tepat diatas kode ]]></b:skin>

#topbar{;border: 1px solid #222;background-color: #111;background-image: -moz-linear-gradient(#444, #111);background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));width:100%;border-top:1px solid #000;margin:0 auto;padding:0 auto;border-top:5px solid #ff6600;}
#top-wrapper{width:100%;height:30px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#top{width:100%}
#top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#top a{display:block;text-decoration:none;font-size:13px;font-weight:700;text-transform:uppercase;color:#fff;padding:6px 10px 8px;border-left:1px solid #ccc}
#top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBHtmb5uYALJBIur_8fyvxDo-32ugwVRRrXpW7l9vv2dits5cl0SW9xMTBEEeZMLlu3Pgp4SBCbhm3Tx9jXic5SEK6P7lgtWQHAenrq4HTNL3nOMlFToTrQj0egxXRWjjvvmYa5LnsEJQ/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:6px 24px 8px 10px}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:160px}
#top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:4px 10px}
#top li ul{z-index:100;position:absolute;display:none;background:#4c4c4c;padding-bottom:0;}
#top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background:#ff6600;color:#fff}
#top li:hover ul,#top li.hvr ul{display:block}
#top li:hover ul a,#top li.hvr ul a{color:#fff;background-color:transparent;text-decoration:none}
#top li ul li.hr{border-bottom:1px solid #444;display:block;font-size:1px;height:0;line-height:0;margin:0}
#top ul a:hover{background-color:#ff6600!important;color:#fff!important;text-decoration:none}

5. Untuk meletakkan kode horizontal dropdownnya, sobat cari terlebih dahulu kode header blog sobat, kodenya berbeda-beda tergantung blognya. Kalau kode header saya, seperti dibawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Tutorial Blogger (Header)' type='Header'/>
</b:section>
</div>

Kode yang warna merah itu adalah kode judul blog yang ada pada header, supaya lebih mudah sobat tekan Ctrl+f lalu cari kode judul blog yang ada pada header blog sobat.

6. Bila sudah mencari kodenya, Copy kode dibawah ini tepat dibawah kode seperti diatas

<div id='topbar'>
<div id='top-wrapper'>
<ul id='top'>
<li><a href='http://tutorial-blogz.blogspot.com' style='background:#ff6600;'>Home</a></li>
<li><a href='#'>About Us</a></li>
<li><a class='arrow' 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='arrow' 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='arrow' href='#'>Design</a>
<ul>
<li><a href='#'>Art</a></li>
<li class='hr'/>
<li><a href='#'>Blog</a></li>
<li class='hr'/>
<li><a href='#'>Website</a></li>
</ul>
</li>
<li><a class='arrow' href='#' style='background:#ff6600;'>More</a>
<ul>
<li><a href='#'>Themes</a></li>
<li class='hr'/>
<li><a href='#'>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>