Membuat Horizontal Menu Dropdown

Posted by Andi Posted on Minggu, Mei 06, 2012 with 1 comment

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/AVvXsEhE3pRHnhGo8lwj4bobCDnQekyxxLNO2cd9kFY9WF0FiEhk46qhD3ej6xONaF3vkxIMvmXPzqfWTbVH5qYZAKo6EpZ-npkwC1csFwDa_WqlO8AalB90i25tb5bEFX3baD7YvPyP3-TK6-0/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 :)

1 comments:

Balas

Anonim

1 Maret 2013 pukul 15.56

bang saya minta ijin boleh ngga saya minta template blog yang ini http://anehdanseram.blogspot.com/

boleh ya bang buat tugas sekolah bang !

Hargai penulis dengan cara memberikan komentar di artikel ini ya sobat.
Dan berkomentarlah dengan kata-kata yang sopan.

"Jangan Menggunakan Link Aktif di Komentar" (akan dihapus)

Untuk menyisipkan gambar dalam komentar : <i rel="image">URL GAMBAR</i>

Membuat Horizontal Menu Dropdown

1 comments:

Pengikut

Arsip Blog

Label

Tutorial Blogging