Try the Most Addicted Game - Real Rocket Racing 3d Game

Sunday, March 6, 2011

Pin It

Widgets

Add Cool CSS Horizontal Menu to blogger

1.Login to your blogger dashboard--> Desing- -> Edit HTML

2.Scroll down to where you see ]]></b:skin> tag .

3.Copy below code and paste it just before the ]]></b:skin>  tag .





<style type='text/css'>
#tabs20 {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabs20 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs20 li {
display:inline;
margin:0;
padding:0;
}
#tabs20 a {
float:left;
background:url(&quot;https://lh3.googleusercontent.com/_u4rBCfM4eII/TW0BQP-Za1I/AAAAAAAABRg/qo2miP3LgzI/left.gif&quot;) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs20 a span {
float:left;
display:block;
background:url(&quot;https://lh5.googleusercontent.com/_u4rBCfM4eII/TW0Bf4JAY3I/AAAAAAAABRo/A9L0G25SDkA/right.gif&quot;) no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}

#tabs20 a span {float:none;}
/* End IE5-Mac  */
#tabsH a:hover span {
color:#FFF;
}
#tabs20 a:hover {
background-position:0% -42px;
}
#tabs20 a:hover span {
background-position:100% -42px;
}
</style>



4.Save Template

5.Now go to Layout-->Page Element and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.


<div id="tabs20">

<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>HTML</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>Java Script</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Privacy Policy</span></a></li>
</ul>

</div>



7.Now Click on Save Html JavaScript ,You are done.

0 comments

Post a Comment