Blog Ping

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(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXsev4OJbTI/AAAAAAAACBc/0EEtXs7ckkg/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(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseueLX9TI/AAAAAAAACBM/BQCk16wweRQ/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(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseuzcFbnI/AAAAAAAACBU/joYkQm6Lyns/s1600/menu_026_h.gif) no-repeat left center;

color:#fff;

text-decoration:none;



}

#menu li .current{


list-style:none;

display:block;

background:url(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseuzcFbnI/AAAAAAAACBU/joYkQm6Lyns/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(http://2.bp.blogspot.com/_4fVBL4fjrFI/SXseuzcFbnI/AAAAAAAACBU/joYkQm6Lyns/s1600/menu_026_h.gif) no-repeat left center;

color:#fff;

text-decoration:none;



}


</style>