Vertikal Menu Navigasi pada Blog

Dalam tutorial kali ini akan dibahas tentang membuat navigasi simple, hampir sama dengan tutorial Horizontal Menu Navigasi pada Blog hanya saja ini berbentuk vertikal. Dan hebatnya lagi, bentuknya yang stylish dan tidak berat saat loadingnya karena tidak disertai gambar untuk backgroundnya.

Langsung asaja pada langkahnya:

Langkah I

• Login ke akun Blogger anda;


• Pilih Rancangan;


• Pilih Edit HTML;


• Cari kode ]]></b:skin>;


• Copy-Paste kode CSS berikut diatas ]]></b:skin>

/*Menukoe
---------------------------------*/
.menukoe{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* lebar dari menu vertikal*/
}
.menukoe li{
border-bottom: 1px solid white;
}
.menukoe li a{
background: #000000 ; /*warna dari menu vertikal*/
font: bold 13px &quot;Lucida Grande&quot;, &quot;Trebuchet MS&quot;, Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0;
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
}
.menukoe li a:visited, .menukoe li a:active{
color: white;
}
.menukoe li a:hover{
background-color: #737373; /*warna setelah pointer diarahkan (hover)*/
color: white;
border-bottom: 1px solid black;
}

• Perhatikan code yang berwarna biru dan kegunaanya.. atur menurut selera kamu;


• Bingung mencari kode warna HTML, silakan klik Color Hunter;


• Klik Simpan Tempale.

Langkah II

• Pilih Add a Gadget;


• Pilih HTML/JavaScript;


• Copy-Paste Code HTML dibawah;

<ul class="menukoe">
<li><a href="/">» Home</a></li>
<li><a href="http://kang-onk.blogspot.com/search/label/Blogger">» Tutorial Blogger</a></li>
<li><a href="http://kang-onk.blogspot.com/search/label/Photoshop">» Tutorial Photoshop</a></li>
<li><a href="http://kang-onk.blogspot.com/search/label/Kisah%20Nabi">» Kisah Nabi</a></li>
<li><a href="http://kang-onk.blogspot.com/search/label/Tokoh%20Islam">» Tokoh Islam </a></li>
<li><a href="http://kang-onk.blogspot.com/">» Berbagi Untuk Semua</a></li>
</ul>

• Klik Simpan.

Oke deach, sampai disini dulu ya? semoga berhasil.