.png "English"){kind=small}
Kita telah belajar bagaimana untuk membuat menu horisontal sebelumnya. Sekarang kita akan mencoba untuk membuat menu vertikal. Kami akan membuat menu vertikal seperti gambar. Ok mari kita lakukan1. Login ke blogger kemudian pilih "Layout -> Edit HTML"
2. Masukan script di bawah ini sebelum kode ]]>: skin> atau meletakkannya di daerah kode CSS.
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
Anda dapat mengubah warna menu, melihat teks merah (blue1.gif dan blue2.gif). Mengubahnya dengan beberapa menu warna di bawah ini. Sebagai contoh, jika Anda ingin memilih warna merah, maka kode akan menjadi seperti ini:
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;
dan
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');
background-image: url('http://blog.superinhost.com/vertical/red.gif');
4. Lalu pergi ke menu "Page Elements"
5. pilih "Tambah Gadget -> HTML / JavaScript" sisipkan kode di bawah ini.
Catatan:
- Kode yang berwarna merah adalah link.
- Kode Blue jangkar teks.
- Jika Anda ingin menambahkan menu, hanya menyalin kode berkedip dan paste.
6. Kemudian klik "Simpan"
Rupiah Exchange Rate
0 komentar:
Post a Comment