Saturday, July 28, 2012

How To Add Attractive Menubar With Icons For Blogger

This is a another nice menubar for your blog.
Its look very attractive. because it include with
icons.So , if you want to make a attractive blog.
you can add this cool menubar for your blog.
you can do it with easy steps.Earlier i created
more horizontal menubars, click below links to
view all. most of are include with demo.

Menubar Collection


DEMO

1. Log in to blogger account and Go to Design >> Edit HTML

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

/*menubar by bloggertrix.com */
#bloggertrix-bar{
margin:10px;}
#bloggertrix-bar .link a{
float:left;
padding:8px;
background-color:#eeeeee;
display:block;
margin-right:9px;
text-decoration:none;
-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;
font-family:Tahoma, Geneva, sans-serif;
font-size:15px;
color:#666;
font-weight:bold;
text-shadow:1px 1px 1px #fff;
}
#bloggertrix-bar .link a:hover{
background-color:#d2cece;
text-shadow:1px 1px 1px #fff;
}
/*menubar by bloggertrix.com */

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

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

<div id="bloggertrix-bar">
<div class="link">
<a href="Link"><img align="absbottom" alt="" border="0" height="16" src="http://4.bp.blogspot.com/-6pKneIlZSI4/UBP2JEu69WI/AAAAAAAABB0/oMfpAIXWy1Y/s1600/www.bloggertrix.com_home.png" vspace="0" width="16" /> Home</a></div>
<div class="link">
<a href="Link"><img align="absbottom" alt="" border="0" height="16" src="http://2.bp.blogspot.com/-Z3HELjpFW_A/UBP2HgINN4I/AAAAAAAABBk/c9hxJ7lyw40/s1600/www.bloggertrix.com_contact.png" vspace="0" width="16" /> Contact</a></div>
<div class="link">
<a href="Link"><img align="absbottom" alt="" border="0" height="16" src="http://4.bp.blogspot.com/-rNMh1B2h-oM/UBP2D8fcufI/AAAAAAAABBM/fRgmahQSrWA/s1600/www.bloggertrix.com_+Help.png" vspace="0" width="16" /> Forum</a></div>
<div class="link">
<a href="Link"><img align="absbottom" alt="" border="0" height="16" src="http://1.bp.blogspot.com/-neDobFC5fBs/UBP2IaUTXfI/AAAAAAAABBs/rp7iIXMP5JA/s1600/www.bloggertrix.com_design.png" vspace="0" width="16" /> Advertise</a></div>
<div class="link">
<a href="Link"><img align="absbottom" alt="" border="0" height="16" src="http://1.bp.blogspot.com/-5HOkvEdwU_8/UBP2GJatn2I/AAAAAAAABBU/ecrr8x3z2eg/s1600/www.bloggertrix.com_001.png" vspace="0" width="16" /> Rss</a></div>

<div class="link">
<a href="http://www.bloggertrix.com"><img align="absbottom" alt="" border="0" height="16" src="http://1.bp.blogspot.com/-QT9d7xUEQzk/UBP1_TSVm9I/AAAAAAAABBE/ZhaOhtuPZkQ/s1600/www.bloggertrix.com-add.png" vspace="0" width="16" /> Add This</a></div>


</div>

*Replace Link With your URL
*Replace Names with as your like.

7. Now save your template
 you are done.

0 comments:

Post a Comment