Start Saint 2: cara membuat horizontal menu dropdown

Membuat Horizontal Menu Dropdown -

kali ini saya akan memposting horizontal menu versi Technology Tower karena tadi ada sobat blogger saya yang bertanya di fb bagaimana , contohnya bisa kalian lihat sendiri di blog ini. Atau kamu bisa melihat gambar ini:

langsung aja sob:

1. Masuk ke Rancangan Blogger>Edit HTML>Expand Template Widget

2. Cari kode <b:skin><![CDATA[ lalu pastekan kode dibawah ini sesudah kode <b:skin><![CDATA[

#menu-wrapper{color:#fff;width:100%;height:40px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyAEOSh27o8dP5NLyVCC9CbPMk_14qZfxyGNuoFbN4Hns12LWvFzCAXY1WfHSCEkrpgX71bZnxeNAib_zvOA_nsok5-XIKMQ9NMdHk2jPlTYnhB5NtdBTXKE80izuZn7Sy2MPGgdGtArw/s1600/bgnav.png) repeat-x #1e1e1e;border-bottom:2px solid #007acc;border-top:1px solid #191919;box-shadow:0 0 8px #007acc;position:relative}
#menu{color:#fff;width:900px;height:40px;font-family:'Agency FB';font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin:0 auto}
#menu ul{width:100%;height:auto;list-style:none;margin:0;padding:0}
#menu ul li{float:left;position:relative;width:110px;margin:0}
#menu ul li ul{position:relative;z-index:111;display:none}
#menu ul li ul li{width:100%;background:#0e0e0e}
#menu ul li a,.menu ul li a:visited{display:block;text-decoration:none;width:100%;height:40px;text-align:center;line-height:40px;overflow:hidden;color:#007acc}
#menu ul li:hover ul{display:block;position:absolute;top:40px;left:0;width:100%;border-bottom:1px solid #0a0a0a;border-right:1px solid #0a0a0a;border-left:1px solid #0a0a0a;border-bottom-left-radius:5px;border-bottom-right-radius:5px;margin-left:-1px;box-shadow:0 8px 6px -6px #000}
#menu ul li:hover ul li ul{display:none}
#menu ul li:hover ul li a{display:block;color:#999;-webkit-transition:text-shadow .2s linear;-moz-transition:text-shadow .2s linear;-o-transition:text-shadow .2s linear;transition:text-shadow .2s linear}
.anditechno{background:transparent;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear}
.anditechno:hover{color:#fff;background:#000}

3. cari kode <body> lalu pastekan kode dibawah ini sesudah kode <body>

<div id='menu-wrapper'><div id='menu'><ul><li> <a class='anditechno' href='/'>Home</a>
</li>

<li><a class='anditechno' href='#' title=''>Techno Zone</a>

<ul><li><a href='http://andi-techno.blogspot.com/search/label/teknologi' title='Artikel Teknologi'>Berita Teknologi</a></li>

<li><a href='http://andi-techno.blogspot.com/search/label/gadget' title='All About Gadget'>Gadget</a></li>

<li><a href='http://andi-techno.blogspot.com/search/label/software' title='All About Software'>Software</a></li>

<li><a href='http://andi-techno.blogspot.com/search/label/mobile' title='All About Mobile/Handphone'>Mobile</a></li></ul></li>

<li><a class='anditechno' href='http://andi-techno.blogspot.com/search/label/unik' title='Artikel Aneh dan Unik'>Unik + Aneh</a></li>

<li><a class='anditechno' href='#' title=''>Social Media</a>

<ul><li><a href='http://andi-techno.blogspot.com/search/label/social%20media' title='All About Social Media'>Social Media Article</a></li>

<li><a href='http://andi-techno.blogspot.com/search/label/facebook' title='All About Tips and Trick Facebook'>Facebook</a></li></ul></li>

<li><a class='anditechno' href='http://andi-techno.blogspot.com/search/label/tips%20dan%20trik' title='All About Tips and Trick'>Tips and Trick</a></li>

<li><a class='anditechno' href='http://andi-techno.blogspot.com/search/label/artikel' title='Other Article'>Artikel</a></li></ul></div></div>

keterangan:
- kamu bisa mengganti kode berwarna hijau dan biru dengan url dan nama menu sesuai menu yang mau kamu masukkan
- kode berwarna biru adalah kode menu dropdown (menu yang dibawahnya akan keluar menu lain ketika disorot mouse)

4. oke, klik simpan template dan lihat hasilnya

selamat berkreasi :)

Sabtu, 05 Januari 2013

cara membuat horizontal menu dropdown