How To Modify Blog Horizontal Menu Into Animation

Just like I promised in the previous post that I will talk about how to Blogspot tutorial, this time let's talk about modifying the horizontal navigation menu into animation navigation menu. And yes to those who like to have navigation menu in the animation atmosphere could follow the instructions written here.

An interesting blog's look and dynamic design will grab the visitors's attention. Beside that will satisfy ourselves for having a blog with all features and designs modified by us. From a simple blog's appearance into the look we want Today we will be animating our horizontal menu. Please see the following picture to get the picture of the topic I am talking now.

To those who like to modify their template will not find it hard to follow the instructions here. Because it's simply easy.

How to modify blog horizontal menu into animation

Step 1. Login to your Blogge.com.

Step 2. Inside Dashboard go into Template, then find this tag ]]></b:skin>, then paste the following code above the ]]></b:skin> tag.

.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/AVvXsEj-S8Y7Z1mXsl1CoxeyBZ-UXeNZ9pqNOIwxtK7TSRg5VGCh0KQ6gdWiBJwtXbr0Y64Y-BKnUIU7PHeYtul5-kMuIiOSGhowGBMh5qHJ3I10fCe0EVoe7nwe-0_5N3JllwkBvWYN3KiJKbs/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/AVvXsEiyu19lsTF_fdPfo_cN3VA6ONOmKxJWFO5xmnNciJ7f-oYeQ5nAjRzfDLgb1vk1xb17mgfi6EYzzpMuWOc-0k7hsAhbfIL5Nb8NsL5CnT6bPV5-abRIVsAlWUGvzoAeGsm6jRdp-UR4QII/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; 
}

Step 3. Now add the following HTML code right / or below this tag <div id='header-wrapper'>. You can also add it into the Widget in the Layout area.

<div class='animatedtabs'>
<ul>
<li><a href='https://tilbit.blogspot.com/' title='Home'><span>Home</span></a></li>
<li><a href='https://tilbit.blogspot.com/search/label/blog' ><span>Tutorial Blog</span></a></li>
<li><a href='https://yourblogname.blogspot.com/search/label/SEO''><span>SEO</span></a></li>
<li><a href='https://yourblogname.com/search/label/wp'><span>Wordpress</span></a></li>
<li><a href='https://yourblogname.blogspot.com/search/label/aff'><span>Affiliate</span></a></li>
<li><a href='https://yourblogname.blogspot.com/search/label/hosting'><span>Hosting</span></a></li>
</ul>
</div>

Now save your template and done!