cara membuat menu drop down di blogger

Tentang cara membuat menu drop down di blogger , pada dasarnya sebuah blog sudah di berikan fasilitas menu gratis oleh eyang google/blogger tapi jika kita mau membuat menu tambahan yang lebih bervariasi hal itu sah-sah saja dan buat google yang pentingkan tidak membuat lemot loding blog.

sebuah menu drop down sebenarnya juga banyak cara untuk membuatnya di antaranya membuat dengan menambahkan kode kedalam html template ada juga yang hanya melalui widged saja dan ada juga yang melaalui gaya campuran seperti yang mau saya bagikan pada postingan ini yaitu membuat drop down dengan menambahkan kode kedalam bagian html template dan juga menambahkan kode kedalam gadged ( biar adil lah begitu kira-kira ) dan menu drop down yang ingin saya baagikan ini kodenya sudah saya seting sedemikian rupa dari warna tulisan dan ukuran hurup nya serta yang lainya dengan tujuan supaya lebih menarik dan supaya tidak membuat lemot loding blog nya.
untuk melihat demonya silahkan buka web server tandon pulsa takutnya lama kelamaan menu drop down dalam blog demo nya di hapus saya lengkapi dengan gambar di bawah ini

bagaiman hasil dari setingan menu drop down saya jika kalian ingin mencobanya silahkan simak caranya di bawah ini ( caranya ada dua laangkah ) :

langkah pertama
1.buka alamat www.blogger.com untuk membuka blog anda
2.setelah kebuka blog anda lalu klik desain untuk menuju dashboard blog
3.lalu pilih template dan klik edit HTML
4.dan cari kode di dalam HTML kode ini ]]></b:skin>
5.lalu kopi kode di bawah ini dan letakan di atas kode ]]></b:skin> 

cssmenu ul {
  margin: 0;
  padding: 5px 6px 0;
  background: #FF0080 url(overlay.png) repeat-x 0 -110px;
  line-height: 100%;
  border-radius: 1em;
  font: normal 0.5333333333333333em Arial, Helvetica, sans-serif;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  width: auto;
}
#cssmenu li {
  margin: 0 5px;
  padding: 0 0 8px;
  float: left;
  position: relative;
  list-style: none;
}
#cssmenu a,
#cssmenu a:link {
  font-weight: bold;
  font-size: 13px;
  color: #0000FF;
  text-decoration: none;
  display: block;
  padding: 8px 10px;
  margin: 0;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#cssmenu a:hover {
  background: #000;
  color: #00FF00;
}
#cssmenu .active a,
#cssmenu li:hover > a {
  background: #979797 url(overlay.png) repeat-x 0 -40px;
  background: #666666 url(overlay.png) repeat-x 0 -40px;
  color: #FFFF00;
  border-top: solid 1px  #f8f8f8;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 0 #ffffff;
}
#cssmenu ul ul li:hover a,
#cssmenu li:hover li a {
  background: none;
  border: none;
  color: #0000FF;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#cssmenu ul ul a:hover {
  background: #FF0080 url(overlay.png) repeat-x 0 -50px !important;
  color: #FFFF00 !important;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu li:hover > ul {
  display: block;
}
#cssmenu ul ul {
  display: none;
  margin: 0;
  padding: 0;
  width: 100px;
  position: absolute;
  top: 30px;
  left: 0;
  background: url(overlay.png) repeat-x 0 0;
  border: solid 1px #F7FE2E;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#cssmenu ul ul li {
  float: none;
  margin: 0;
  padding: 1px;
}
#cssmenu ul ul a,
#cssmenu ul ul a:link {
  font-weight: normal;
  font-size: 13px;
}
#cssmenu ul:after {
  content: '.';
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
* html #cssmenu ul {
  height: 1%;
}

6.setelah meletahkan kode kedalam HTML template anda lalu klik pratinjau dulu gunanya untuk menghindari kesalahan dalam meletakan kode tersebut jika sudah benar / tidak eror lalu simpan template nya

langkah ke dua 
1.buka blog anda lalu menuju dashboard
2.pilih tata letak dan klik tambahkan gadged
3.pilih gadged HTML/javascript
4.lalu masukan kode di bawah ini kedalam gadged HTML/javascript

<div id='cssmenu'>

<ul>
<li class='active'><a href='url Home anda'><span>Home/MENU1</span></a></li>
<li class='has-sub'><a href='url anda'><span>MENU 2</span></a>
<ul>
<li><a href='url anda'><span>SUB MENU 1</span></a></li>
<li><a href='url anda'><span>SUB MENU 2</span></a></li>
<li class='last'><a href='url anda'><span>SUB MENU 3</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='url anda'><span>MENU 3</span></a>
<ul>
<li><a href='url anda'><span>SUB MENU 1</span></a></li>
<li class='last'><a href='url anda'><span>SUB MENU 2</span></a></li>
</ul>
</li>
<li class='last'><a href='url anda'><span>MENU 4</span></a></li>
</ul>
</div>

5.ganti Tulisan di dalam kode di atas yang warna merah dengan url Tujuan ( bisa url posting / bisa juga url halaman/page )
- ganti tulisan didalam kode di atas yang warna pink dengan judul halaman anda ( halaman / postingan blog anda )
6.jika sudah selesai mengganti dengan url dan juddul laman anda / tidak usah di beri judul gadgednya lalu silahkan simpan gadged nya
7.selesai

dan untuk mengecek hasil pembuatan menu drop down nya silahkan buka beranda blog anda
saya rasa cukup tip dan trik blogger wonogiri tentang cara membuat menu drop down asli editan saya sendiri , semogaa berguna, terimaksih salam satu hati