Cara Membuat Menu Dropdown di Blog | Tips Blog

Tips | Blog - Halo Sobat Blogger! Pasti sobat pengen punya tampilan Blog yang cantik dan keren. Kali ini saya akan membagikan Cara Membuat Menu Dropdown di Blog.

Kegunaan Menu Dropdown selain mempercantik blog sobat, Menu Dropdown juga berguna untuk mempermudah pengunjung dalam mencari kebutuhan pengunjung di blog sobat.

Langsung Saja ini Cara Membuat Menu Dropdown di Blog :

1. Pertama, sobat harus login akun blogger.

2. Pilih "template" lalu klik "edit HTML".

3. Jangan lupa untuk centang "Expand Template Widget".

4. Cari kode ]]></b:skin> dan copas kode dibawah ini diatas ]]></b:skin>

klik untuk membuka:

#menu-bar {

  margin: 0px 0px 0px 0px;
  padding: 6px 6px 0px 6px;
  height: 34px;
  line-height: 100%;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  box-shadow: 2px 2px 3px #666666;
  -webkit-box-shadow: 2px 2px 3px #666666;
  -moz-box-shadow: 2px 2px 3px #666666;
  background: #8B8B8B;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#5E5E5E, endColorstr=#FFFFFF);
  background: -webkit-gradient(linear, left top, left bottom, from(#5E5E5E), to(#FFFFFF));
  background: -moz-linear-gradient(top,  #5E5E5E,  #FFFFFF);
  border: solid 1px #6D6D6D;
}
#menu-bar li {
  margin: 0px 6px 0px 6px;
  padding: 0px 0px 6px 0px;
  float: left;
  position: relative;
  list-style: none;
}
#menu-bar a {
  font-weight: bold;
  font-family: 'times new roman';
  font-style: normal;
  font-size: 18px;
  color: #E7E5E5;
  text-decoration: none;
  display: block;
  padding: 8px 20px 8px 20px;
  margin: 0;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  text-shadow: 2px 2px 3px #990303;
}
#menu-bar .current a, #menu-bar li:hover > a {
  background: #D4D4D4;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#A1A1A1);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#A1A1A1));
  background: -moz-linear-gradient(top,  #FFFFFF,  #A1A1A1);
  color: #8C0000;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  text-shadow: 2px 2px 3px #C49191;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
  background: none;
  border: none;
  color: #666;
  -box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#menu-bar ul a:hover {
  background: #D4D4D4 !important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#7DE1EC, endColorstr=#FAD3FF);
  background: -webkit-gradient(linear, left top, left bottom, from(#7DE1EC), to(#FAD3FF)) !important;
  background: -moz-linear-gradient(top,  #7DE1EC,  #FAD3FF) !important;
  color: #000000 !important;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  text-shadow: 2px 2px 3px #7A7A7A;
}
#menu-bar ul {
  background: #DDDDDD;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9D9D9, endColorstr=#787878);
  background: -webkit-gradient(linear, left top, left bottom, from(#D9D9D9), to(#787878));
  background: -moz-linear-gradient(top,  #D9D9D9,  #787878);
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 30px;
  left: 0;
  border: solid 1px #B4B4B4;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-box-shadow: 2px 2px 3px #222222;
  -moz-box-shadow: 2px 2px 3px #222222;
  box-shadow: 2px 2px 3px #222222;
}
#menu-bar li:hover > ul {
  display: block;
}
#menu-bar ul li {
  float: none;
  margin: 0;
  padding: 0;
}
#menu-bar ul a {
  padding:10px 0px 10px 15px;
  color:#420000 !important;
  font-size:15px;
  font-style:normal;
  font-family:arial;
  font-weight: normal;
  text-shadow: 2px 2px 3px #FF3D5E;
}
#menu-bar ul li:first-child > a {
  border-top-left-radius: 7px;
  -webkit-border-top-left-radius: 7px;
  -moz-border-radius-topleft: 7px;
  border-top-right-radius: 7px;
  -webkit-border-top-right-radius: 7px;
  -moz-border-radius-topright: 7px;
}
#menu-bar ul li:last-child > a {
  border-bottom-left-radius: 7px;
  -webkit-border-bottom-left-radius: 7px;
  -moz-border-radius-bottomleft: 7px;
  border-bottom-right-radius: 7px;
  -webkit-border-bottom-right-radius: 7px;
  -moz-border-radius-bottomright: 7px;
}
#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#menu-bar {
  display: inline-block;
}
  html[xmlns] #menu-bar {
  display: block;
}
* html #menu-bar {
  height: 1%;
}

5. Cari kode </header> dan copas kode dibawah ini diatas </header>

klik untuk membuka:

<ul id="menu-bar">
 <li class="current"><a href="#">Home</a></li>
 <li><a href="#">Products</a>
  <ul>
   <li><a href="#">Products Sub Menu 1</a></li>
   <li><a href="#">Products Sub Menu 2</a></li>
   <li><a href="#">Products Sub Menu 3</a></li>
   <li><a href="#">Products Sub Menu 4</a></li>
  </ul>
 </li>
 <li><a href="#">Services</a>
  <ul>
   <li><a href="#">Services Sub Menu 1</a></li>
   <li><a href="#">Services Sub Menu 2</a></li>
   <li><a href="#">Services Sub Menu 3</a></li>
   <li><a href="#">Services Sub Menu 4</a></li>
  </ul>
 </li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>

Catatan :
Ganti tulisan berwarna Merah dengan Alamat URL blog sobat, dan untuk tulisan berwarna Hijau, Ganti dengan Judul URL Blog sobat.

Demikian Cara Membuat Menu Dropdown di Blog. Terus update di tipsytriky.blogspot.com dan baca Artikel-artikel menarik lainnya.
Good Luck!