Membuat menu horizontal Professional dropdown

Membuat menu horizontal sebenarnya ada banyak alternatif, untuk kali ini kita akan mencoba membuat jenis menu horizontal type professional dropdown, sebagaimana namanya tentunya ini akan membuat blog/site kita menjadi lebih tampak professional.

Kita langsung ke TKP saja biar jelas

Langkah Pertama
  • Login ke akun Blogger kamu.
  • Dari halaman dashboard, pilih Edit HTML.
  • Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
  • Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut.


/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_dropdown_3.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

.preload1 {background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif);}
.preload2 {background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif);}

#nav {padding:0; margin:0; list-style:none; height:38px; background:transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#FFD700; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif) no-repeat right top; padding-bottom:3px;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
{background:#50b5d0 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3f96a9 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif) 80px 6px no-repeat; color:#fff;}

#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#3f96a9 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#50b5d0 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}


Simpan dan lihat hasilnya.

Keterangan :
  • Warna Merah, Background image menu
  • Warna Hijau,  Lebar dan tinggi menu
Langkah kedua
  1. Klik Page Element
  2. Klik Add Gadget
  3.   AddGadget
  4. Klik plus button (+) for HTML/JavaScript. (img)

    HTML
  5. Copy and paste kode dibawah ini

<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
<li class="top"><a href="#" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#" id="Menu" class="top_link"><span class="down">Menu</span></a>
<ul class="sub">

<li><b>Judul1</b></li>
<li><a href="#" class="fly">Subjudul1</a>
<ul>
<li><a href="#" target="_blank">subitem1.1</a></li>
<li><a href="#" target="_blank">subitem2.1</a></li>
<li><a href="#" target="_blank">subitem3.1</a></li>
</ul>
</li>
<li><a href="#" class="fly">Subjudul2</a>
<ul>
<li><a href="#" target="_blank">subitem1.2</a></li>
<li><a href="#" target="_blank">subitem2.2</a></li>
<li><a href="#" target="_blank">subitem3.2</a></li>
</ul>
</li>
<li><a href="#" class="fly">Subjudul3</a>
<ul>
<li><a href="#" target="_blank">subitem1.3</a></li>
<li><a href="#" target="_blank">subitem2.3</a></li>
<li><a href="#" target="_blank">subitem3.3</a></li>

<li><b>Subjudul3.1</b></li>
<li><a href="#">item1.3.1</a></li>
<li><a href="#">item2.3.1</a></li>
<li><a href="#">item3.3.1</a></li>

<li><b>Subjudul3.2</b></li>
<li><a href="#">item1.3.2</a></li>
<li><a href="#">item2.3.2</a></li>
<li><a href="#">item3.3.2</a></li>
</ul>
</li>


<li><b>Judul2</b></li>
<li><a href="#" target="_blank">subitem1.2</a></li>
<li><a href="#" target="_blank">subitem2.2</a></li>
<li><a href="#" target="_blank">subitem3.2</a></li>
</ul>


</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu2</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.2</a></li>
<li><a href="#" target="_blank">submenu2.2</a></li>
<li><a href="#" target="_blank">submenu3.2</a></li>
</ul>
</li>

</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu3</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.3</a></li>
<li><a href="#" target="_blank">submenu2.3</a></li>
<li><a href="#" target="_blank">submenu3.3</a></li>
</ul>
</li>

</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu4</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.4</a></li>
<li><a href="#" target="_blank">submenu2.4</a></li>
<li><a href="#" target="_blank">submenu3.4</a></li>
</ul>
</li>

<li class="top"><a href="#" id="profil" class="top_link"><span>menu5</span></a></li></li></li></ul>


Simpan dan lihat hasilnya.

Keterangan :
  • Warna Merah, Alamat URL yang akan kamu tuju sesuai dengan nama menu 
  • Warna Hijau,  Nama nama menu sesuai dengan kebutuhan
________________________________________________________

Ok.. Selamat mencoba..!

Semoga bermanfaat....!!

About Mahdi e

- Berbagi itu indah -

18 comments:

  1. salam'alaikum...
    thanks ya sobat... tutorial ini sangat bermanfaat bagi yg memerlukannya termasuk saya sendiri..sakses selalu....
    oh ya kalau mau ganti warna background menu dan hover dropdownnya gimana ya....?

    BalasHapus
  2. Info yang menarik sob. Layak untuk dicoba.

    BalasHapus
  3. @ silakah ganti alamat image untuk background dan rubah kode color; untuk rubah warna... thanks
    @k-enes.. siippp...!!

    BalasHapus
  4. tutornya bagus banget ki,ditunggu tutor lainnya y ^0^


    Miss Rinda - Personal Blog

    BalasHapus
  5. widih mantep om...

    BalasHapus
  6. thx gan inponya udah ane nyari2...sebenarnya udah nyoba dropdown sejenis, jalan2 ke blog anda saya jadi dapat tambahan buat mengedit dropdown biar sesuai dengan blog saya

    BalasHapus
  7. Ki kenapa ko menu drop down di blog saya ngga jadi yah.malahan dia tampilnya di tata letak sidget

    BalasHapus
  8. numpang nanya KIBAGUS
    cara pasang huruf berwarna di tex area seperti milik kibagus gimana caranya?

    BalasHapus
  9. @dcahcib.. makasih komentnya..! memang letaknya di tata letak widget tinggal ngatur mau ditaruh dimana..!
    kalau pingin tampil diatas sendiri taruh kode ke dua diatas kode </head>

    @cak im.. itu pakai blockquote..

    BalasHapus
  10. Anonim8/17/2010

    Mas, Cara ngeganti Background Link yg berwarna birunya bagaimana yah??

    BalasHapus
  11. @anonim..!
    silakan ganti kode alamat url image dengan yang dibutuhkan.!

    BalasHapus
  12. Mantab bos, Tapi kok Blog saya ga mau drop down, apanya yg salah bos? tlg pencerahannya!!! Maturnuwon

    BalasHapus
  13. Trimakasih boss udah mampir diblog saya..
    Sudah saya cek kodenya bos...
    dan udah akurat. cuman masalahnya kalo widgetnya saya taruh di kolom sebelah kanan dia mau dropdown, tapi kan spacenya sempit jadi kelihatan berhimpit. dan kalo di taruh diatas dia gak mau drop down...
    mohon pencerahan lagi boss. Trimakasih

    BalasHapus
  14. trima kasih boss udah menuntunku dalam gelapnya blog, he....he....
    Tapi yg bos saranin udah aq laku kan dan udah saya cek di widgetnya udah aqurat tp masih juga blm mau drop down....

    Trus 1 lagi pertanyaan saya nih boss... he..he.. maaf boss banyak nanya nich!!!!
    Gambar header saya kok ga mau strech mpek ke pinggir ya bos?

    oh ya tolong di cek bos kode html saya mungkin ada yg salah!!!!

    saya kirim via email ya boss.....

    BalasHapus
  15. Saya mau tanya setelah saya pasang sub menunya kok gak bergerak keluar ya, saya sudah saya otak atik tetap gak bisa, tolong ya mas saya lagi buat blog nih jadi gak ngerti harus ngapain lagi.
    terima kasih : http://mediafadil.blogspot.com/

    BalasHapus
  16. @belajar blog, untuk menu ini ada 2 kode, satu diletakan di atas kode ]]></b:skin> dan satunya lagi pada widget (pada bagian header), coba kamu cek pada kode satu sepertinya belum dipasang...
    met mencoba..!

    BalasHapus
  17. Thanks ya sob, atas infonya ....

    Salam Blogger .

    BalasHapus

Note :

Komentar yang mengandung usur pornografi / sara / kekerasan akan dihapus.
Terima kasih komentarnya...!
Semoga bermanfaat...!