Sebelumnya saya menulis mengenai menu Horizontal dan berikut ini saya mencoba menulis artikel menu vertikal. Pembuatan menu vertikal ini sangat mudah, hanya sedikit menambahkan kode css pada bagian template dan kode html pada sidebar.
Terus bagaimana cara membuatnya………, berikut ini saya berikan tips untuk membuat menu vertikal.
Adapun langkah-langkahnya adalah sebagai berikut :
1. Masuk ke bagian Edit HTML
2. Tambahkan kode css berikut ini sebelum kode ]]></b:skin>
margin: 0;
padding: 0;
height: 0;
clear: both;
}
/* BUBBLE PLASTIC VERTICAL MENU */
.bubplastic.vertical {
width: 150px;
margin: 0px;
padding: 0px;
display: block;
}
.bubplastic.vertical ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
.bubplastic.vertical ul li {
display: block;
float: left;
width: 100%;
margin: 0;
padding: 0;
background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top left no-repeat;
}
.bubplastic.vertical ul li a {
display: block;
margin: 0;
width: 100%;
padding-left: 15px;
text-transform: uppercase;
font-family: "Helvetica Neue",helvetica,"microsoft sans serif",arial,sans-serif;
font-size: 70%;
color: #FFFFFF;
text-decoration: none;
background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top left no-repeat;
}
.bubplastic.vertical ul li a span.menu_ar {
display: block;
margin: 0;
width: 100%;
height: 22px;
padding-top: 5px;
padding-right: 15px;
background: transparent url(http://lh6.ggpht.com/_7Y9pl24WpQY/TCTaMf6oL6I/AAAAAAAAEOU/WMlVDrN8s8M/bg-bubplastic-button_thumb%5B5%5D.gif) top right no-repeat;
cursor: pointer;
}
/* BLUE HOVER */
.bubplastic.blue ul li a:hover,
.bubplastic.blue ul li.highlight a {
background: transparent url(http://lh4.ggpht.com/_7Y9pl24WpQY/TCTaTTyG38I/AAAAAAAAEOk/s7mSQh3v_oo/bg-bubplastic-h-blue_thumb%5B3%5D.gif) top left no-repeat;
}
.bubplastic.blue ul li a:hover span.menu_ar,
.bubplastic.blue ul li.highlight a span.menu_ar {
background: transparent url(http://lh4.ggpht.com/_7Y9pl24WpQY/TCTaTTyG38I/AAAAAAAAEOk/s7mSQh3v_oo/bg-bubplastic-h-blue_thumb%5B3%5D.gif) top right no-repeat;
}
3. Simpan Template.
4. Masuk Ke Elemen Halaman.
5. Klik Tambah Gadget pada bagian sidebar.
6. Pilih yang HTML/Javascript, kemudian masukkan kode berikut kedalamnya :
<ul>
<li><span class="menu_r"><a href="http://blog anda.blogspot.com/" target="_self"><span class="menu_ar">,About</span></a></span></li>
<li><span class="menu_r"><a href="http:// blog anda.blogspot.com/" target="_self"><span class="menu_ar"> Contact Us</span></a></span></li>
<li><span class="menu_r"><a href="http:// blog anda.blogspot.com/" target="_self"><span class="menu_ar"> Advertiser</span></a></span></li>
<li><span class="menu_r"><a href="http:// blog anda.blogspot.com/" target="_self"><span class="menu_ar"> Banner</span></a></span></li>
<li><span class="menu_r"><a href="http:// blog anda.blogspot.com/" target="_self"><span class="menu_ar"> Link</span></a></span></li>
</ul>
<br class="clearit" />
</div>
7. Simpan.
Yang harus diganti adalah tulisan yang berwarna hijau dan merah. Selamat mencoba !
Membuat Menu Vertikal
.clearit {
<div class="menu bubplastic vertical blue">