Membuat Tab Menu Vertikal

Sebelumnya kita pernah membahas Tab menu Secara Horisontal,
Bagaimana kalau sekarang kita membahas yang Vertikal..???
kalau kamu tertarik langsung aja baca artikel ini.

Caranya :
- Login ke account blogger.
- Klik Rancangan > Edit HTML.
(Dibiasakan Centang kotak kecil Expand Widget Templates)
- Cari kode ]]></b:skin> di dalam template kamu.
(Agar lebih mudah pencariannya klik CTRL+F lalu paste ]]></b:skin> didalam kotak yang tersedia)

Tips aman :
Lakukan backup dengan "DOWNLOAD TEMPLATE LENGKAP".
Kalo terjadi kesalahan kamu tinggal Upload lagi dan bakal kembali seperti semula.

- Copy pastekan script di bawah ini tepat diatas kode ]]></b:skin>

/*Vertikal Menu

---------------------------------*/

vertikalmenu{

list-style-type: none;

margin: 0;

padding: 0;

width: 100%;

}

.vertikalmenu li{

border-bottom: 1px solid #ffffff;

}

.vertikalmenu li a{

background: #000000;

font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;

display: block;

color: #ffffff;

width: auto;

padding: 5px 0;

text-indent: 8px;

text-decoration: none;

border-bottom: 1px solid #000000;

}

.vertikalmenu li a:visited, .vertikalmenu li a:active{

color: #ffffff;

}

.vertikalmenu li a:hover{

background-color: #737373;

color: #ffffff;

border-bottom: 1px solid #000000;

}

Kemudian Simpan Template

Keterangan :

Pada teks berwarna Kuning (Kode Warna) kamu bisa sesuaikan dengan Selera kamu.

Eeeeitt.. Belum selesai Bray..!!!

Sekarang kita menuju Elemen Laman/Page Element.

Tambah Gadget lalu pilih HTML/JavaScript.

Lalu copy paste Script dibawah ini kedalamnya,

<ul class="vertikalmenu">

<li><a href="#">HOME</a></li>

<li><a href="#">FILM</a></li>

<li><a href="#">MUSIK</a></li>

<li><a href="#">SOFTWARE</a></li>

<li><a href="#">TUTORIAL</a></li>

<li><a href="#">WIRAUSAHA</a></li>

</ul>