Follow us: Subscribe via RSS Feed Connect on YouTube Connect on YouTube

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,
Share this article :

5 komentar:

  1. 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?

    BalasHapus
  2. mohon untuk pencerahannya.
    terima kasih

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

    BalasHapus
  4. kenapa sub menunya tidakkeluar ya

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

    exchange link yah ma blog ane

    BalasHapus

isi comment tentang blog ini

 
Blognya Zein © Copyright 2012. All Rights Reserved.
Created by: George Robinson.
Proudly powered by Blogger.
imagem-logoBack to TOP