Senin, 12 November 2012

Cara Membuat Menu Horizontal Drop Down Black Orange

Blazer Blog, CSS - Kali ini saya akan membahas Cara Membuat Menu Horizontal Drop Down Black Orange, saya katakan Black Orange karena warna dasar dari menu ini berwarna hitam dan ke orangean, 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(http://3.bp.blogspot.com/-xBsbKIUfF0I/TyFxf1pJQiI/AAAAAAAAExI/S6g7p0oiO6A/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='Blazer Blog (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.

Tidak ada komentar:

Poskan Komentar