Halo Sobat ! | Members area : Register | Sign in
About me | SiteMap
Diberdayakan oleh Blogger.

Enter your email address:

Delivered by FeedBurner

Powered by FeedBurner

Subscribe to Anak Kampung by Email
Related Posts Plugin for WordPress, Blogger...
Home » » Cara Buat Menu Vertikal Keren di Blog

Cara Buat Menu Vertikal Keren di Blog

Kamis, 03 Oktober 2013

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

No Responses to "Cara Buat Menu Vertikal Keren di Blog "

Poskan Komentar