cara membuat menu vertical

Diposting olehviky on Kamis, 09 Juni 2011

pada kesempatan ini saya akan coba sharing bagaimana cara membuat menu vertikal...
pertama-tamamenu yang perlu diketahui adalah,seperti apa menu vertikal itu,menu vertical adalah menu yang berjajar ke bawah,contohnya seperti gambar dibawah ini

bagaimanakah cara membuatnya???????
berikut tahapan membuatnya...

Pertama : 
Masuk ke akun blogger anda, pilih layout/Rancangan, pilih Edit HTML


masukkan kode CSS di bawah ini diatas kode ]]></b:skin
supaya ngga repot cari kodenya, tekan aja  Ctrl+F  lalu tulis ]]></b:skin

/*Vertikal Menu
---------------------------------*/
.vertikalmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* lebar dari menu vertikal*/
}
.vertikalmenu li{
border-bottom: 1px solid white;
}
.vertikalmenu li a{
background: 
#000000 ; /*warna dari menu vertikal*/
font: bold 13px &quot;Lucida Grande&quot;, &quot;Trebuchet MS&quot;, 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 setelah pointer diarahkan (hover)*/
color: white;
border-bottom: 1px solid black;

setelah itu simpan...
Simpan
Selanjutnya,
pilih Rancangan, kemudian Klik Elemen Laman.
and next, pilih tambah gadget, setelah itu pilih  HTML/JavaScript
masukkan kode dibawah ini:
<ul class="vertikalmenu">
<li><a href="http://your blog name.blogspot.com">MAIN</a></li>
<li><a href="http://your blog name.blogspot.com">Biography</a></li>
<li><a href="http://your blog name.blogspot.com">Gallery</a></li>
<li><a href="http://your blog name.blogspot.com">Press</a></li>
<li><a href="http://your blog name.blogspot.com">About Us</a></li>
<li><a href="http://your blog name.blogspot.com">Contact Us</a></li>
</ul>

setelah itu simpan,..
dan tahapan yang terakhir yaitu Selesai,...selamat mencoba
semoga bermanfaat,jangan lupa follow ya,....

salam SSSS

Selanjutnya,
pilih Rancangan, kemudian Klik Elemen Laman.



{ 0 komentar.. read them below or add one }

Posting Komentar