Dropdown Menu

Isi postingan kalian disini

Hai! Nacchan request aku di Pinky Blog, nih! Nah, sekarang aku jawab. Dia nanya, gimana sih caranya bikin Dropdown menu kaya punyaku di Pinky Blog? ikuti step-stepnya.

• Dashboard di Blogger
• Tata Letak
• Tambahkan Gadget << HTML / Javascript
• Copy paste 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>

• Paste di kolom komentar. bukan Sidebar Tittle.
• Save!!

Oya, biar kalian gak bingung, ku kasih juga ket. warnanya :

• Orange : Widht
•  Hijau : Warna Background
• Biru : Judul Utama
• Ungu : Judul Lainnya
• Merah : Link Laman

Credits : Kak Atin