Friday, July 12, 2013

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..!

Related Posts

Cara Buat Menu Vertikal Keren di Blog
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

16 komentar

Tulis komentar
avatar
July 14, 2013 at 2:49 PM

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

Reply
avatar
July 14, 2013 at 4:49 PM

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

Reply
avatar
Anonymous
July 17, 2013 at 8:52 PM

keren, ada hovernya juga lagi :D

Reply
avatar
October 22, 2013 at 11:06 AM

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

Reply
avatar
October 22, 2013 at 9:22 PM

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

Reply
avatar
Anonymous
October 30, 2013 at 10:38 PM

Thanks bro tutorialnya,

Reply
avatar
Anonymous
October 30, 2013 at 10:42 PM

thanks bro tutorialnya, sangat membantu

Reply
avatar
November 6, 2013 at 11:06 PM

cara merubah warna menu bar nya gimna bro?

Reply
avatar
November 7, 2013 at 8:13 PM

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

Reply
avatar
November 14, 2013 at 9:27 PM This comment has been removed by the author.
avatar
May 31, 2014 at 11:31 PM

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

Reply
avatar
August 2, 2014 at 12:23 AM

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

Reply
avatar
February 10, 2019 at 1:48 PM

Agen Togel Online Terbaik & Terlengkap!
Tersedia Pasaran Hongkong - Sydney - Singapore
Potongan Diskon 2D = 30% | 3D = 59% | 4D = 66%
Dapatkan Keuntungan Dalam Menebak Angka Hingga Ratusan Juta Setiap Hari..
Yuk Gabung Bersama Bolavita Di Website www. bolavita .fun
Untuk Info, Bisa Hubungi Customer Service Kami ( SIAP MELAYANI 24 JAM ) :
BBM: BOLAVITA
WA: +628122222995

Reply

=======================================================
• 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]
=======================================================