Cara Membuat Menu Horizontal Drop Down

Kali ini saya akan membahas Cara Membuat Menu Horizontal Drop Down, dengan bantuan CSS menu ini akan terlihat profesional dari segi warna, bagi sobat yang pingin membuatnya ikuti langkah-langkah di bawah ini.

1. Login ke Blog kamu.
2. Pilih menu Edit HTML, langsung cari kode ]]></b:skin>
3. Setelah ketemu letakan kode CSS di bawah ini tepat diatas kode nomor 2 yang dicetak tebal.

#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/AVvXsEglLZVIhnilUyQTCPlnj65ru7cqImoTGTWc8CDcLD5hzVlk4in6bHiNX0YiJGLCsIKORHG70Qho-NifKYTFkolMeldKelqE3_NMRh3NTeNOcsqB_BK8mQEjdHCmpzWVDil_dXN7QzVv6sc/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}

4. Untuk membuat menu Horizontal Drop Down nya kamu cari terlebih dahulu kode bagian Header blog anda, kodenya berbeda-beda tergantung blog nya, biasanya kode nya header-wrapper atau kayak kode di bawah ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITLE BLOG SOBAT (Header)' type='Header'/>
</b:section>
</div><!-- end header-wrapper -->
NANTI KODE HORIZONAL NYA LETAKAN DISINI DIBAWAH KODE AKHIR HEADER

Kode yang berwarna merah adalah Judul Blog yang ada pada Header, supaya lebih jelas untuk mencari kode bagian Header Blog anda silahkan saja klik CTRL+F cari nama Judul Blog anda yang ada pada Header Blog anda, jika mirip kayak kode di atas, baru kita mulai membuat menu Horizontal nya.

Horizontal Menu Drop Down Black Orange Kode : (Letakan kode di bawah ini tepat di bawah kode akhir bagian header)

<div id='topbar'>
<div id='top-wrapper'>
<ul id='top'>
<li><a href='/' 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='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>

Ganti tanda # dengan URL yang di tuju.
Selsai deh, jika ada hal yang kurang paham silahkan tinggalkan pesan di Kotak Komentar.


NB: untuk merubah warna silahkan sobat ganti sesuai keinginan sobat..
untuk orange kode yang dikunakan disini #ff600 >> silahkan ganti sesuai keinginan sobat
untuk black, abu abu, disini menggunakan #444 #222 #000
selamat berkreasi :)


sumber : blazzer blog

Baca Juga Yang Ini Sob:

Artikel Terkait