membuat menu drop down di blogspot

Membuat Menu Drop Down pada Blog






Karena banyak teman yang curhat dan mengalami kebingungan untuk membuat menu drop down untuk menghemat tempat dengan menu yang lebih banyak serta memperindah website kita, nah untuk mempersingkat waktu ini saya kasih tips n triknya,


Bagaimana cara buatnya?
1. Login ke Blogger.
2. Pilih Edit Tamplate
3. pilih Edit HTML, sebelum mengotak atik HTMl Code sebaiknya backup template untuk backup
4. cari kode ]]>
5. Silakan anda copy kode di bawah ini dan simpan diatas code ]]>

/* ----- NAVBAR MENU ----- */
#NavbarMenu {width: 100%;height: 20px;background:#000000 top;color: #000000;margin: 0 auto 0;padding: 0;font: bold 12px Arial, Tahoma, Verdana;border-top: 1px solid #000000;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;background: transparent url('#') repeat-x top left;margin: 0;padding: 0;}
#nav li a,
#nav li a:link,
#nav li a:visited {color: #000000;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: bold 12px VERDANA;}
#nav li a:hover,
#nav li a:active {background:#99C9FF;color: #3D81EE;margin: 0;padding: 9px 15px 8px;text-decoration: none;}
#nav li li a,
#nav li li a:link,
#nav li li a:visited {background: transparent url('#') repeat-x top;width: 150px;color: #000;text-transform: lowercase;float: none;margin: 0;padding: 7px 10px;border-bottom: 1px solid #99C9FF;border-left: 1px solid #99C9FF;border-right: 1px solid #99C9FF;font: normal 15px,;}
#nav li li a:hover,
#nav li li a:active {background: #99C9FF;color: #3D81EE;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. Simpan template dan masuk ke menu Element Laman
7. Untuk lebih muda buat membuat menunya Tambah Widged, HTML/Java Script
8. copy code ini:

<div id='navbarmenu'>
<div id='navbarmenuleft'>
<ul id='nav'>

<li><a class='indukmenu' href='http://el-zany.blogspot.com/' title='link'> Beranda</a></li> 

<li><a class='indukmenu' href='http://swararinggit.blogspot.com/p/product.html' title='link'>Web Mail</a>

<ul>

<li><a href='http://www.blogger.com/' target='_blank'>Blogspot</a></li>
<li><a href='http://mail.yahoo.co.id/ target='_blank''>Yahoo Mail</a></li>
</ul></li>
 

</ul></div></div>

8. Save.
9. untuk menambah menu perhatikan kode yang di blok <li></li>


10. Selamat mencoba

semoga bermanfaat :)

source : http://el-zany.blogspot.com/