Cara membuat menu drop down dengan mudah di blogger

     

          Selamat bertemu kembali sahabat, kali ini saya akan berbagi cara membuat menu dropdown di blogger dengan mudah, sebelumnya trik ini saya posting di blog saya yang lama dan sudah di blokir oleh google/blogger. baikalah mari kita simak langkah-langkahnya

1. Login dulu ke aku blogger anda.
2. Masuk ke menu Template, dan kemudian pilih Edit HTML 
3. Jangan lupa Centang pada bagian [ Expand Template Widget]
4. kemudian letakan script di bawah ini di atas ]]></b:skin>
   
   
       menu{
       border:none;
       border:0px;
       margin:0px;
       padding:0px;
       font: 67.5% "Arial", Arial;
       font-size:14px;
       font-weight:bold;
       }
       .menu ul{
       background:#333333;
       height:35px;
       list-style:none;
       margin:0;
       padding:0;
       font-size:14px;
       font-weight:bold;
       }
       .menu li{
       float:left;
       padding:0px;
       }
       .menu li a{
       background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
       color:#cccccc;
       display:block;
       font-weight:normal;
       line-height:35px;
       margin:0px;
       padding:0px 25px;
       text-align:center;
       text-decoration:none;
       }
       .menu li a:hover, .menu ul li:hover a{
       background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
       color:#FFFFFF;
       text-decoration:none;
       }
       .menu li ul{
       background:#333333;
       display:none;
       height:auto;
       padding:0px;
       margin:0px;
       border:0px;
       position:absolute;
       width:225px;
       z-index:200;
       /*top:1em;
       /*left:0;*/
       }
       .menu li:hover ul{
       display:block;
       }
       .menu li li {
       background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
       display:block;
       float:none;
       margin:0px;
       padding:0px;
       width:225px;
       }
       .menu li:hover li a{
       background:none;
       }
       .menu li ul a{
       display:block;
       height:35px;
       font-size:12px;
       font-style:normal;
       margin:0px;
       padding:0px 10px 0px 15px;
       text-align:left;
       }
       .menu li ul a:hover, .menu li ul li:hover a{
       background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
       border:0px;
       color:#ffffff;
       text-decoration:none;
       }
       .menu p{
       clear:left;
       }
   
   
   [Download Script]
5. Kemudian Save Template,
6. Langkah selanjutnya silahkan anda masuk ke menu Tata Letak dan buat Widget baru, caranya click Tambah Widget >> pilih HTML/Java script.
7. Copy script di bawah ini.
   
   <div class="menu"><ul>
   <li><a href="http://achmadfc-eng.blogspot.com"> Home</a></li>
   
   <li><a href="http://achmadfc-eng.blogspot.com/search/label/Tips%20and%20Trick">Tips and Trick</a><ul>
   <li>
   </li>
   </ul></li>
   
   <li><a href='#'>Downloads</a>
   <ul class='children'>
   <li><a href='#'>Movie</a>
   </li>
   <li><a href='#'>Music</a>
   </li>
   </ul></li>
   
   <li><a href='#'>Tutorials</a>
   <ul class='children'>
   <li><a href='#'> Microsoft Office</a>
   </li>
   <li><a href='#'> CorelDraw</a>
   </li>
   <li><a href='#'> Photoshop</a>
   </li>
   <li><a href='http://achmadfc-eng.blogspot.com/search/label/Blogger'> BLogger</a>
   </li>
   </ul></li>
   
   <li><a href='#'>My Blog</a>
   <ul class='children'>
   <li><a href='http://achmadfc-bisnis.blogspot.com' target="blank" > Bisnis Online</a>
   </li>
   <li><a href='http://achmadfc-sch.blogspot.com' target="blank" > Archive Study</a>
   </li>
   <li><a href='#' target="blank" > Download Soft</a>
   </li>
   </ul></li>
   
   <li><a href='#'>Blog my Friend's</a>
   <ul class='children'>
   <li><a href='#' target="blank" > Nama teman 1</a>
   </li>
   <li><a href='#' target="blank" > Nama Teman 2</a>
   </li>
   <li><a href='#' target="blank" > Nama Teman 3</a>
   </li>
   </ul></li>
   </ul>
   </div>
   
   Silahkan Edit :
   > yang berwarna MERAH Silahkan masukan Url/Link anda.
   > yang berwarna HIJAU Biarkan "#"
   
   NB :
   > Block berwarna Hijau untuk membuat menu horizontal
   > Block berwarna Biru untuk membuat menu dropdown
8. Save dan lihat hasilnya.

[Selamat mencoba dan semoga bermanfaat]

*from my blog