cara Membuat Menu Vertikal (Vertical) di blogger

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 ]]></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%; }

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;

dan

.glossymenu li a:hover{
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://trik-tips.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.

Dah gitu aja. Gampang kan???? :D

Artikel Terkait:

Belajar Blogger

• FUNGSI KOMBINASI TOMBOL PADA KEYBOARD
• Tukar Link Bersama ilmuhamster
• Cara blogwalking atau menampilkan new tab pada saat link di blogger diklik
• Cara Cepat menaikkan Page Rank (PR) dan Visitor blogger anda
• Tentang PPC dan Daftar Situs PPC Lokal dan luar
• 13 Cara Mendapatkan Uang Dari Blog Berbahasa Indonesia
• cara mendapatkan uang dari orang yang online ke blogger
• Cara Membobol Blog Anti Copas dengan Gampang
• Profil Admin
• Cara Membuat Kategori / Label di Blogger

Artikel keren

• Cara Menghilangkan Suara Kamera Pada Blackberry
• FUNGSI KOMBINASI TOMBOL PADA KEYBOARD
• Aspects of Radical Constructivism and Its Educational Recommendations
• nama provinsi, suku bangsa, adat istiadat, rumah adat istiadat, rumah adat, senjata, tarian adat, pakaian adat ciri makanan has daerah, alat musik
• JADWAL UKG II GIANYAR BALI
• Foto-foto keren
• Paper-Makalah-Artikel-Tari-Rejang-Sutri-bali-bab-II-lanjutan
• Paper Makalah Artikel Tari Rejang Sutri bali
• PRESENT TENSE
• Rangkaian Kegiatan MOS di SMP Negeri 4 Tegallalang