Sebelumnya kita pernah membahas tentang membuat menu horizontal, nha sekarang mari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal (ya iyalah). Contohnya seperti gambar disamping itu. Beginilah cara membuatnya :
1. Login ke blogger trus pilih "Layout-->Edit HTML"
Sebelumnya kita pernah membahas tentang membuat menu horizontal, nha sekarang mari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal (ya iyalah). Contohnya seperti gambar disamping itu. Beginilah cara membuatnya :
1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]> atau sebelum kode . Pokoknya ditaruh di dalam Barisan kode CSS deh.
.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%; }
Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :
.glossymenu li a{
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');
Pilihan Warna menu vertikal :
blue1.gif
blue2.gif
green1.gif
green2.gif
red1.gif
red2.gif
pink1.gif
pink2.gif
black1.gif
black2.gif
3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:
Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.
Dah gitu aja. Gampang kan????
Senin, 02 Maret 2009
Langganan:
Posting Komentar (Atom)
Web Hosting Murah Murah-Banget.Com
BalasHapusWeb Hosting Indonesia, bikin website, domain gratis, domain hosting indonesia, domain id, domain indonesia, domain murah, free php hosting, free web hosting, hosting domain gratis, hosting murah, hosting murah indonesia, nama domain, web hosting gratis, web hosting murah, web hosting support php, web instant, web server, webhosting indonesia, webhosting murah
Hi,
Kami atas nama Cempakatech memperkenalkan situs baru kami di www.murah-banget.com
Murah-Banget.Com adalah penyedia layanan web hosting & toko komputer online termurah
Selain harga termurah, Anda juga akan mendapatkan layanan executive layaknya Raja.
Berikut ini sekilas tentang produk dan layanan unggulan kami:
== Value Web Hosting Termurah == Info Lengkap Di www.murah-banget.com ==
» Mulai Hanya Rp. 450,- per Bulan
» Space up to 500 MB
» Gratis Setup
» Unlimited Email Account
» Unlimited Database MySQL
» Unlimited Sub Domain
» Unlimited FTP Account
» Gratis Fantastico Template
» 24x7 Online Ticket Support
» Free Choice USA or ID Server
GRATIS Voucher menginap 1 hari 1 malam di hotel parahyangan anyer,
Hanya untuk pembelian paket Executive Standard, Executive Business, Executive Corporate
dan Executive Enterprise selama 1 Tahun
Dengan didukung pengalaman dan manajemen yang professional akan menjadikan produk
dan layanan kami sesuai dengan apa yang Anda harapkan, dan sudah menjadi target kami
untuk melayani Anda layaknya Raja. Maka dari itu, tunggu apa lagi? Silahkan kunjungi
website kami di www.murah-banget.com .
Thanks,
Marten Stephanus
Sales Department
Murah-Banget.Com == 021-8890067
Cempakatech / Cubesnet Sistematika
============================================================================
Alamat pos-el ini telah diberikan kepada kami oleh Anda atau oleh salah satu dari pelanggan kami.
JIka Anda tidak mendaftarkan diri Anda untuk mendapatkan sebuah akun pada situs kami,
atau Anda merasa bahwa Anda telah menerima pos-el ini dalam kesalahan, silakan kirimkan
sebuah pos-el kepada kami ke support@murahbanget.com
Pos-el ini dikirimkan sesuai dengan peraturan pada US CAN-SPAM Law yang berlaku pada tanggal
01/01/2004. Permintaan penghapusan akan dihargai dan dihormati dan dapat dikirimkan ke alamat ini.