Buat Menu Vertikal Dengan CSS Di Blog

Unknown

Blogger, Tutorial

Saturday, 28 December 2013

11 Komentar

Selamat siang kawan yang sangat bersahaja dan baik hatinya, Terima kasih  telah datang dan membaca artikel ini. Ini adalah artikel saya yang ke 30. Kalian para blogger sejati pasti pernah mendengar Menu Horizontal dengan css diblog, tapi untuk kali ini saya tidak menjelaskan cara membuat itu tapi saya disini sakarang akan menjelaskan bagaimana cara membuat menu vertikal dengan css.

Screenshot

Oke tanpa panjang lebar kita langsug praktekan
1.Buka Blogger
2.Pilih Layout/ Tata letak
3.Pilih add Element
4.Pilih HTML/Javascript
5.Masukan kode ini didalamnya

<style>
.fblink_menu{
font: bold 14px Arial;
width: 190px;         /* lebar menu */
}
.fblink_menu ul{
border: 1px solid #eee;
padding: 0;
margin: 0;
list-style: none;
}
.fblink_menu ul li{
margin:0;
padding:0;
}
.fblink_menu ul li a{
display:block;
text-transform: uppercase;
color: #494949;
padding: 10px 15px;
text-decoration: none;
border-bottom: 1px solid #cacaca;
border-right: 1px solid #a5a5a4;
-moz-box-shadow: inset 7px 0 10px rgba(199,100,2, 0.6);
-webkit-box-shadow: inset 7px 0 10px rgba(199,100,2, 0.6);
box-shadow: inset 7px 0 10px rgba(199,100,2, 0.6);
text-shadow: 0 -1px 1px #a0fef8;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.fblink_menu ul li a:hover, .fblink_menu ul li a.selected{
color:#fd0a04;
-moz-box-shadow: inset 7px 0 10px rgba(79,102,220, 0.5), inset 0 0 15px rgba(79,102,220, 0.6), inset 0 0 20px rgba(79,102,220, 0.8);
-webkit-box-shadow: inset 7px 0 10px rgba(79,102,220, 0.5), inset 0 0 15px rgba(79,102,220, 0.6), inset 0 0 20px rgba(79,102,220, 0.8);
box-shadow: inset 7px 0 10px rgba(79,102,220, 0.5), inset 0 0 15px rgba(79,102,220, 0.6), inset 0 0 20px rgba(79,102,220, 0.8);
}
</style>

<div class="fblink_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Trik Blog</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>

6.Kemudian Save/ Simpan

Note
Ganti kode # dengan alamat url
Ganti huruf yang berwarna orange dengan judul kalian

Sampai disini dulu tutor saya tentang Menu Vertikal dengan CSS di Blog, jangan lupa komen dan klik iklan yh :)