This is a attractive menu bar to your blog,
This tutorial will helps you to add it to your blog.
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 your any menu name.
7. Now save your template
you are done.
This tutorial will helps you to add it to your blog.
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
#btrixbar {width:100%;margin-left:-40px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTe58cs7mOoNynqcuZ2xTkxNNpr8wY4x1mYlNbYsSsKclp9i863okJAYxtEGZzIAaeBym9PColIw4HYByEvJ1TVmVK8YX2DtilaiQDvTKbHerGRNtIl-E6j7lczJijvK9VbDVp4LTmJjzO/s1600/btrixmain.jpg) repeat-x;} #btrixbar li {float: left;display: block;} #btrixbar li a {float: left;display: block;padding: 12px 18px 12px 18px;text-transform: uppercase;text-decoration:none;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqjU6s4jhT2G-kKTvAqaoqpsZvEW49dFMWDWOBBZJ4OWlj4WBUPddH5M0U55VoxdgBf2NIxVTUp5_vasvyBpiWZwBymW3DWik5PQIhAV3W0vOMfQwq73Z5H3YEDWTIXuPEXF3MWSoX-FZk/s1600/brix-bg.jpg) no-repeat top right;color:#ffffff;} #btrixbar li a:hover {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqjU6s4jhT2G-kKTvAqaoqpsZvEW49dFMWDWOBBZJ4OWlj4WBUPddH5M0U55VoxdgBf2NIxVTUp5_vasvyBpiWZwBymW3DWik5PQIhAV3W0vOMfQwq73Z5H3YEDWTIXuPEXF3MWSoX-FZk/s1600/brix-bg.jpg) no-repeat right -40px;color:#ffffff;text-decoration:none;} ul#btrixbar li.current_page_item a, ul#nav li.current-cat a {color: #fff;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqjU6s4jhT2G-kKTvAqaoqpsZvEW49dFMWDWOBBZJ4OWlj4WBUPddH5M0U55VoxdgBf2NIxVTUp5_vasvyBpiWZwBymW3DWik5PQIhAV3W0vOMfQwq73Z5H3YEDWTIXuPEXF3MWSoX-FZk/s1600/brix-bg.jpg) no-repeat right -80px;} #btrixbar li ul {display: none;}
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="btrixbar"> <li class="current_page_item"><a href="#">Home</a></li> <li><a href="#" title="#">Blogger</a></li> <li><a href="#" title="#">Comments</a></li> <li><a href="#" title="#">Themes</a></li> <li><a href="#" title="#">Forum</a></li> <li><a href="#" title="#">Download</a></li> <li><a href="#" title="#">Contact Us</a></li> </ul> <div class="clear"></div>
*Replace # With your URL
*Replace Name with your any menu name.
7. Now save your template
you are done.
I have learned more from you about blogger than anyone. I love your information. Some time I have to set up a nice looking blogger account to show off what I have learned.
ReplyDelete@Jackie Paulson
ReplyDeleteThanks for your comment jackie :)
Very nice post,love it
ReplyDeletewww.jobsonchoice.com