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
]]></b:skin>
5.  Silakan anda copy kode di bawah ini dan simpan diatas code 
]]></b:skin>

/* ----- 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,

lintasberita

Artikel Lain yang Terkait



8 komentar:

sang pemimpi mengatakan...

thank infonya.
tapi aku mau nanya nih...
kalau buat kaya punya agan diatas (MY LINK) kursor diatas forum keluar lagi kaskus, detikforum, dll gimana caranya gan?

sang pemimpi mengatakan...

mohon untuk pencerahannya.
terima kasih

sang pemimpi mengatakan...

sekalian tukar link...
udah gw pasang gan,,,
jangan lupa mampir gubug ane gan...
http://cnetprog.blogspot.com

aa nda mengatakan...

kenapa sub menunya tidakkeluar ya

Eko Mulyadi mengatakan...

artikel yang berguna buat ane yang masih newbie..
thx infonya sob.

exchange link yah ma blog ane

jual obat aborsi | obat penggugur kandungan mengatakan...

www.obataborsi-ampuh.com/
www.obataborsi-ampuh.com/
www.obataborsi-ampuh.com/
www.obataborsi-ampuh.com/
www.obataborsi-ampuh.com/
www.obataborsi-ampuh.com/
www.obataborsi-ampuh.com/
www.obataborsi-ampuh.com/
www.obataborsi-ampuh.com/
www.obataborsi-ampuh.com/

jual obat aborsi | obat penggugur kandungan mengatakan...

www.roommanis.com/
www.roommanis.com/
www.roommanis.com/
www.roommanis.com/
www.roommanis.com/
www.roommanis.com/
www.roommanis.com/
www.roommanis.com/

jual obat aborsi | obat penggugur kandungan mengatakan...

www.klinikfarma.com/
www.klinikfarma.com/
www.klinikfarma.com/
www.klinikfarma.com/
www.klinikfarma.com/
www.klinikfarma.com/
www.klinikfarma.com/
www.klinikfarma.com/

Posting Komentar

isi comment tentang blog ini

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Blognya Zein | Bloggerized by Kuswanto el-zein - facebook : kuswanto.zein - twitter : kuswanto_zein