Place Your Ads Here 460x68 ads

Cool Css Tab Menu For Blogger



Demo

1. Log in to your blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F    </head>

4. Paste below code Before </head> tag

<style type='text/css'>
#tabs28 {   float:left;   width:100%;   background:#EFF4FA;   font-size:93%;   line-height:normal; border-bottom:1px solid #DD740B;   }
 #tabs28 ul { margin:0; padding:10px 10px 0 50px; list-style:none;   }
#tabs28 li {   display:inline;   margin:0;   padding:0;   }
#tabs28 a {   float:left;   background:url(&quot;http://4.bp.blogspot.com/-hvHIaD4m4Y4/TwNaU1SP3JI/AAAAAAAAAwI/aF2NmvKFeC0/s1600/slide-left.gif&quot;) no-repeat left top;   margin:0;   padding:0 0 0 5px;   text-decoration:none;   }
#tabs28 a span {   float:left;   display:block;   background:url(&quot;http://1.bp.blogspot.com/-InlQIQBn_UE/TwNaif5u_vI/AAAAAAAAAwU/SSr_8sYEd64/s1600/side-right.gif&quot;) no-repeat right top;   padding:5px 15px 4px 6px;   color:#FFF;   }
#tabs28 a span {float:none;}  #tabsI a:hover span {   color:#FFF;   } #tabs28 a:hover {   background-position:0% -42px;   }
#tabs28 a:hover span {   background-position:100% -42px;   }</style>


5. Now Go to Design >> Page Element

6. Click Add Gadget and select 'HTML/Javascript'

<div id="tabs28">
<ul>
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
<li><a href="#"><span>Link 8</span></a></li>
</ul>
</div>

7. Paste below one of below code.


*Replace # With your URL
*Replace Link with your any menu name

7. Now save your template
 you are done.



Sameera ChathurangaAbout Author Shoyab Khan

Blogger, MAC user, Apple Fan, Online Content Writer, Designer, Gamer, Programmer and Jovial Guy!. Like my Facebook Fan Page. Catch me on Twitter and Google+. Read more about Me and Www. Only4Everyone.Blogspot.com. Download Free Games,Download Free Software,Download Movies and Watch Online,Blogger Wordpress and Website Tips , Tricks ,Widgets,Templets, and many other Sources and Health Tips,Photo Gallery contact me

Thank You

0 comments:

Post a Comment

loading...
Related Posts Plugin for WordPress, Blogger...