Cool Css Tab Menu For Blogger

By : Follow Trends

On : 9/02/2015

In : Blogger Tips

0 comments

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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrCQBaP9uNLyi1DNw4LFSFbr1nen7kk6nQiuA018DmDWe5BUn-hZVMZCTMptFeEjAYm8-bHNr6uEjHJdFX4tPZ-Z2LLaDjHYqHmiwd3AqNmhLuOOEajSxCjM68N4bOQuUX3RXAFyJedwHi/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7dP-Tmg4P4cUPbrzvrqnHKfhAAJbfzEzV3Ld6uZOu3e1jDe1NAuw1MEejQeCTNeMuiU_pZgRLLdu_xzlrA7pvtf2Ue6oFIClLrMRBlo85wYzrf-tvOSZKccOm9DyfyCCrSf7bJ36mHNqi/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'

7. Paste below one of below code.

<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>

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

7. Now save your template
 you are done.