Tab menu horizontal dengan animasi terbaik 2013

Postingan kali ini masih akan mengetengahkan tutorial modifikasi tab menu pada template blogger. Sebelumnya sudah ada beberapa postingan tutorial cara membuat tab navigator horizontal mulai yang paling sederhana dan yang dilengkapi dengan 30 macam widget tab menu pilihan sampai drop down dengan css dan drop down dengan JQuery, maka kali ini saya coba mengetengahkan tab menu horizontal dengan animasi. Untuk tab menu animasi juga banyak pilihan, untuk mencoba yang paling sederhana seperti screnshoot dibawah ini, silahkan ikuti tutorial berikut:
Tab Menu navigator Horizontal Animasi

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan kode CSS berikut diatas tag ]]></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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibbDsKyKgY-Zhvd4z8eZvpLRBoCaD4BCyj1VogvSWKyN0aa7CvJoMMNXnnvTL5-EjKotNYKfiAdkxZ0VwFYYrphMbXpmdayAyKd08AbmcC7kqZrUQQLOifhD-S7_nNvygAtySuvJXy4xI/s320/tab-blue-left.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD5G1C5ig2wb-TJpVq9TpZsHhlVNenkp2ljtqePhfgN69MM3uMVc8UOdjBlL5lytXJCG7P_Op_GtP05BmJp0C_QGm4LjeDaOOIxlQokS7AM4eaK3eQMQHjMmDEs4hDMSSL4oDrN_UOa98/s320/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;
}

Sumber Artikel: tab menu horizontal dengan animasi terbaik 2013 | Kuansingfoundation.blogspot.com http://kuansingfoundation.blogspot.com/2013/02/tab-menu-horizontal-dengan-animasi.html#ixzz2LLUrxhrV
Under Creative Commons License: Attribution Share Alike

3. Tambahkan kode HTML berikut diatas atau dibawah <div id='header-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget

<div class='animatedtabs'>
<ul>
<li><a href='http://www.amatullah83.blogspot.com' title='Home'><span>Home</span></a></li>
<li class='selected'><a href='http://amatullah83.blogspot.com/search/label/Widget' title='Blogger Widgets'><span>Widgets</span></a></li>
<li><a href='http://amatullah83.blogspot.com/search/label/Modifikasi%20Tab%20Menu' title='Modifikasi Tab Menu'><span>Modifikasi Tab Menu</span></a></li>
<li><a href='http://amatullah83.blogspot.com/search/label/Variasi%20Icons' title='Variasi Icons'><span>Variasi Icons</span></a></li>
<li><a href='http://amatullah83.blogspot.com/search/label/Background' title='Background'><span>Background</span></a></li>
<li><a href='http://amatullah83.blogspot.com/search/label/Blogger%20Templates' title='Free Blogger Templates'><span>Blogger Templates </span></a></li>
</ul>
</div>
Sumber Artikel: tab menu horizontal dengan animasi terbaik 2013 | Kuansingfoundation.blogspot.com http://kuansingfoundation.blogspot.com/2013/02/tab-menu-horizontal-dengan-animasi.html#ixzz2LLV4NhHi
Under Creative Commons License: Attribution Share Alike

4. Simpan template dan lihat hasilnya.