WIDGET MENU VERTIKAL CANTIK |informasi apa saja

Minggu, 06 Juni 2010

WIDGET MENU VERTIKAL CANTIK

6/06/2010 05:13:00 AM |

Diposting oleh Unknown |

Dengan melihat screenshot atau contoh widget ini, apakah anda tertarik untuk membuatnya? Menu ini bisa juga disebut sebagai vertical menu bar. Widget ini dapat membuat blog anda semakin cantik karena tampilan warnanya yang sengaja dibuat ceria. Berikut gambarnya:

Pemasangannya sangat mudah. Ikuti langkah berikut ini:

Login - Dasbor - Layout/Tata Letak - Elemen Halaman
Klik Add Gadget/Tambah Gadget pada sidebar anda (sangat direkomendasikan)
Kemudian pilih HTML/Javascript
Taruh kode berikut di kolom content:

<center><div id="menu">
<ul>
<li><a class="current" href= "http://earning-news.blogspot.com ">home</a></li>
<li><a href= "http://rgnomotto.blogspot.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://2358-team.blogspot.com/">contact us</a></li>
</ul>
</div></center>
<style>

/* --------------------------
AUTHOR : STYLED MENUS
URL : http://www.styledmenus.com
Copyrights by STYLED MENUS
Widget From http://2358-team.blogspot.com/
----------------------------*/
*{
margin:0;
padding:0;

}
#menu{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiF17sMaNhVQtHheT4-V7sYfo5dwoS9DZhP2eGpeZPQvRvivVDGObl7qHDYziXmhUCucXTEabxEyRsUU9yt1SqvnPsULgInuboUY_4rmkItmq3yB7O698j8_6yq1hTwB5t6ptqRT_4fLc/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/AVvXsEjTLV1kNR-ltX1I57-U79MaO1LxBasRETYxOH7Y4x4K59CLaVPtWoAwVlme0Y0l2bvlFt-5TgJVYT1sEjHJs4Of3ehQxFKn7WH7NiDcXvrzpZVYJV4MpSuQW3MMWUhOz85wpwNShsgZfxM/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/AVvXsEiCz20HXoIjM5pGyNsRW_ixG0tczLNPSKZ5D1tSAt3maHqE1X-3h8pdkamfMpAL5f22D2aMmOZ48kIypOfpkhHbGIv810e3Afn0TilrgApefKCAM0EgXtGmeDQhtOXkMoBu9VJsf2x43Rg/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/AVvXsEiCz20HXoIjM5pGyNsRW_ixG0tczLNPSKZ5D1tSAt3maHqE1X-3h8pdkamfMpAL5f22D2aMmOZ48kIypOfpkhHbGIv810e3Afn0TilrgApefKCAM0EgXtGmeDQhtOXkMoBu9VJsf2x43Rg/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/AVvXsEiCz20HXoIjM5pGyNsRW_ixG0tczLNPSKZ5D1tSAt3maHqE1X-3h8pdkamfMpAL5f22D2aMmOZ48kIypOfpkhHbGIv810e3Afn0TilrgApefKCAM0EgXtGmeDQhtOXkMoBu9VJsf2x43Rg/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;

}
</style>

Ganti tulisan berwarna merah dengan data anda dan yang berwarna biru adalah URL gambar, jika anda menginginkan gambar yang berbeda, ganti saja dengan gambar milik anda.