Cara Membuat Menu Tab Vertical



Sebelum ini Ana ada posting cara membuat Menu Horizontal. Hari ini Ana kongsikan cara membuat Menu Vertikal (memanjang kebawah) pula. Seperti gambarajah diatas.

1. Loggin ke blogger. Pada halaman Layout pilih Edit HTML. Masukkan kod dibawah sebelum ]]></b:skin>


/*Vertikal Menu
---------------------------------*/
.vertikalmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* Lebar Menu vertikal*/
}
.vertikalmenu li{
border-bottom: 1px solid white;
}
.vertikalmenu li a{
background: #000000 ; /*Warna background Menu Vertikal*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0;
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
}
.vertikalmenu li a:visited, .vertikalmenu li a:active{
color: white;
}
.vertikalmenu li a:hover{
background-color: #737373; /*Warna Background bila Mouse diarahkan*/
color: white;
border-bottom: 1px solid black;
}


2. Perhatikan kod2 berwarna merah. Tukarkannya bersesuaian dengan blog Antum. Kod warna Disini. Setelah selesai klik butang save.

3. Seterusnya beralih ke bahagian Page Elements. Di bahagian sidebar, klik Add a Gadget => HTML/Javascript. Masukkan kod berikut.

<ul class="vertikalmenu">
<li><a href="/">» HOME</a></li>
<li><a href="http://almansuqie-tips.blogspot.com">» AlmansuQie Tips</a></li>
<li><a href="link kedua">» Al Quran & Sunnah</a></li>
<li><a href="link ketiga">» Peribadi</a></li>
<li><a href="link keempat">» Hadis 40 AnNawawi</a></li>
<li><a href="link kelima">» Himpunan Doa</a></li>
</ul>


4. Gantikan text2 berwarna merah dan biru. Selesai..
Anda baru saja membaca artikel yang berkategori Menu Tab dengan judul Cara Membuat Menu Tab Vertical. Anda bisa bookmark halaman ini dengan URL http://tekno.infoberguna.com/2009/03/cara-membuat-menu-tab-vertical.html. Terima kasih!
Posted by: Adhitya Rachman Cara Membuat Menu Tab Vertical Updated at : 14.58.00

Yang lain juga membaca Menu Tab

Belum ada komentar untuk "Cara Membuat Menu Tab Vertical"

Posting Komentar