ALT_IMG

Featured 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat Readmore...

ALT_IMG

Featured 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat Readmore..

Alt img

Featured 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat Readmore...

ALT_IMG

Featured 4

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat Readmore...

ALT_IMG

Featured 5

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat Readmore...

Tampilkan postingan dengan label tutorial blog. Tampilkan semua postingan
Tampilkan postingan dengan label tutorial blog. Tampilkan semua postingan
Rabu, 09 Mei 2012

Membuat Horizontal Menu Dropdown

Diposting oleh Andi di 09.10 8 komentar
kali ini saya akan memposting horizontal menu versi Technology Tower karena  tadi ada sobat blogger saya yang bertanya di fb bagaimana cara membuat horizontal menu dropdown, 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/AVvXsEhBeouryLS9q24CHS0BiOBrydZd28br-NJ6YGkJMVOHuRvkLY9TOAf1BENy9B5VzGnKYmpssQf4-Sj3d1dZgAuWbOVraxLMGwzRp_2Q_VPCSURoQ9wrUmHLSIX-1lwQVWIbz7yR9srL9MU/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 :)
Continue reading →

Labels

 
Contact us if you have any question or anything else

X-Gen Green CSS V.1 © 2012 All Right Reserved. Supported by Blogger and Technology Tower
Template: X-Gen Green CSS V.1 | Edited by: Andi-Techno | Original Template: Possibility by: Dhe-Template