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(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/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='http://1.bp.blogspot.com/-Yx-NuFKviSQ/TwETaPMdmfI/AAAAAAAAATs/fLZvwofZ8N0/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 ...

32 Responses to "Cara Membuat Menu Horizontal DropDown ala BoyTrik"

  1. ane udah punya gn di template ane.... xixixix blogwalking

    BalasHapus
    Balasan
    1. Oke, sob! punya Loe desainya cool banget sob!

      Hapus
  2. Nice Artikelnya gan.. gua coba ahh, hehe

    BalasHapus
  3. weew keren sob perlu dicoba nihh

    BalasHapus
  4. wahh....keren juga menu horizontal dropdownnya,,, tetapi sebaiknya mesti di sesuaikan dengan style template blog itu sendiri...ohh y>> kalo ngeliat alexa trafficnya agan ini, cepat banget langsingnya....ada pake trik y sob,,, kalau ada mohon berbagi y,,

    BalasHapus
    Balasan
    1. Hahaha, sip makasih sob!
      Ya, betul sob! ane pakai trik buat langsingin Alexa, oke besok ane tulis postinganya sob!

      Hapus
  5. wah mantep banget ini yg w cari2...dicoba dulu ahh...kunjungin balik ya omm

    BalasHapus
  6. thanks gan.......dri kemarin2 nyari akhirnya ketemu juga.......

    BalasHapus
  7. thanks mas bro tapi koq isinya gak ada ya apa musti di tambahin lg, seperti noton tv online or sebagainya? caranya gmn ya mas bro kalo bisa yg otomatis jd gak ribet heheehee ** mhn petunjuknya bro cara ngisinya seperti blog mas bro thanks**

    BalasHapus
  8. Bro CSS dasar untuk membuat dropdown itu apa yha..apakah harus di tambah hover,position,float ataukah yg lainnya..soalnya saya cuman butuh dropdownnya saja..jadi tampilan menunya tetep seperti yg ada di blg saya,,saya hanya ingin menambah dropdown saja tolong di bantu yha.

    BalasHapus
  9. thanks please visit :
    http://indonesian-profitclicking.blogspot.com/

    BalasHapus
  10. Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...

    BalasHapus
  11. mantap gan

    coba geh agan buka blog saya,,

    jangan lupa koment yha ???

    BalasHapus
  12. Gan bagaimana cara mengganti warna nya ?

    BalasHapus
  13. kok ga bisa ya gan??

    jgn lupa kunjungi http://neocybertechno.blogspot.com/

    BalasHapus
  14. mau nyoba tapi gk bisa.. :D
    thank info nya gan...

    BalasHapus
  15. thank's banget kang tutorialnya. sangat membantu dan bermanfaat sekali

    BalasHapus
  16. keren gan !. makasih banyak sudah share tutorialnya. salam kenal dan salam blogger.

    BalasHapus
  17. saya coba dulu kawan. tampilanya keren banget...hehehe

    terimakasih ya kawan sudah berbagi.

    BalasHapus
  18. Tq gan atas Tutorialnya Baru buat blog baru nih saya .. :D

    BalasHapus
  19. sip gan mksh yaa info'a..
    dri kmaren sya cari tips ini hehe

    BalasHapus
  20. Terima kasih mas, i am newbie ...

    BalasHapus
  21. Terima kasih untuk tutorialnya, sukses s'lalu untuk anda

    BalasHapus
  22. wah terimakasih sobb,, saya coba terapkannn..

    BalasHapus
  23. ini kok malah gak bisa... aneh.. ini caranya gimana y? saya sudah ikutin aturannya tapi malah gak bisa.. memang tersimpan sempurna namun bentuknya acak2 an dan bukan berbentu link bar caranya gimana ya mas? mas mau lihat blog saya? (jujur saya tidak ada maksud sedikitpun utk mengiklankan blog saya disini) www.katolisitas-indonesia.blogspot.com

    BalasHapus
  24. cara buat link bar ky punya mas itu gimana??? keren banget link bar nya..

    BalasHapus

Terimakasih ya udah repot-repot berkunjung kesini. Dan sebagai tanda jejak, dengan senang hati saya menerima setiap Komentar dari Anda. Dan bagi Anda yang Blogger, boleh menyematkan LINK di Namanya, biar Nanti saya bisa berkomentar Balik Keblog Anda!!!