Menu Tab Dropdown

Okey tuto ini direquest sama Tabitha. Sumpah, nyari tuto ini tuh sampe sepuluh keliling! Dari dulu aku nyari ini, akhirnya baru tadi pagi nih, dapet tuto ini.
Okey, kali ini tutonya special credit sama kak AtinTory :) makasih kak tutonya. Ternyata di blog kakak ada tuto ini. Okey, lihat menu tabku. See? Or live preview here

Caranya, tata letak --> add a gadget (di bawah header) --> html/java script
Copy kode di bawah ini

<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>

Oren : width
hijau : warna background
biru : laman utama
ungu : laman kecil (dropdown menunya)
merah : link website

Kalau blogskins, taruh semua kode di bawah kode </style>
Oke, semoga bermanfaat! Tolong ya, creditnya aku sama kak AtinTory kalo re-post. Makasih :)

Comments

Post a Comment

Before leave a comment, please ensure your comment is supportive and spread positivity :)

Popular posts from this blog

Movie About Insecurity : Imperfect

Ramadhan Tiba!