Monday, February 14, 2011

membuat menu vertikal pada blogspot

tambahkan gadget pada blog

berikut ini kode buat gadget baru di buat:

<center><div id="menu">
<ul>
<li><a class="current" href="http://k-blogger1.blogspot.com/">home</a></li>
<li><a href="http://about.com">about us</a></li>
<li><a href="http://google.com">Google</a></li>
<li><a href="http://wikipedia.com">Wikipedia</a></li>
<li><a href="http://k-blogger1.blogspot.com/2010/01/contact-me_14.html">contact us</a></li>
</ul>
</div></center>
<style>

{
margin:0;
padding:0;

}
#menu{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdYUj5nIUtqfBITt6SNFOBOqt0Mj7gVW9C2QOdHzYr9jUl0Ffof_CvtTBtbRXbUNLZ0OzwrnKL-ngUeVhrIUyc850nNlb1UnzkAP7yXiGm0La6fK80Q7Gi3AXZHLUtv_m73i6Dhg_oyI8/s1600/menu_026_bg.jpg) no-repeat;
width:130px;
height:191px;
padding:15px;
}
#menu ul{

list-style:none;
padding:0 0 0 8px;
}
#menu li{
list-style:none;
display:block;
padding:10px 0;
}
#menu li a{

list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSpQaxUNu0_xXndB5o8gGjhH-WqcJ4cXnylGsbdTB6IAkCkJvhbuFN6fmBzSTx5D251eJm-k8l3E-GR9t2eDZp7SsfBTX8QphR7dbChcWOOFYArtVWM1iWeG2-gPYzAZ1tDWATxxhuv0o/s1600/menu_026_b.gif) no-repeat left center;
color:#ffe991;
font-weight:bold;
text-transform:uppercase;
font-size:11px;

line-height:1.2em;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5BhlNOJxXqNzrU5OmJ8Hqs93sb9kBlJWgA20HxlZT8SjhKFrxzyr-hAAO9AmT4N1tD4FlIauVzTrSOMQBzzOuVYoQMikeAvn5G_cJt4rV3GE8GJtllmRy0QRQ4z3PcxK6j2CF7hdX3ys/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;

}
#menu li .current{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5BhlNOJxXqNzrU5OmJ8Hqs93sb9kBlJWgA20HxlZT8SjhKFrxzyr-hAAO9AmT4N1tD4FlIauVzTrSOMQBzzOuVYoQMikeAvn5G_cJt4rV3GE8GJtllmRy0QRQ4z3PcxK6j2CF7hdX3ys/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
font-weight:bold;
text-transform:uppercase;

font-size:11px;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a.current, #menu li a:hover.current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5BhlNOJxXqNzrU5OmJ8Hqs93sb9kBlJWgA20HxlZT8SjhKFrxzyr-hAAO9AmT4N1tD4FlIauVzTrSOMQBzzOuVYoQMikeAvn5G_cJt4rV3GE8GJtllmRy0QRQ4z3PcxK6j2CF7hdX3ys/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;

}
</style>


sesuaikan text warna biru seperti yang di mau

SAVE
OK

0 komentar:

Post a Comment

Followers