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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLxVKBXlv8Rjyozr9cirid9wu_Gyd6r6ZRRXtnqiq4uF2a8yhH6AOiFMm_nNIG76XoByHDfPFnxrgH4JlBC_LCrB6wJbpQkpDZFPlXoiuhJy96gIOEBUvdN06Z7HfZOWzWsTltMf-d5iM/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn_s0p_UjqmXQGm-T3OZa9kH057YHee1vTZ0HcvUyUEclIvxAw2TD_8FX4UwnXFBM_NSKjCXQwOChPKaAE2jNlymG6vRtjBQx7YgcXdxcHDH5UveiD_Zrz9Nioh89Wg5RuUQQFt8RBKQs/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKIwGz4u-pou87VvnBT_ULGS5ybFFy1a6OdYP6PUPSURd30OfR1x9qz2X3opJl_Lh021pQr7dIkYBlCq2w26XDbl8v_JKsSdpituox_FqbZ7ykY8EJrbyBMkDAnVEUKl6uLNiaPaQv32o/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEqrIuc7hf5vXjDOCRM3SpdE7vo4ctDwC_Isd9Qw4b7KOYyFogya_mv9bACGhokHt00Ya3nFhejKBIk_KMDdNfSV5fQ7cxJoSre_D2g_x3y0u7S7pcTZgiaQCSA3uYB22IAgDYswoFpmU/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFujyMfJVdNXDtGEngyCulK5_BHoH9CKjGtlAkgFoOhwEjR19gJebB4D6Xh6k_JxjJQIPgqMm0qUIhwjQ-Nj1fSe44YFC8OZYpVMqcadfOXFitPLKz1GJfm-G72pVJmI_sDtV-l6p-znU/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZKNP2On3dfx-xvGDHsVGjUEMMpsQVGQonpBg2RYvHZblF6TvQNIYrW5XDZjhvOZQHe4j2afs9Gd2oiIfb-8WPO-Ex-S7YSLS5o9fvWb7MpuTsEfkXKlNQK38J5AlM2CK23692IXxdP9U/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