cara membuat tab menu berbentuk animasi

Untuk tab menu animasi juga banyak pilihan, untuk mencoba yang paling sederhana seperti screnshoot dibawah ini, silahkan ikuti langkah berikut:

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/AVvXsEgu5GOjb-fbkRshefW44XttXD-mm3cOFML9SlOkerhrEqZiBnfJitFW7tvwWHSuDs73Pkl60Sb5Iwrp8obHLVO16fbhLlwC3kjh1efQOd4XBHY824G8QDCVoLreeLYpI31sX08vY__64To/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/AVvXsEiZg4OvFGuw2AJjTMCk54GLHOSJq-3ADKmHM9uq7AjPsc5fv16fk8EQyjPFCrayzxLHUrq0ywj3x5C8O1N7ymZK3-tsvYHeUkdOCaCo5fGp3NsDoZ3XA5ZqBhpSPOkmb5fnrf3rK5KskDY/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; 

}

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>