Membuat Animasi Menu Horizontal di Blog

Kali ini saya akan memberikan sebuah informasi mengenai cara Membuat Animasi Menu Horizontal di Blog. Mungkin bagi anda yang ingin tampilan blog anda menjadi lebih menarik dan pengunjung pun bisa betah untuk berlama-lama berada di blog anda.  Bagi anda yang ingin melihat tampilannya secara langsung silahkan menuju kesini. Langsung aja saya kasih scriptnya :

       1. Login ke Blogger
       2. Kemudian pada Dashbor klik Template lalu Edit HTML
       3. Letakkan kode berikut diatas tag ]]></b:skin>:

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/AVvXsEiwT_qH10YpiYg6DhZguyGdI_nV7luSEYx7XAtAgfKNyvStaTw5n4YBwJLf7fbo3MxZXKQebmAujq98k9gXETwmp4M3nZssR8UPWLsrQ32ThCfVDgSm5bWllofgxh-H0Q25U5Enal7ZncY/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;
}

       4. Tambahkan kode berikut dibawah <div id='header-wrapper'> atau di atasnya juga bisa, atau juga bisa anda tambahkan pada elemen widget.

 

<div class='animatedtabs'>

<ul>

<li><a href='http://creatingwebsite-maskolis.blogspot.com' title='Home'><span>Home</span></a></li>

<li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/tutorial blog' title='tutorial blog'><span>Tutorial Blog</span></a></li>

<li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/SEO' title='SEO'><span>SEO</span></a></li>

<li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/wordpress' title='wordpress'><span>Wordpress</span></a></li>

<li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/affiliate' title='affiliate'><span>Affiliate</span></a></li> 

<li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/hosting' title='hosting'><span>Hosting</span></a></li>

</ul>

</div>

       5. Simpan template dan Lihat Hasilnya

        Mungkin hanya ini dulu ya teman-teman, cara ini juga saya dapat dari blog nya Maskolis. Jika teman-teman kebingungan silahkan tinggalkan komentar dibawah ini.