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...
0 comments:
Post a Comment
Para pengunjung yang terhormat, berhubung saya baru belajar, mohon kritik dan saran yang membantu..
silakan tinggalkan komentar...