Vertical Menu Dengan Efek Show Hide

Setelah cukup lama tidak aktif di dunia blogging, akhirnya baru sekarang bisa posting lagi. Akhir-akhir ini saya disibukkan oleh aktifitas keseharian saya. Sebagai postingan pertama saya setelah sekian lama istirahat dari dunia blogging saya akan memberikan sebuah tutorial tentang membuat vertical menu dengan efek show hide. Tutorial ini saya pelajari dari Antonio Lupeti, mungkin sudah tidak asing lagi bagi anda dengan blogger yang saya maksud. Live demonya silakan anda lihat DI SINI. bagi anda yang berminat untuk membuatnya silakan ikuti langkah-langkah di bawah ini.

STEP 1

1. Login ke blogger.com
2. Klik Rancangan
3. Klik Edit HTML
4. Cari kode berikut
   
   </head>
   
   Copy kode di bawah ini, lalu letakkan tepat di atas kode tadi.
   
   

   <style type="text/css">
   /* --- button --- */
   .button{
   background:url(http://i46.tinypic.com/2rbz7rt.png) -32px right no-repeat;
   color:#FFFFFF;
   clear:both;
   display:block;
   float:left;
   font-size:13px;
   font-weight:bold;
   height:31px;
   line-height:31px;
   width:auto;
   margin-right:30px;
   }
   a.button {
   text-decoration:none;
   }
   .button span {
   background:url(http://i46.tinypic.com/2rbz7rt.png) left top no-repeat;
   display:block;
   height:31px;
   line-height:31px;
   padding-left:10px;
   padding-right:8px;
   margin-right:20px;
   }
   /* --- vertical menu --- */
   .v-menu{
   border:solid 1px #7F9FBF;
   width:200px;
   clear:both;
   }
   ul.v-menu, .v-menu li{
   padding:0;
   margin:0;
   list-style:none;
   }
   ul.v-menu{
   clear:both;
   margin-top:6px;
   padding:6px 10px;
   }
   .v-menu li a{
   color:#555555;
   font-weight:bold;
   display:block;
   border-top:solid 1px #DEDEDE;
   padding:4px;
   text-decoration:none;
   }
   .v-menu li a:hover{
   color:#999999;
   }
   </style>
   <script type="text/javascript">
   function showElement(layer){
   var myLayer = document.getElementById(layer);
   if(myLayer.style.display=="none"){
   myLayer.style.display="block";
   myLayer.backgroundPosition="top";
   } else {
   myLayer.style.display="none";
   }
   }
   </script>

5. Klik Simpan

STEP 2

1. Setelah template anda tersimpan, Klik Rancangan
2. Pada menu Elemen Halaman, pilih Tambah Widget sesuai dengan letak yang anda inginkan
3. Setelah terbuka halaman tambah widget pilih penambahan HTML/JavaScript
4. Pada halaman Konfigurasi HTML/JavaScript beri judul widget anda, kemudian copy kode berikut dan letakkan pada content.
   
   

   <a href="#" class="button" onclick="javascript:showElement ('v-menu')">
   <span>ClickHere</span></a>
   <ul id="v-menu" class="v-menu" style="display: none;">
   <li><a href="http://URL ANDA">TEXT ANDA</a></li>
   <li><a href="http://URL ANDA">TEXT ANDA</a></li>
   <li><a href="http://URL ANDA">TEXT ANDA</a></li>
   <li><a href="http://URL ANDA">TEXT ANDA</a></li>
   <li><a href="http://URL ANDA">TEXT ANDA</a></li>
   </ul>

   
   Keterangan :
   * Pada list item (<li><a href="http://URL ANDA">TEXT ANDA</a></li>), silakan sesuaikan dengan Url yang anda tuju dan juga text anda.
5. Klik Simpan

• TEXT ANDA
• TEXT ANDA
• TEXT ANDA
• TEXT ANDA
• TEXT ANDA

  

Terima kasih buat Mas Dazine Blog