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
Selanjutnya,
pilih Rancangan, kemudian Klik Elemen Laman.
and next, pilih tambah gadget, setelah itu pilih HTML/JavaScript
masukkan kode dibawah ini:
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 "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 setelah pointer diarahkan (hover)*/
color: white;
border-bottom: 1px solid black;
}
---------------------------------*/
.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 "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 setelah pointer diarahkan (hover)*/
color: white;
border-bottom: 1px solid black;
}
setelah itu simpan...
SimpanSelanjutnya,
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