Rabu, 09 Mei 2012

Membuat Horizontal Menu Dropdown

Diposting oleh Unknown 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 :)

8 Responses so far

  1. Unknown says:
    10 Mei 2012 pukul 18.40

    test kommentar

  2. Unknown says:
    10 Mei 2012 pukul 18.40

    lagi dong

  3. Unknown says:
    15 Juni 2012 pukul 06.15

    Good :)

  4. Unknown says:
    17 September 2012 pukul 03.53

    Kunjung balik ya?

    Di http://dj-doo.blogspot.com/

  5. Unknown says:
    22 Oktober 2012 pukul 20.50

    keren,, Mas template nya,, cerah cui..
    kapan-kapan coba ah,,

  6. Ulin Nuha says:
    31 Desember 2012 pukul 06.39
    Komentar ini telah dihapus oleh pengarang.
  7. aditputrapgri says:
    25 Januari 2013 pukul 22.19

    itu kan diatas ada Dropdown 1 Dropdown 2. nah .. cara untuk ganti kata-katanya gmna?

  8. Anonim says:
    30 Desember 2018 pukul 21.19

    Blockchain is full of distinguished features but still not free from technical glitches. Users face various technical issues and sometimes it’s hard to fix those account issues without any professional help. Whenever you get indulge into any sort of Blockchain issues, you can reach the doors of the marvellous professionals by putting forward your queries through dialing Blockchain number. The number is applicable 24/7 throughout the year without any holiday.

Leave a Reply

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