Jan 13, 2010

Home » » Membuat Drop Down Menu

Membuat Drop Down Menu


drop down menu merupakan hal yang menarik untuk di letakkan di blog. khususnya di blogger. blogger memberi ke bebasan kepada user untuk mengedit /menggunakan berbagai kode dari tiap CSS atau Java Script.
nah...itu teorinya.
hm.... gimana ya cara membuat menu drop down di blogger?? itu mudah..
berikut ini akan saya terangkan bagaimana cara membuat menu drop down di blogger
langkah-langkahnya:
1. log in dulu ke blog..(di blogger lho..) kalo belom punya akun, yo wis...buat dulu deh..
2. masuk ke tata letak(layout)--->Edit HTML, centang box Expand Widget Temlplate. (sebelum itu, download template lengkap) agar kalo eror, bisa di kembaliin.!!
3.Nah... cari kode ini :

]]></b:skin>

kemudian, copy paste aja kode di bawah ini, tepat di atas kode diatas...(bahasanya ribet banget kwkwk)
<style type="text/css">
/*-Navbar
By: adi Boy gitu looh...
--------------------------------------------------------------------------------------*/
#bg_nav {
background: #000;
width: 960px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333;
border-bottom: 1px solid #000;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #FFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #FFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 720px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 0px;
}
#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav a, #nav a:visited {
background: #222;
color: #FFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px;
border-left: 1px solid #000;
}
#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 8px 15px;
text-decoration: none;
}
#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#nav li li a:hover, #nav li li a:active {
background: #666;
padding: 7px 30px 7px 10px;
}
#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}
#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
</style>


yups....kemudian simpan

4. masuk ke Elemen laman (Element), kemudian---->tambah gadget(gadget)------>tambah HTML/Java Script
kemudian, tambahkan kode di bawah ini

<div id="bg_nav">
<div id="navleft">
<div id="nav">   
<li><a class="IMenu" href="http://www.namablog.com/">DEPAN</a></li>
<!-- Menu Home -->  
 
<li><a class="IMenu" href="http://www.blogger.com/*">Tutorial</a><!-- Induk Menu --><br/>
    <ul>     
<li><a href="http://blogkamu.com" title="Template web">C++ programming</a></li>
 
<li><a href="http://www.blogger.com/*">SEO</a></li>
  </ul><br/>
 </li>
    
<li><a *="" class="IMenu" href="">Download</a><!-- Induk Menu --><br/>
  <ul> 
<li><a href="http://www.blogger.com/*" title="Download Software">Software</a></li>
 
<li><a href="http://www.blogger.com/*">e-Book</a></li>
 
<li><a href="http://www.blogger.com/*">Musik</a></li>
     </ul><br/>
 </li>
 
<li><a class="IMenu" href="http://www.blogger.com/*" title="Tips And Triks">Tips And Triks</a><!-- Induk Menu --><br/>
  <ul> 
<li><a href="http://www.blogger.com/*">Manajemen</a></li>
 
<li><a href="http://www.blogger.com/*" title="Bikin Drop Down Menu">Menu</a></li>
       </ul><br/>
 </li>
 
<li><a class="IMenu" href="http://www.blogkamu.com">Berita IT</a> </li>
<!--  input in the widget page elements Until this -->     
<li class="last"></li>
<li><!-- Don--><br/>
 </li>
</div><!-- end menufs-wrapper --></div></div>

EITTTS.....!!! edit dulu tuh...
yang warna merah, link yang kamu inginkan...
yang warna biru tebal tuh, nama menunya,... kamu edit aja sesukamu. okeh???
The Last.....
simpan deh..
Nah....jadideh...selamat mencoba...

Artikel yang Berkaitan :

0 comments:

Post a Comment

Para pengunjung yang terhormat, berhubung saya baru belajar, mohon kritik dan saran yang membantu..

silakan tinggalkan komentar...