Membuat Menu Horizontal Drop Down di Blog ~ Ngudi Bego™

Mau punya buku tamu seperti ini?
Klik
Disini
Widget by: Ngudi Bego™

Kamis, 05 April 2012

Membuat Menu Horizontal Drop Down di Blog

Share this on :

Menu Horizontal Drop Down adalah Menu yang berbentuk memanjang dan jika kita menyorot mouse di menu tersebut maka akan keluar anak - anak dari sub menu tersebut .

Menu ini sangat berguna bagi blog, karena saat pengunjung mencari kategori artikel yang dicari, bisa langsung mencari di menu drop down tersbut.

Jika ingin Memasang di blog anda silahkan ikuti langkah - langkah berikut ini :
  • Login Blogger
  • Masuk ke " Template > Edit Html "
  • Cari kode ]]></b:skin> Jika sudah ketemu, copy kode dibawah ini, dan paste diatas code ]]></b:skin>
    #NavbarMenuAtas{ background:#000 url(http://lh4.ggpht.com/_pt7i0nbIOCY/Sm5QZkDvCUI/AAAAAAAACKE/8-OPdORCKI8/bgnav_thumb%5B1%5D.jpg?imgmax=800) repeat-x;width:960px; height:40px; color:$navcolor; margin:0 auto; font: bold 8px Arial, Tahoma, Verdana;}
    #NavbarMenuAtasleft{ width:650px; float:left; }
  • Cari Kode <div id='header'> atau <div id='header-wrapper'> . Jika sudah ketemu copy kode di bawah ini dan taruh di atas kode <div id='header'> atau <div id='header-wrapper'>

    <div id='NavbarMenuAtas'>
    <div id='NavbarMenuAtasleft'>
    <ul id='nav'>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <li>
    <a href='#'>Page #1</a>
    <ul>
    <li><a href='#'>Sub Page #1</a></li>
    <li><a href='#'>Sub Page #2</a></li>
    <li><a href='#'>Sub Page #3</a></li>
    </ul>
    </li>
    <li><a href='#'>Page #2</a></li>
    <li><a href='#'>Sub Page #1</a></li>
    <li><a href='#'>Sub Page #2</a></li>
    <li><a href='#'>Sub Page #3</a></li>
    </ul>
    </div>
    </div>

    Anda bisa merubah :
    • Yang berwarna Hijau dengan Menu
    • Yang berwarna Biru dengan Sub Menu
    • Yang berwarna Merah dengan link tujuan Menu
  • Simpan
Catatan : Mungkin beberapa template tidak mendukung Menu Drop Down ini.




Baca Juga Artikel Terkait Dibawah Ini:
Comments
0 Comments

0 komentar:

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Silahkan Tinggalkan Komentar Anda
Komentar Anda Sangat Berarti Bagi Kami

Mohon Ma'af jika komentar sobat tidak langsung saya balas
karena sibuk dengan urusan yang lain. :)