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




4 comments:

Rendy BlogHeboh "Blog Dofollow" mengatakan...

Waahh kayaknya untuk nambah ini kita harus sedikit mempertimbangkan karena bisa jadi loading page kita menjadi lambat dan kalo loading page lambat bisa-bisa pengunjung blog kita pada kaburr.. Tapi gak ada salahnya untuk dicoba.
hehehe..

Silahkan berkunjung ke BLOG HEBOH dan jangan lupa berkomentar karena BLOG HEBOH masih tetap DOFOLLOW >>
Posting Terakhir :Tutorial atau Panduan Ciao | $5 dalam waktu 1 Jam

blog tips tutorial mengatakan...

thanks bro buat tipsnya.sangat berguna buat saya.hehe

Advertising agencies in Pakistan mengatakan...

I had a great time reading your article and I found it interesting. This is such a beautiful topic that me and my friends are talking about. Thanks for this blog, we are enlightened.

heathrow to w2 mengatakan...

I am really inspired from your blog hoping you will be there with a more interesting post like this.

Poskan Komentar

Ayo comment sebanyak-banyaknya,dan jadilah top comment di myokezone.Dan dapatkan backlink gratis di halaman Home..