In this post, im going to explain,how to
add simple css/html menubar with nice
style.You can add it to your blog easily.
I posted more menubar for bloggers, you
can check it from below link.Try it...
Menubar collection



DEMO

1. Log in to 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    ]]></b:skin>

4. Paste below code Before ]]></b:skin> tag

ul#saturday{margin:0;padding:0;list-style-type:none;width:auto;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKeh_PCI_kObyno9CcNTxYeHrHXWiJe7iHPNtJRNLeRlhWcDWLW1PeKZQF40h4i6a3hW5JNy7COmFT1pv6e3NrUSntb_HAJbc_fRvcsJ7sc0Tb0v-CQufcS4VzWB-OYPxRucKOcmUOkM6g/s1600/bgOFF.gif") repeat-x top left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px solid #336666;border-top:1px solid #C0E2D4;}

ul#saturday li{display:block;float:left;margin:0;pading:0;}

ul#saturday li a{display:block;float:left;color:#874B46;text-decoration:none;padding:12px 20px 0 20px;height:24px;background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVRc_MmSfXU_JTQ75OuqWRZxu8Ow9qoq_NRiX_BJMCAOtNw_a8LutKuE9EHUB6iy4PspKDxoMSAs-IJPTC13YefF_B8k8Szhu02gIgZupm2AwmHqsXzbkd9AfrV5q4a-HW3ZnOXUBxB0e1/s1600/bgDIVIDER.gif") no-repeat top right;}

ul#saturday li a:hover{background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizgZ_AHHdXcT3w7VWZxAYSANm8RzrfcWG9Yeby9kti8wVtx1UUgHY5J0TsxOvOdXtwgQaSho6gHqBXnDQfh_1QFIrMVvwMEkrKAo1z27TmuAe4qOds2QS75Tp3UNSf_m9WUF1VhzkPa-sG/s1600/bgHOVER.gif") no-repeat top right;}

ul#saturday li a.current,ul#saturday li a.current:hover{color:#fff;background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS5hcMnPfJL8fB_-8GX3T2anz1tBKe0uMjAsQQDsuCVS2S4wBGiD6a_Ngb-MNsrQzwz93I8LYFQ3ZEK8zu2geBP25csxYvjfxLDaH1Ih5e0QYapVmFXn4cTkJWlKEfdHd9XAcm4aIGE6i3/s1600/bgON.gif") no-repeat top right;}

5. Now Find this code  by using Ctrl+F <div id='content-wrapper'>

6.  Paste below code Before <div id='content-wrapper'> code

<ul id="saturday">
 <li><a href="" title="">Home</a></li>
 <li><a href="" title="">About Us</a></li>
 <li><a href="" title="" class="current">Services</a></li>
 <li><a href="" title="">Our Work</a></li>
 <li><a href="" title="">Contact Us</a></li>
        <li><a href="http://www.bloggertrix.com/">Addthis</a></li>
 </ul>      

*Replace # With your URL
*Replace Name with as your like.

7. Now save your template
 you are done.

Related Posts

***