Vertical Menu

Vertical Menu adalah menu untuk blogger menu ini Elegant dan menu ini sangatlah sangat simple dan cara pemasanggan sangatlah mudah karna kita tidak perlu Edit HTML jika ingin memasangnya.
Cara memasangnya sobat hanya perlu menambahkan elemen HTML di dalam slidebar, untuk lebih jelasnya tantang cara memasang menu ini mari saya bimbing sobat melalui langkah-langkah Cara memasang Vertical Menu pada blog sobat.

Sekarang kita lansung aja membahas cara memasangnya di blog sobat.

1. Masuk ke akun blogger sobat.

2. Pada menu sobat klick Rancangan ➨ Tambah gadget.

3. Lalu sobat pilih elemen HTML/Java Script.

4. Selanjutnya sobat copy kode script di bawah ini dan letakkan di dalamnya.

<style type="text/css">




/* Vertical Menu By otowebsite.blogspot.com */




#ddblueblockmenu{
border: 1px solid #000000; /*Main Border Color */
border-bottom-width: 0;
width: 100%;
}




#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}




#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%; /*94% minus all left/right paddings and margins*/
text-decoration: none;
color: #ffffff; /* Menu Font Color */
background-color: #2175bc; /*Menu background Color */
border-bottom: 1px solid #90bade; /*Bottom border color */
border-left: 7px solid #1958b7; /*Left border color */
list-style-type:none;
}




* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%; /*94% minus all left/right paddings and margins*/
}




#ddblueblockmenu a:hover {
background-color: #2586d7; /*Menu background Color On Hover*/
border-left-color: #1c64d1; /*Left border color On Hover*/
}




#ddblueblockmenu div.menutitle{
color: #ffffff; /* Title Font Color */
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #000000;  /*Menu Tite Background Color*/
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
/*  Vertical Menu By otowebsite.blogspot.com  */
</style>




<div id="ddblueblockmenu">




<div class="menutitle">Browse</div>
<ul>
<a href="#">Menu 1</a>
<a href="#">Menu 2</a>
<a href="#">Menu 3</a>
<a href="#">Menu 4</a>
<a href="#">Menu 5</a>
<a href="#">Menu 6</a>
</ul></div><font size="1">Menu By <a
href="http://www.otowebsite.blogspot.com/">Blogger</a
href="http:></font>

5. Simpan.

Keterangan :

• Ganti tanda pagar dengan link atau url tujuan.
• Ganti teks menu dengan menu sobat sendiri.
• Untuk merubah warna sobat perhatikan yang bertanda biru, itu adalah kode warna silahka di ganti, untuk melihat kode warna silahkan klick disini.
• Dari kode di atas, masih banyak kode yang bisa di rubah, silahkan sobat rubah sesuai keinginan dan pengetahuan sendiri.

Jika ada kesulitan silahkan bertanya, ok!

Saya rasa cukup, silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas!