Cara membuat menu Vertikal di Blogspot
- Login ke blog anda > Klik Design
- Add a gadged dan pilih HTML / javascript
- Penempatan gadged atau widget tepatnya pada sidebar kanan atau kiri, karena menu ini vertikal dan tentunya susunan menunya kebawah.
- Copy kode berikut dan paste pada gadged tsb
.menu-vertikal, .menu-vertikal li ul{list-style-type: none;margin: 5px;width: 250px; /*Lebar Menu*/border: 1px solid black;}
.menu-vertikal li{position: relative;}
.menu-vertikal li a{background: #000000;font: bold 12px Verdana, Helvetica, sans-serif;color: #FFFFFF;display: block;width: auto;padding: 5px 0;padding-left: 10px;text-decoration: none;}
.menu-vertikal li ul{position: absolute;width: 250px;display: none;}
.menu-vertikal li ul li{float: left;}
.menu-vertikal li ul a{width: 250px;}
.menu-vertikal li a:visited, .glossymenu li a:active{color: white;}
.menu-vertikal li a:hover{background: #454545;}
* html .menu-vertikal li { float: left; height: 1%; }
* html .menu-vertikal li a { height: 1%; }
</style>
<ul id="verticalmenu" class="menu-vertikal">
<li><a href="/">Home</a></li>
<li><a href="http://Link1">Menu1</a></li>
<li><a href="http://Link2">Menu2</a></li>
<li><a href="http://Link3">Menu3</a></li>
</ul>
- Kemudian Save
Keterangan cara membuat menu vertikal di Blogspot :
- Ganti Link1, Link2, Link3 dan Menu1, Menu2, Menu3 sesuai kebutuhan anda. yangs aya contohkan hanya 4 menu dengan Home. Jika ingin menambah, silahkan di tambahi dibawah sendiri ya <li><a href="http://Link4">Menu4</a></li> dan seterusnya.
- Kode berwarna Merah adalah lebar menu dan list menu, silahkan anda sesuaikan dengan lebar widget sidebar blog anda.
- Kode berwarna Piru adalah warna background menu Vertikal
- Kode dengan warna Orange adalah warna tulisan dan bisa anda rubah sendiri
- Kode berwarna Pink adalah warna hover background menu vertikal tersebut. Maksudnya warna background apabila mouse di arahkan pada menu tersebut.
sumber : blogbamz
