Menu Close Menu

Add A Animated Tab Menu To blogger

Animated Tab Menu For Blogger

A lot of people want Animated menus on their website but for the CSS novice this task seems impossible. If you do a search online you will find a few Animated methods but most of these rely on CSS hacks, JavaScript or non-standard CSS rules that are not supported by all browsers. In this post I'm going to show you my secret method of achieving Animated tabs that does not use any CSS hacks and will work in all the common web browsers. Previously I shared a Beautiful CSS3 Drop Down Menu and I will share a Super Cool animated Tab Menu For Blogger. Steps are very simple and Easy.


Live Preview


Add Tab Menu To Blogger

1. Go To your blogger Dashboard >> Layout >> Add A Gadget.

2. Scroll Down and find HTML/JAVASCRIPT>> Click on (+) and paste the below code in to the Content Area and click on save for more see video above.

border:5px solid #cd1000; 
padding: 0; 
float: left; 
font: bold 13px Arial; 
width: 100%; 
overflow: hidden; 
margin-bottom: 1em; 
border: 1px solid #333333; 
border-width: 1px 0; 
background: black url( 

center center repeat-x; 
.bt-menu li{ 
display: inline; 
.bt-menu li a{ 
float: left; 
color: #333333; 
padding: 9px 11px; 
text-decoration: none; 
border-right: 1px solid black; 
.bt-menu li a:visited{ 
color: #333333; 
.bt-menu li a:hover, .bt-menu li a.selected{ 
color: #333333; 
background: #00A0E3; 
<ul  class="bt-menu"> 
<li><a href="#">Home</a></li> 
<li><a href="#" >About Us </a></li> 
<li><a href="#">Contact Us</a></li> 
<li><a href="#">Tools</a></li> 

The widget is easy to be edited. To change links title simply replaced the text with your page titles and replace the hash sign (#) with Your Pages links.  Click save and Done.

if you have any Problem post your comments below in comment section. Check out our other Dropdown Menu. Thanks for reading our post .  happy blogging.

"Be the first to express your thoughts" :

  1. This comment has been removed by a blog administrator.


Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name. We love to hear from you! Leave us a comment.
To ensure proper display, HTML/XML/JavaScript need to be Encode first using this Encoder Tool Then paste the Encoded code here.