Cara Buat Menu Vertikal Keren di Blog

Cara Buat Menu Vertikal Keren di Blog Sobat blogger pasti sudah tahu apa yang saya maksud. Pada tutorial kali ini Saya Akan berbagi tentang cara membuat menu navigasi vertikal. Kenapa saya bilang keren?? Jawabanya adalah karena saat cusor mouse diarahkan ke menu akan berubah warna secara perlahan-lahan, di bawah ini adalah screenshotnya:

Oke Sob Berikut caranya: 
Untuk membuatnya silahkan ikuti langkah-langkahnya :

1. Login ke akun Blogger sobat

 

2. Sekarang Klik Template

3. Klik EDIT HTML

 

4. Sekarang Cari Kode ]]></b:skin> agar mudah dalam pencarian tekan Ctrl+f

 
5. Letakan kode di bawah tepat di atas kode ]]></b:skin>

/* Menu vertikal
-----------------------------------------------
*/
.side-nav {
margin-left:0;
display: block;
}
.side-nav a {
display: block;
margin: 0 0 4px;
padding: 6px 20px 9px;
color: #fff;
font-size: 18px;
-webkit-transition: color, background-color 0.3s linear;
-moz-transition: color, background-color 0.3s linear;
-o-transition: color, background-color 0.3s linear;
transition: color, background-color 0.3s linear;
}
.side-nav a:hover {
background-color: #222;
text-decoration:none;
}
.side-nav a:hover {
color: #fff;
}
/* Warna Menu
-----------------------------------------------
*/
.pale1 { background-color: #01a279}
.pale2 { background-color: #789CB6; }
.pale3 { background-color: #48CF89; }
.pale4 { background-color: #FAB36B; }
.pale5 { background-color: #48CFB6; }
.pale6 { background-color: #F47B55; }
.pale7 { background-color: #5E839D; }
.pale8 { background-color: #3F6682; }

Catatan:
Anda Boleh Ganti tulisan Berwarna Merah dengan yang anda inginkan(fungsinya untuk Warna Background Menu)

7. Sekarang kita menuju ke layout

 

8. Klik Tambahkan Gadget dan pilih 'HTML/Javascript

9. Letakan script html di bawah ini di kolom yang disediakan. (Ingat, untuk kolom judul gadget tidak perlu diisi)

<div class='clear'/>
<div class='widget-content'>
<div class='side-nav'>
  <a class='pale3' href='#'>Menu 1</a>
  <a class='pale4' href='#'>Menu 2</a>
  <a class='pale1' href='#'>Menu 3</a>
  <a class='pale2' href='#'>Menu 4</a>
  <a class='pale5' href='#'>Menu 5</a>
  <a class='pale6' href='#'>Menu 6</a>
</div></div></div>

10. Klik Simpan

catatan: 
ganti tanda # dengan alamat URL
ganti tulisan menu 1-6 dengan nama menu yang anda inginkan,
oke mungkin cukup sekian, Semoga Bermanfaat..!

Artikel Terkait