Cara Mudah Membuat Menu Drop Down

Hai sahabat semua selamat berkarya, pada kesempatan ini saya akan berbagi cara membuat menu / navigasi drop down di blog. Sebelum kita membahas bagaimana cara membuat menu dropdown, saya akan membahas sedikit tentang Apa itu menu drop down? 

Drop Down Menu / Menu Drop Down adalah menu yang jika kita mengarahkan kursor ke menu tersebut maka akan muncul submenu lainnya yang memanjang kebawah. Untuk contohnya anda bisa lihat menu drop down yang terletak di blog saya ini.

Bagaimana, apakah anda sudah faham apa yang dimaksud dengan menu drop down? Saya anggap anda sudah faham tentang apa yang saya maksud. Lalu Bagaimana cara memasang menu drop down di blog kita? Untuk memasang menu drop down di blog kita bisa mengikuti langkah-langkahnya sebagai berikut :

Langkah-langkah memasang menu drop down di blog :

1. log in dulu pada ID Blogspot kita
2. klik tata letak
3. pilih edit HTML

4. Cari kode ]]>

5. Setelah ketemu letakkan  kode dibawah ini tepat diatas ]]>

/* ----- NAVBAR MENU ----- */

#NavbarMenu {

width: 875px;

height: 35px;

background:#FF6600 url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;

color: #ffffff

margin: 0 auto 0;

padding: 0;

font: bold 11px Arial, Tahoma, Verdana;

border-top: 1px solid #ffffff;

border-bottom: 1px solid #ffffff;

}

#NavbarMenuleft {

width: 680px;

float: left;

margin: 0;

padding: 0;

}

#nav {

margin: 0;

padding: 0;

}

#nav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#nav li {

list-style: none;

margin: 0;

padding: 0;

}

#nav li a, #nav li a:link, #nav li a:visited {

color: #ffffff;

display: block;

text-transform: capitalize;

margin: 0;

padding: 9px 15px 8px;

font: normal 15px Georgia, Times New Roman;

}

#nav li a:hover, #nav li a:active {

background:#FF6600;

color: #ffffff;

margin: 0;

padding: 9px 15px 8px;

text-decoration: none;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #ffffff url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;

width: 150px;

color: #ffffff;

text-transform: lowercase;

float: none;

margin: 0;

padding: 7px 10px;

border-bottom: 1px solid #ffffff;

border-left: 1px solid #ffffff;

border-right: 1px solid #ffffff;

font: normal 14px Georgia, Times New Roman;

}

#nav li li a:hover, #nav li li a:active {

background: #FF6600;

color: #ffffff;

padding: 7px 10px;

}

#nav li {

float: left;

padding: 0;

}

#nav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 170px;

margin: 0;

padding: 0;

}

#nav li ul a {

width: 140px;

}

#nav li ul ul {

margin: -32px 0 0 171px;

}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {

left: -999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {

left: auto;

}

#nav li:hover, #nav li.sfhover {

position: static;

}

6. Kemudian anda cari kode berikut : 

Tekan Ctrl + F untuk mempermudah pencarian! 

7. Jika kode diatas sudah ketemu maka proses selanjutnya silahkan copy kode dibawah ini, kemudian letakkan tepat dibawah kode

Home

Menu/History Article-1

SubMenu-1-1

SubMenu-1-2

Menu-2

'#'>SubMenu-2-1

SubMenu-2-2'#'>Menu-3

SubMenu-3-1

SubMenu-3-2

SubMe

Menu-4

Keterangan :

Ganti kode yang berwarna BIRU/# dengan  :  Alamat / URL blog sobat

Ganti kode yang berwarna MERAH/Menu dengan  :  nama menu yang anda inginkan

8. Kemudian Save Template. Selesai

Demikian cara memasang menu drop down di blog, semoga bermanfaat untuk artikel ini, kalau ada yang kurang jelas bisa ditanyakan.