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.
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.
<style>
.bt-menu{
border:5px solid #cd1000;
padding:0;
clear:both;
}
.bt-menu{
margin:0px;
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(http://4.bp.blogspot.com/-8JseZrmnajA/USNz2nWJMxI/AAAAAAAABPc/IdG_dPUX1L8/s1600/Bg.png)
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;
}
</style>
<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>
</ul>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.
This comment has been removed by a blog administrator.
ReplyDelete