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

     Sekarang lihat blog anda, jika anda berhasil membuatnya maka akan terlihat vertical menu seperti di blog saya yang ini. Selamat mencoba dan semoga bermanfaat ^^,. Saya mau blogwalking dulu, kangen ama temen-temen blogger semua....

If you enjoyed this article, subscribe to receive more great content just like it.

Subscribe via RSS Feed

Your information will not be shared. Ever.

Related posts:

Membuat Efek Shadow Pada Image

Membuat Highlight Author Comment

Memberi Nomor Pada Komentar (Numbering Comments)

Membuat Comments Bubble Versi 2

Membuat Comments Bubble Pada Blog

Membuat Efek Blur Pada Image

Membuat Efek Scroll

Membuat Navigasi Breadcrumbs di Blogspot

Membuat Menu Navigasi Current Page

Vertical Menu Dengan Efek Show Hide