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..!
Previous
Next Post »

15 komentar

Write komentar
M Raffi
AUTHOR
July 14, 2013 at 2:49 PM delete

yang ini juga keren gan menunya, kalau cara buat kotak iklan di sidebar gemana ya gan?

Reply
avatar
Henry Dwi.s
AUTHOR
July 14, 2013 at 4:49 PM delete

di tunggu aja tutorial berikutnya, thank's sob kunjunganya :)

Reply
avatar
sch-xp
AUTHOR
July 17, 2013 at 8:52 PM delete

keren, ada hovernya juga lagi :D

Reply
avatar
abdul rohim
AUTHOR
October 22, 2013 at 11:06 AM delete

bro, di blog gue ]]> gak ada -_-
ada cara lain?

Reply
avatar
Henry Dwi.s
AUTHOR
October 22, 2013 at 9:22 PM delete

jangan ada spasi bro.. silakan tulis lagi]]>

Reply
avatar
ss3smandaku
AUTHOR
October 30, 2013 at 10:42 PM delete

thanks bro tutorialnya, sangat membantu

Reply
avatar
Reddy Al Rich
AUTHOR
November 6, 2013 at 11:06 PM delete

cara merubah warna menu bar nya gimna bro?

Reply
avatar
Henry Dwi.s
AUTHOR
November 7, 2013 at 8:13 PM delete

cari kode ini { background-color: #01a279}

Reply
avatar
November 14, 2013 at 9:27 PM delete

thanks gan... visit harryazero.blogspot.com masih nebe gan... :)

Reply
avatar
Admin
AUTHOR
May 31, 2014 at 11:31 PM delete

keren banget mas.
biar ada sub menunya gimana caranya ya mas?

Reply
avatar
August 2, 2014 at 12:23 AM delete

Kok Ane coba gak bisa gan ?
Apa ada yang salah ?

Reply
avatar

=======================================================
• Untuk menyisipkan kode, gunakan tag [code]... KODE ...[/code]

• Untuk menyisipkan kode panjang, gunakan tag [pre]... KODE ...[/pre]

• Untuk menyisipkan catatan, gunakan [quote]...CATATAN ...[/quote]

• Untuk menyisipkan gambar, gunakan [img]..URL GAMBAR..[/img]

• Untuk menyisipkan video, gunakan [youtube]..URL VIDEO..[youtube]
======================================================= EmoticonEmoticon