Selamat siang temanku yang baik, gimana kabar kalian sekarang ?? ngaa Tidur Apa..... hehe... pada betah blogging atau gimana nih >?? kalau begitu saya kasih trik yang menarik aja deh buat temen" yang lagi blogging. nih liat Screenshot'a ::
kalau masih kurang jelas lihat aja demonya di --->
Trik ini saya perolaeh dari hasil BW. hehe
Kalau merasa cocok dengan menu itu siahkan lanjutkan membacanya ya :
- Loggin ke Blogger.com
- Pilih Rancangan ~~> Edit Html ~~>Centang "Expand Widget Template"
- Jangan lupa Backup template'a terlebih dahulu .
- Letakkan kode berikut diatas kode ]]></b:skin> :
#menu li {
display: inline;
list-style: none;
padding: 0;
}
#menu li a {
border: 1px solid white;
padding: 15px 20px 15px 20px;
text-decoration: none;
color:black;
margin-left: -5px;
/* This is the background used for the animation */
background-image:
url('http://i785.photobucket.com/albums/yy131/djnand/MenuCokelat.jpg');
/* Align the background image position to the left of the link */
background-position: left;
-webkit-transition: all 0.8s ease-in-out;
/* Animation with transition in Firefox (No supported Yet) */
-moz-transition: all 0.8s ease-in-out;
/* Animation with transition in Opera (No supported Yet)*/
-o-transition: all 0.8s ease-in-out;
}
#menu li a:hover {
color: white;
/* Align the background image position of the background to the right*/
background-position:right;
}
<*> Untuk settingan'a silahkan utak-atik sndiri.
- Selanjutnya letakkan kode berikut dibawah kode <body> :
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
- Ganti # dengan link tujuan menu sobat.
- Trus Save. Edit menu tersebut sesuaikan dengan kebutuhan sobat.
Belum ada tanggapan untuk "Membuat Simple CSS3 Horizontal Menu"
Posting Komentar