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
5. Now Find this code by using Ctrl+F <div id='content-wrapper'>
6. Paste below code Before <div id='content-wrapper'> code
*Replace # With your URL
*Replace Name with as your like.
7. Now save your template
you are done.
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/AVvXsEhjLoWL2t0Y_wd4D2BGlRdas9d8xBCFGROXl1F7LFY9EtKnnhmusDc1watUBgY6yzd_2QgDnslSG9J2leJ73gStBGBVvIjByr18b8iK3l0Oh4mlwN_dP4za6wDIO0TXLMgmg28rKaCXHKrj/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/AVvXsEj8AWyLVzAXXLFHgZPAZ_7xo04psQNs7T7WaTus78ijNAHkRMesJqX5Lm2HP6HYrEdywDWVL3ZinuX15zjuA0vCqbEEJz27eeyTsHwuy1WC78PUjLcWM3GA-IQTWV5kkIvCaU4JkQRQpBuM/s1600/bgDIVIDER.gif") no-repeat top right;}
ul#saturday li a:hover{background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqX0tSdlYFZbV5J66QESXD9YE33haxwbLR0tZUvvXUTvRlk3dyKvMFzNi2JaSi7-r6oRkqiQiUxnED_Eiy2z5EwIRSND2BWftaHwMcUv1rKAzKOwzUADGtlVQsFIQIOo6it2WtBjiuwOMc/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/AVvXsEj5CD2bYhHvovevcLAH2Jowi7a_ObHXhorH5kmyGRo_oS4AKP8gOtWscOhNbbHNdNOvOQqDClEBGw0WaKl6sXdDZtprs0oNDojchdz6HhHT0ULw_Ky5KC9Z1k5V0l7rYKevKdPPuOfP4ksz/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.
0 Komentar untuk "Stylish Garden CSS Menu For Blogger"