Cara Membuat Menu Navigasi Vertical Di Blog

Hai, Pada Artikel ini saya akan membahas sebuah artikel tentang Cara Membuat Menu Navigasi Vertical Di Blog, Pada menu ini Dengan Bentuk vertical Ke Bawah.

Menu ini Dengan Tampilan yang elegan dan cantik, dengan di tambah sebuah icon petunjunk panah dan warna yang stylish, Yang membuat menu ini tambah Menarik, Menu ini bisa Di Taruh Di samping Kanan atau Kiri artikel, Kalau sudah mengerti langsung saja kita coba membuatnya seperti ini :

Login ke blogger
Pergi ke Menu ''Tata Letak'' >> ''Tambah Gadget''
Cari Gadget ''HTML/JavaScript''
Masukanlah kode dibawah ini, di dalam gadget tersebut

<style type='text/css'>
#anarchyta { 
margin: 0; 
padding: 0; 
font-family: Verdana, Helvetica, Arial, sans-serif; 
}
#anarchyta { 
width: 275px; 
}
#anarchyta ul { 
list-style: none; 
text-indent: 0px; 
}
#anarchyta li { 
margin-top: 0px; 
border-bottom: 1px solid #414141; 
}
#anarchyta a { 
font-family:Verdana, Geneva, sans-serif; 
font-size: 15px; 
font-weight:bold; 
font-variant: inherit; 
text-transform:uppercase; 
padding: 0px; 
color:#CCC; 
display: block; 
padding: 13px 50px; 
height: 26px; 
line-height: 26px; 
text-decoration: none; 
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmGeR2hzYHS0gom9i0hUYfDjdTvvARz-toeVQ772AOkFzJ9u833Zi9_jVIngiyKc6mO_UVc04LGiNp8ske5OiHpd9DXf_miJBKLhA1P5H1IGu0HpPhzkhmn-auywRwYXp6WiZo4WOHfR-r/s1600/menu-bg.png) no-repeat; 
text-shadow: 1px 1px 1px #111; 
-webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
-moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
-o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
-ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715); 
}
#anarchyta a:hover { 
background: #5e5e5e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOA6oQ98G3m-VxXI4FEQmLy3kv1QLjHfu1hSWitf2_K_X_nmY1YU9412qElF3HJDxRLyf8cBPS1xdbJIqpzhXZX6pKwBU9MF090Z-YDQJCGdRuW4rfIDXPEsMRdDu9hRyVRhd5TT_nx29Z/s1600/hover-bg.png) no-repeat; 
font-size: 14px; 
padding: 13px 60px; 
-webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
-moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
-o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
-ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715); 
transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715); 
}
#anarchyta a:visited { 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOA6oQ98G3m-VxXI4FEQmLy3kv1QLjHfu1hSWitf2_K_X_nmY1YU9412qElF3HJDxRLyf8cBPS1xdbJIqpzhXZX6pKwBU9MF090Z-YDQJCGdRuW4rfIDXPEsMRdDu9hRyVRhd5TT_nx29Z/s1600/hover-bg.png) no-repeat;    
}
#anarchyta a:active { 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOA6oQ98G3m-VxXI4FEQmLy3kv1QLjHfu1hSWitf2_K_X_nmY1YU9412qElF3HJDxRLyf8cBPS1xdbJIqpzhXZX6pKwBU9MF090Z-YDQJCGdRuW4rfIDXPEsMRdDu9hRyVRhd5TT_nx29Z/s1600/hover-bg.png) no-repeat;    
} 
</style>

<div id='anarchyta'> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">Widgets</a></li> 
<li><a href="#">SEO</a></li> 
<li><a href="#">Adsense</a></li> 
<li><a href="#">Templates</a></li> 
<li><a href="#">Applications</a></li> 
</ul> 
</div>

Setelah itu, Ganti # Dengan url yang ingin di tuju
Ganti juga, Home, Widget, Seo Dan Lain Lain, Dengan Nama menu yang anda inginkan
Setelah Selesai, Sekarang klik ''Simpan''

Demo

Gimana anda tertarik? mudah kan artikelnya? Demikianlah artikel yang baru saya bagikan ini, Semoga artikel ini berguna dan mudah di pratekkan, Silakan Tuliskan pendapat tentang artikel ini di kolom komentar dibawah ini.

Cara Membuat Menu Navigasi Vertical Di Blog

Demo

Terima Kasih & Good Luck

0 Response to "Cara Membuat Menu Navigasi Vertical Di Blog"

Post a Comment