Cara Memasang Menu PullDown di Blog

Cara Memasang Menu Pull-Down di Blog

Drop Down Menu / Menu Pull-Down adalah menu yang jika kita mengarahkan kursor ke menu tersebut maka akan muncul submenu lainnya yang memanjang kebawah. Untuk contohnya anda bisa lihat menu pull-down yang terletak di blog ini.


Langkah-langkah memasang menu pull-down di blog :

1. Login ke akun blogger
2. Klik Template
3. Klik Edit HTML
4. Cari kode :  ]]></b:skin>
     (Tekan Ctrl + F untuk mempermudah pencarian)
5. Letakkan kode CSS dibawah ini tepat diatas kode:  ]]></b:skin>

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 35px;
  border-radius: 0px 0px 0 0;
  -moz-border-radius: 0px 0px 0 0;
  -webkit-border-radius: 0px 0px 0 0;
  background: #006600;
  background: -moz-linear-gradient(top, #339933 0%, #006600 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #339933), color-stop(100%, #006600));
  background: -webkit-linear-gradient(top, #32323a 0%, #006600 100%);
  background: -o-linear-gradient(top, #339933 0%, #006600 100%);
  background: -ms-linear-gradient(top, #339933 0%, #006600 100%);
  background: linear-gradient(to bottom, #339933 0%, #006600 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#006600', GradientType=0);
  border-bottom: 2px solid #339966;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #006600;
  background: -moz-linear-gradient(top, #339933 0%, #006600 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #99ff99), color-stop(100%, #006600));
  background: -webkit-linear-gradient(top, #339933 0%, #006600 100%);
  background: -o-linear-gradient(top, #339933 0%, #006600 100%);
  background: -ms-linear-gradient(top, #339933 0%, #006600 100%);
  background: linear-gradient(to bottom, #339933 0%, #006600 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#006600', GradientType=0);
  color: #ffffff;
  display: inline-block;
  font-family: Domine, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 35px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ccffcc;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 0px 0 0 0;
  -moz-border-radius: 0px 0 0 0;
  -webkit-border-radius: 0px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 0px 0 0;
  -moz-border-radius: 0 0px 0 0;
  -webkit-border-radius: 0 0px 0 0;
}
#cssmenu > ul > li.active > a {
  box-shadow: inset 0 0 3px #003300;
  -moz-box-shadow: inset 0 0 3px #339933;
  -webkit-box-shadow: inset 0 0 3px #66cc66;
  background: #003300;
  background: -moz-linear-gradient(top, #003300 0%, #003300 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #003300), color-stop(100%, #003300));
  background: -webkit-linear-gradient(top, #003300 0%, #003300 100%);
  background: -o-linear-gradient(top, #003300 0%, #003300 100%);
  background: -ms-linear-gradient(top, #003300 0%, #003300 100%);
  background: linear-gradient(to bottom, #003300 0%, #003300 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#669966', EndColorStr='#003300', GradientType=0);
}
#cssmenu > ul > li:hover > a {
  background: #003300;
  background: -moz-linear-gradient(top, #003300 0%, #003300 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #003300), color-stop(100%, #003300));
  background: -webkit-linear-gradient(top, #26262c 0%, #003300 100%);
  background: -o-linear-gradient(top, #003300 0%, #003300 100%);
  background: -ms-linear-gradient(top, #003300 0%, #003300 100%);
  background: linear-gradient(to bottom, #003300 0%, #003300 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#669966', EndColorStr='#003300', GradientType=0);
  box-shadow: inset 0 0 3px #003300;
  -moz-box-shadow: inset 0 0 3px #003300;
  -webkit-box-shadow: inset 0 0 3px #003300;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #336633;
  border-bottom: 1px solid #aad06d;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #339933;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #00cc00;
  border-bottom: 1px solid #97b36b;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #66cc66;
.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px double #696969;font-weight:normal}
}

6. Kemudian anda cari kode berikut : 
    <header>  : untuk menempatkan menu di atas nama blog
    </header> : untuk menempatkan menu di bawah nama blog

7.Kemudian copy kode dibawah ini, lalu letakkan sebelum atau setelah tag <head>, </head>

<!-- Start Menu -->
<div id='cssmenu'>
<ul>
<li class='active '><a href='/'><span>Home</span></a></li>
<li class='has-sub'><a href='http://tastajaya.blogspot.com/p/ms-word-2007.html'><span>TUTORIAL MS. OFFICE</span></a>
<ul>
<li><a href='http://tastajaya.blogspot.com/2014/04/tutorial-ms-office-word-2007.html'><span>Ms. Office Word 2007</span></a></li>
<li><a href='http://tastajaya.blogspot.com/2014/04/tutorial-ms-office-word-2007.html'><span>Ms. Office Excel 2007</span></a></li>
<li><a href='http://tastajaya.blogspot.com/2014/04/tutorial-ms-office-word-2007.html'><span>Ms. Office Power Point 2007</span></a></li>
<li><a href='http://tastajaya.blogspot.com/2014/04/tutorial-ms-office-word-2007.html'><span>Ms. Office Acces 2007</span></a></li>
</ul></li>
<li class='has-sub'><a href='http://tastajaya.blogspot.com/p/tips-blog.html'><span>TIPS BLOG</span></a>
<ul>
<li><a href='http://tastajaya.blogspot.com/2014/03/cara-membuat-related-post-dibawah_30.html'><span>Membuat Related Post</span></a></li>
<li><a href='http://tastajaya.blogspot.com/2014/03/membuat-related-post-dengan-thumbnail.html'><span>Membuat Related Post dengan Thumbnail</span></a></li>
</ul></li>
</ul>
</div>
<!-- End Menu -->

Keterangan :
Ganti kode yang berwarna BIRU dengan       :  alamat / URL tujuan
Ganti kode yang berwarna MERAH dengan  :  nama menu yang anda inginkan

8. Kemudian Save Template, Selesai.

Semoga bermanfaat artikel ini dapat bermanfaat. Terimakasih