Cara Membuat menu horizontal dengan animasi

langsung aja ya gan, ikuti langkah di bawah ini:

1. login Blog
2. buka rancangan >> edit HTML
3. cari kode ]]></b:skin>  biar lebih mudah tekan 'ctrl F'
4. lalu taruh kode dibawah ini tepat diatas kode ]]></b:skin>

.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; }

5. simpan
6. buka menu elemen halaman
7. add gadget (pilih HTML/JavaScript)
8. masukkan 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>

<li><a href="#" title="HTML"><span>HMTL</span></a></li>
Ganti semua tulisan yang berwarna Merah, misalkan 
<li><a href="http://sahabattetta.blogspot.no/search/label/TUTORIAL%20BLOGGER" title="Tutorial Blogger "><span> Tutorial Blogger </span></a></li>

begitu seterusnya gan..
sekian dulu semoga bermanfaaat...