Buat Menu Down List

Indonesia Furniture Handicraft Wholesale Marketplace

Oke sekarang saya akan jelaskan tentang bgaimna car membuat toolbar menu yang soo friendly.Baik sebagai contoh anda sorot salah stu link pada toolbar menu di atas maka akan muncul menu yang lain kebawah.Oke langsung aja kita buat.
Langkah pertama yang harus kamu lakaukan adalah beri tanda centang pada Expand Widget kemudian cari kode berikut.

#header-wrapper {

Jika tidak ketemu maka cari kode yang mirip dengan kode diatas,karena setiap templates berbeda pada style-nya.
Jika sudah maka copy kode Css berikut tepat diatasnya

/* Category menu*/

#catmenucontainer {
height:34px;
background:url() repeat-x;
display:block;
padding:0px 0 0px 0px;
font: 12px Georgia,Century gothic,verdana, Arial, sans-serif;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
}

#catmenu {
margin: 0px 0px 0px 0px;
padding: 0px 15px;
list-style: none;
height:34px;
text-decoration:none;
}

#catmenu ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px;
list-style: none;
height:34px;
text-decoration:none;
}

#catmenu a {
color: #444;
display: block;
font-weight: normal;
padding: 5px 10px 9px 10px;
text-decoration:none;
}

#catmenu a:hover {
color: #FF0000
;
display: block;
text-decoration: none;
}

#catmenu li {
float: left;
margin: 0px 0px;
padding: 0px 0px;
text-decoration:none;
}

#catmenu li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px;
width: 150px;
text-decoration:none;
}

#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background: #DEDCDD ;
width: 150px;
float: none;
margin: 0px 0px;
padding: 7px 10px 7px 10px;
color:#555;
border:1px dotted #585858;
text-decoration:none;
}

#catmenu li li a:hover, #catmenu li li a:active {
background: #FF0000 ;
width: 150px;
float: none;
margin: 0px;
padding: 7px 10px 7px 10px;
color:#D40404;
text-decoration:none;
}

#catmenu li ul {
position: absolute;
left: -999em;
z-index:200;
background:url(http://i36.photobucket.com/albums/e2/alvaris924/Zinmag%20Primus/menu.png) bottom ;
width:170px;
text-decoration:none;
}

#catmenu li:hover ul {
left: auto;
display: block;
text-decoration:none;
}

#catmenu li:hover ul, #catmenu li.sfhover ul {
left: auto;
text-decoration:none;
}
.buttonreset {
color: #333;
background-color: #f3f3f3;
border: 1px solid #999;
padding: 1px;
}

.buttonsubmit {
color: #333;
background-color: #f3f3f3;
border: 1px solid #999;
padding: 1px;
}

.textinput {
color : #333;
background-color: #ffffff;
border: 1px solid #999;
padding: 1px;
}

Jika sudah simpan templates tersebut,lalu pindah ke tata letak.Kemudian add gadget dan tambahkan kode dibawah ini pada HTML & javascript.

<!-- Catmenucontainer -->
<div id="catmenucontainer">
<div id="catmenu">
<ul>


<li><a href="" title="Home">Home</a></li>

<li><a href="YOUR-LINK-HERE" title="Free Templates">Templates</a>
<ul class="children">
<li><a href="YOUR-LINK-HERE" title="YOUR-LINK-TITLE">Blog Templates</a></li>
<li><a href="YOUR-LINK-HERE" title="YOUR-LINK-TITLE">Wordpress Template</a></li>
<li><a href="YOUR-LINK-HERE" title="YOUR-LINK-TITLE">YOUR-LINK-TITLE</a></li>
</ul>
</li>

<li><a href="YOUR-LINK-HERE" title="YOUR-LINK-TITLE">Blogging</a>
<ul class="children">
<li><a href="YOUR-LINK-HERE" title="YOUR-LINK-TITLE">Blog Edit</a></li>
<li><a href="YOUR-LINK-HERE" title="YOUR-LINK-TITLE">Blog Aksesoris</a></li>
<li><a href="YOUR-LINK-HERE" title="YOUR-LINK-TITLE">Populerkan Blog</a></li>
</ul>
</li>



<li><a href="YOUR-LINK-HERE" title="YOUR-LINK-TITLE">YOUR-LINK-TITLE</a></li>

<li><a href="YOUR-LINK-HERE" title="YOUR-LINK-TITLE">YOUR-LINK-TITLE</a>
<ul class="children">
<li><a href="YOUR-LINK-HERE" title="YOUR-LINK-TITLE">YOUR-LINK-TITLE</a></li>
<li><a href="YOUR-LINK-HERE" title="YOUR-LINK-TITLE">YOUR-LINK-TITLE</a></li>
</ul>
</li>

<li><form action="http://myokezone.blogspot.com/search" method="get">
<input class="textinput" name="q" size="30" type="text"/>
<input value="search" class="buttonsubmit" name="submit" type="submit"/></form></li>

</ul></div>
</div>
<!-- /Catmenucontainer -->

Ganti kode merah diatas dengan nama blog kamu,,kemudian simpan dan lihat hasilnya.
sekian dan semoga bermanfaat.

Indonesia Furniture Handicraft Wholesale Marketplace