Blog Ping
Adsense Indonesia Adsense Indonesia Adsense Indonesia

Kamis, 11 November 2010

Membuat menu vertikal cantik

Sebelum anda mencoba membuatnya ada baiknya anda melihat screenshot contoh widgetnya:



cara membuat memasang menampilkan Vertikal vertical tegak link bar  Menu Cantik pada Blogspot blogger


Apakah anda tertarik?


berikut caranya:


1.Masuk dasbor


2.Pilih rancangan ->> elemen halaman


3.Klik tambahkan gadget ->> Kemudian pilih HTML/Javascript

4.Berikut codenya:



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



/* --------------------------

AUTHOR : STYLED MENUS

URL : http://www.styledmenus.com

Copyrights by STYLED MENUS

Widget From http://www.ardi33.web.id/

----------------------------*/

*{

margin:0;

padding:0;



}

#menu{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKrmv6Mp98pW9qkeiHlx_YusFERBTBZZxEdbp_H-bPh4KT30WsbEmpITVPnF0kxD2f5FG8ZkeiHPCw493YVgEQBSDOth7vIsI5-nDmCVa2j0Fi1dkgKqEOPV4i0tN5SgV9cJQZcvoTaj4/s1600/menu_026_bg.jpg) no-repeat;

width:172px;


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/AVvXsEgvVDybdsD5T99-uo-5mJ03bQe_FrYM4qU13I0iS_4GhPVRx7B2DWfcTPfFqN5wKXR3dk6IAs0wi0n-8PEx-I3N7-kHVEtwNRgEExlRFEUXjTjTpRzYLJC2zGniQfVoeUOy43Yh0ec6FmI/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/AVvXsEiQqV8UFDwUCLg4ZzQj14ce12NXrOCr3FtL4DyWXhYz3wwhvBpZbKZn9E3KxF7Cqiq4_ucOXu2POeVL4rS8V_I2dt4RFg3ip7SwdU-OgiIGLcRaOhbZdmHTucfTmmTKSzv2PrhHliGpYl8/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/AVvXsEiQqV8UFDwUCLg4ZzQj14ce12NXrOCr3FtL4DyWXhYz3wwhvBpZbKZn9E3KxF7Cqiq4_ucOXu2POeVL4rS8V_I2dt4RFg3ip7SwdU-OgiIGLcRaOhbZdmHTucfTmmTKSzv2PrhHliGpYl8/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/AVvXsEiQqV8UFDwUCLg4ZzQj14ce12NXrOCr3FtL4DyWXhYz3wwhvBpZbKZn9E3KxF7Cqiq4_ucOXu2POeVL4rS8V_I2dt4RFg3ip7SwdU-OgiIGLcRaOhbZdmHTucfTmmTKSzv2PrhHliGpYl8/s1600/menu_026_h.gif) no-repeat left center;

color:#fff;

text-decoration:none;



}


</style>