Browse > Home >
Tips dan trik
> Cara Membuat Menu Vertikal (Vertical)
Cara Membuat Menu Vertikal (Vertical)
Cara Membuat Menu Vertikal (Vertical) ~ Siang ini sumbansih komputer membahas tentang membuat menu horizontal, 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 ]]></b:skin> atau sebelum kode </style> . 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://kendhin.890m.com/blog/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://kendhin.890m.com/blog/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://kendhin.890m.com/blog/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://kendhin.890m.com/blog/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://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;
dan
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');
background-image: url('http://kendhin.890m.com/blog/vertical/red1.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:
<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://sumbangsihkomputer.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>
<li><a href="/">Home</a></li>
<li><a href="http://sumbangsihkomputer.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>
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.
by http://trik-tips.blogspot.com
Artikel Menarik Lainnya
Tips dan trik
- cara cepat root android terbaru
- Cara Install Dan Konfigurasi Dhcp Server
- Cara Memasang Anchor Text Di Blog
- Cara Membuat Meta Tag Otomatis Pada Setiap Postingan
- Cara Menampilkan Gambar Posting Blog Di Pencarian Google
- Resep Macam - Macam Kue Bolu
- Cara Submit Blog Ke Bing
- Cara Membuat Sitemap Di Blog
- Cara Mengganti Template Blog
- Cara Membuat Kotak Blogroll Dan Marquee
- Contoh Pidato Bahasa Inggris
- Cara Instalasi Windows Server 2003
- Cara Mendaftar Dan Memasang Iklan SITTI Di Blog
- Cara Verifikasi Paypal Menggunakan Kartu Bank Niaga
- Cara Membuat Tombol Share Facebook Twitter Dan Google Plus
- Cara Membuat Pancake Cokelat Dan Durian
- Cara Memasang Fans Page Facebook Di Blog
- Resep Dan Cara Membuat Rainbow Cake
- Cara Membuat Tombol Follow Twitter Di Blog
- Cara Mempercepat Koneksi Internet Modem
- Cara Membuat Daftar Isi Blog Dengan Scroll
- Cara Cepat Meningkatkan Pengunjung Dengan SEO
- Cara Mempercepat Loading Blog
- Cara Membuat Iklan Melayang Di Blog
- Cara install linux Debian Lenny
Cara Membuat Menu Vertikal (Vertical)
Diulas oleh 798 Pembaca Tips Blogging And Computer
5
Sabtu, 14 Juli 2012
Langganan:
Posting Komentar (Atom)
1 Responses to “Cara Membuat Menu Vertikal (Vertical)”
postingan yang bagus tentang Cara Membuat Menu Vertikal (Vertical) 14 Juli 2012 pukul 15.21
Posting Komentar