Membuat menu horizontal dengan variasi tab animasi

Membuat menu horizontal dengan variasi tab animasi ,Membuat menu horizontal dengan animasi tentu akan sangat menarik, kali ini kita coba membuat menu horizontal dengan animasi tab.

sample - blog

jenis menu ini hanya untuk single line, tidak ada drop menu.

Kita langsung ke TKP saja biar jelas
Langkah Pertama

• Login ke akun Blogger kamu.
• Dari halaman dashboard, pilih Edit HTML.
• Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
• Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut.

   .animatedtabs{ border-bottom: 1px solid gray; overflow: hidden; width: 100%; font-size: 14px; /*font of menu text*/ } .animatedtabs ul{ list-style-type: none; margin: 0; margin-left: 10px; /*offset of first tab relative to page left edge*/ padding: 0; } .animatedtabs li{ float: left; margin: 0; padding: 0; } .animatedtabs a{ float: left; position: relative; top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */ background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/tab-blue-right.gif) no-repeat left top; margin: 0; margin-right: 3px; /*Spacing between each tab*/ padding: 0 0 0 9px; text-decoration: none; } .animatedtabs a span{ float: left; position: relative; display: block; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/tab-blue-right.gif) no-repeat right top; padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */ font-weight: bold; color: black; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ .animatedtabs a span {float:none;} /* End IE5-Mac hack */ .animatedtabs .selected a{ background-position: 0 -125px; top: 0; } .animatedtabs .selected a span{ background-position: 100% -125px; color: black; padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */ top: 0; } .animatedtabs a:hover{ background-position: 0% -125px; top: 0; } .animatedtabs a:hover span{ background-position: 100% -125px; padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */ top: 0; }  

Langkah kedua

1. Klik Page Element
2. Klik Add Gadget
3.  
   
4. Klik plus button (+) for HTML/JavaScript. (img)
   
   
   
5. Copy and paste kode dibawah ini
   

   <div class="animatedtabs"> <ul> <li><a href="#" title="Home"><span>Home</span></a></li> <li class="selected"><a href="#" title="Menu"><span>Menu</span></a></li> <li><a href="#" title="Profil"><span>Profil</span></a></li> <li><a href="#" title="Contact"><span>Contact</span></a></li> <li><a href="#" title="Tools"><span>Tools</span></a></li> <li><a href="#" title="HTML"><span>HMTL</span></a></li> </ul> </div>  
Simpan dan lihat hasilnya.


________________________________________________________

Ok.. Selamat mencoba..!

Semoga bermanfaat....!!

Sumber : http://kibagus-homedesign.blogspot.com/2010/02/membuat-menu-horizontal-dengan-variasi.html#ixzz1v33bpE2Z