Kamis, 07 Juni 2012

Cara Membuat Menu Horizontal Drop Down Black Orange


By on 13.44

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.
Selsai deh, jika ada hal yang kurang paham silahkan tinggalkan pesan di Kotak Komentar.

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

9 komentar:

  1. dicoba dulu yagh bro hehehhe

    BalasHapus
  2. saya ingin membuat menu drop down dari dulu mungkin akan saya coba di rumah baru saya upload

    BalasHapus
  3. Thank You So Much Bro ... maju terus blognya ...

    BalasHapus
  4. ane nyobain ko malah eror xml ya sob :(

    BalasHapus
  5. keren sob, ijin angkut ke blog :D

    BalasHapus
  6. Sobat harus ikuti cara di atas, letakan kode HTML menu nya tepat di bawah kode akhir bagian header blog Anda.

    BalasHapus
  7. [help]

    mas saya sudah coba dan hasil di blog sudah bisa,
    tapi kenapa ya preview template saya tidak dapat tampil???

    BalasHapus