Cool Css Tab Menu For Blogger

This Tutorial will explain how to add cool CSS menu bar for
 your blogger.I made demo for this tutorial. You can see it
by clicking below link.


Demo Here

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/AVvXsEipVF4Zewv4zkrr-1U5_3zBIjaXFesylSBneuy_JwoEdrCfvpLxflfdt0Pj3mbBFqpvfkW2LDg5Gah_YrLoOoss-LP1hqlquN7RaJzJ91obQ9CbLaq6WZ1uxyTqLGRVY1sRXFngfFPDo5iG/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/AVvXsEispb8-MOW92br8LhG6kQOOh4TdF40GN0Yp72Dujlroff_m22a8HWbJWZ5bgEOzwoRYBzViKip5Hzbp9NglFLWq_7Pv722_ZxAai-WqK7pktjiZyT5do9jtXM3XriR84tf0UHSd-gzNq0TC/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.