Membuat Menu Vertikal

Setelah belajar tentang cara membuat page number navigasi di blog pada artikel sebelumnya.Nah,untuk artikel kali ini saya ingin belajar tentang cara membuat menu vertikal di blogger.Kebanyakan blogger saat ini memakai menu horizontal tetapi apabila sobat blogger ingin mencoba untuk memasang menu vertikal di sini saya akan membahasnya.dan untuk lebih jelasnya ikuti langkah-langkah di bawah ini.

1. Login Blogger.com
2. Di dasbor pilih Rancangan/Design >> Edit HTML
3. Expand template Widget
4. Cari kode ]]></b:skin>
(*Gunakan F3 di keyboard untuk mempermudah pencarian)
5. Setelah ketemu letakan kode di bawah ini sebelum kode ]]></b:skin>

.clearit {
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;
}

6. Pilih save template jangan beranjak dulu karena belum selesai sampai di sini.masih di menu rancangan/design sobat Pilih tab menu Elemen laman >> tambah gadget >> HTML/javascript
7. Tambahkan kode di bawah ini kedalam content

<div class="menu bubplastic vertical blue">
<ul>
<li><span class="menu_r"><a href="#" target="_self"><span class="menu_ar">About</span></a></span></li>
<li><span class="menu_r"><a href="#" target="_self"><span class="menu_ar">Contact Us</span></a></span></li>
<li><span class="menu_r"><a href="#" target="_self"><span class="menu_ar">Advertiser</span></a></span></li>
<li><span class="menu_r"><a href="#" target="_self"><span class="menu_ar">Banner</span></a></span></li>
<li><span class="menu_r"><a href="#" target="_self"><span class="menu_ar">Link</span></a></span></li>
</ul>
<br class="clearit" />
</div>