Tutorial : Dropdown Menutab

Assalammualaikum and Annyeonghaseyo
Smile :)

Jom buat :)

1. Dashboard > Layout > Add Gadget/HTML
2. Copy code di bawah

<style>
/* Menu Horizontal Dropdown ----------------------------------------------- */
 #menuwrapper{
width:960px;
height:30px;
background:#D2B48C;
margin:0 auto;
}
.clearit{
clear:both;
height:0;
line-height:0.0;
font-size:0}
 #menubar{
width:100%}
 #menubar,#menubar ul{
list-style:none;
font-family:Arial, serif;
}
 #menubar a{  display:block;
text-decoration:none;
font:13px calibri;  color:#666;
text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;
margin-left:20px;
padding-top:9px;
padding-left:18px;
padding-right:18px;
text-align:center;}
#menubar a.trigger{
text-align:center;
background-image:url(http://i.imgur.com/peRXtgL.gif);
background-repeat:no-repeat;
background-position:left center;
padding-left:18px;
padding-right:18px;
}
#menubar li{
float:left;
position:static;
width:auto}
#menubar li ul,#menubar ul li{
width:170px}
#menubar ul li a{
text-align:left;
color:#666;
font-size:11px;
font-weight:400;
font-family:Arial;
border:none;
padding:5px 10px}
#menubar li ul{
z-index:100;
position:absolute;
display:none;
background:#eee;
padding-bottom:5px;
border:1px dashed #fff;}
 #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{
background:#D2B48C;
color:#778899;}
 #menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{
color:#3c3c3c;
background-color:transparent;
text-decoration:none}
#menubar li ul li.hr{
border-bottom:1px solid #fff;
border-top:1px solid #fff;
display:block;
font-size:1px;
height:0;
line-height:0;
margin:4px 0}
#menubar ul a:hover{
background-color:#ccc!important;
color:#666!important;
text-decoration:none}
 </style>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='http://www.blogger.com/home'><img border='0' src='http://i.imgur.com/f8pbAeb.png' style='padding:0px;'/> Home</a></li>
<li><a class='trigger'>Owner</a>
<ul>
<li><a href='PUT YOUR LINK' >Profile</a></li>
  <li><a href='PUT YOUR LINK' >Biases</a></li>
</ul>
</li>
<li><a class='trigger'>Exchange</a>
<ul>
<li><a href='PUT YOUR LINK'>Affiliate</a></li>
  </ul>
</li>
<li><a class='trigger'>Tutobies</a>
<ul>
<li><a href='PUT YOUR LINK'>Tutorial</a></li>
<li><a href='PUT YOUR LINK'>Freebies</a></li>
</ul>
</li>
<li><a class='trigger'>Random</a>
<ul>
  <li><a href='PUT YOUR LINK'>Info-Tips</a></li>
<li><a href='PUT YOUR LINK'>Blogskin</a></li>
</ul>
</li>
<li><a class='trigger'>Admin</a>
<ul>
  <li><a href='PUT YOUR LINK'>kiwi6</a></li>
<li><a href='PUT YOUR LINK'>we♥it</a></li>
</ul>
</li>
<li><a class='trigger'>Contact</a>
<ul>
<li><a href='PUT YOUR LINK'>Facebook</a></li>
  <li><a href='PUT YOUR LINK'>Fanpage</a></li>
  </ul>
  </li>
  <li><a href='PUT YOUR LINK'>Blogskin</a></li>
<li><a href='PUT YOUR LINK'>Ask.fm</a></li>
  </ul>
  </div>
credit : atintory
Okay dan save :)
Siap :)
Good luck :)

4 comments:

Mazatul Azura Muhamad said...

Thanks for sharing.. Kacau tak existing layout or follower?

Simplesyara said...

@Mazatul Azura Muhamad welcome. sorry, syara tak fahamlah >.<

Aisha Fauzi said...

Hye Assalammualaikum saya bw sini :)
Kalau ada masa jemput siggah blog saya dan tengok giveaway menarik yang dipaparkan :D http://twinkleeestar.blogspot.com/
Btw, let's join this awesome giveaway !


Jom rebut peluang menangi duit raya RM 50 !
- http://twinkleeestar.blogspot.com/2013/08/menangi-rm-25000.html


Jom support saya sebagai blogger baru dengan join giveaway ini :)
- http://twinkleeestar.blogspot.com/2013/08/1st-simple-giveaway-by-mrsluhan-and.html


Banyak hadiah menarik yang ditawarkan ! Gempak-gempak belakaa :D
- http://twinkleeestar.blogspot.com/2013/08/mini-giveaway-by-puteri-nina.html
- http://twinkleeestar.blogspot.com/2013/08/bravo-giveaway-by-ieyra-ghani.html
- http://twinkleeestar.blogspot.com/2013/08/de-juin-octobre-giveaway.html
- http://twinkleeestar.blogspot.com/2013/08/the-longest-giveaway-ever-by-ain.html
- http://twinkleeestar.blogspot.com/2013/08/holiday-giveaway-by-nurin-aireen.html


Hadiah teddy bear gergasi sebagai tawaran ! Jom join sekarang :D
- http://twinkleeestar.blogspot.com/2013/08/single-giveaway-by-julianaramli.html
- http://twinkleeestar.blogspot.com/2013/08/giveaway-saya-nak-teddy-bear-by-farisha.html


Nak dress dari Softly Shop secara percuma ? Jom join giveaway ini ! :D
- http://twinkleeestar.blogspot.com/2013/08/softly-shop-dress-giveaway.html

Mizz Aiza (Dunia Kecil) said...

nice sharing.. :D