Halooo! Aku dapet tutorial lagi '3' .... Dapet dari blognya Kak Tiara. Tutorialnya enu Tab Dropdown. Daripada nunggu-nunggu lagi, yuk segera lihat tutonya!

Tata letak --> add a gadget (di bawah header) --> html/java script
Copy kode dibawah 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>

Older Post | Newer Post

Template by : Farisyaa Awayy
Basecode by : Nurynn
Full Edited : Fasya

Best View at GOOGLE CHROME!