Cara Membuat Menu Vertikal CSS

Haiiii!!!! Kali ini Mimin Blog Renovatio nimbrung di Blog Techno World !! Kali ini yang empunya blog request buat diposting-kan cara membuat navigasi Vertikal!! Oke, setelah mimin berkelana kesana-kemari mencara alamat... akhirnya, ketemu juga artikel yang membahas tentang Cara membuat Menu Navigasi Vertikal... Cekibrott yaaa!!







Contoh menu vertikal dengan CSS

Mari kita ikuti tutorial membuat menu vertical dengan menggunakan CSS

1.    Masuk ke Blogger

2.    Pilih Design > Edit HTML

3.    Cari kode ]]></b:skin>

4.    Kemudian Copy kode di bawah in dan pastekan tepat di atas kode ]]></b:skin>
 
/*****Menu Vertical css Techno World*****/   
.navbox {   
position: relative;   
float: left;   
}   
ul.nav {   
list-style: none;   
display: block;   
width: 220px;   
position: relative;   
top: 0px;   
left: 0px;   
padding: 0px 0 0px 0;   
background: url(http://i580.photobucket.com/albums/ss241/nobhita/green1.gif) no-repeat;   
-webkit-background-size: 50% 100%;   
-moz-background-size: 50% 100%;   
}   
li {   
margin: 5px 0 0 0;   
}   
ul.nav li a {   
-webkit-transition: all 0.3s ease-out;   
-moz-transition: all 0.3s ease-out;   
background: #cfe2f3 url(http://i580.photobucket.com/albums/ss241/nobhita/green1.gif) no-repeat;   
color: #cc0000;   
padding: 7px 15px 7px 15px;   
-webkit-border-top-right-radius: 0px;   
-webkit-border-bottom-right-radius: 0px;   
-moz-border-radius-topright: 0px;   
-moz-border-radius-bottomright: 0px;   
width: 110px;   
display: block;   
text-decoration: none;   
-webkit-box-shadow: 4px 2px 4px #888;   
-moz-box-shadow: 4px 2px 4px #888;   
}   
ul.nav li a:hover {   
background: #cc0000 url(http://i580.photobucket.com/albums/ss241/nobhita/green1.gif) no-repeat;   
color: black;   
padding: 7px 15px 7px 30px;   
}  


5.    Save template sobat

6.    Setelah itu masuk ke element laman dan klik add gadget kemudian pilih html/java script

7.    Pastekan kode di bawah
 
<div class="navbox">   
<ul class="nav">   
<li><a href="http://wisnu-utomo8.blogspot.com/">Techo World</a></li>   
<li><a href="masukan link">kategory 2</a></li>   
<li><a href="masukan link">kategory 3</a></li>   
<li><a href="masukan link">kategory 4</a></li>   
<li><a href="masukan link">kategory 5</a></li>   
<li><a href="masukan link">kategory 6</a></li>   
<li><a href="masukan link">kategory 7</a></li>   
<li><a href="masukan link">kategory 8</a></li>   
<li><a href="masukan link">kategory 9</a></li>   
</ul>   
</div>  

8.    Simpan gadget sobat dan lihat hasilnya.

Sumber : trik dan tutorial blog