Saturday, 28 July 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/AVvXsEicAFvpOS_mVUdfJUmyf5Z2fNjKgdiJ7FzNe4Ob1A6AXqhjpGyiwktmXp83SZFIvjF_tkxox7gbWJvadEakLL96qLFq2lYwwmh1MYvG3C-W71kgDKfqluPi30dyuEHjAjJ7MnU5ZjlwZqg/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/AVvXsEieLVI0K4KjgrqOd_tlvSYJ-F0yaPJxGQzkJw9JUwjX59HLds5AHLwarmc7LehKNnrV4tEmBW0AK7Vw7HwD_IsPPIoO7PeMPZkIyIf_xGq-lg1TIxupRt_f6CwIuceFoChgVC1fnbSFMDA/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/AVvXsEgF62y5JBrl7kwF4zjD6hEgaTZiZu0VHIeio55IppOF0Sz6XpDZxF_HQtveeZiUEAvOgz18PYDMtzZVGxBzAdwIh5qHYnmlL9oXtpRfpCORiDE3x5Vto_KoqB7tVkOXPIONGEcMYcZI0TM/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/AVvXsEi1Q-ZIwp1kJ5Jtp_l9AhD8bNSq2faT2VE5DZ-lj0GfSSOkKP4PI7lVUA3dtMqSMV2iHxINTYwODGmLzZmvQVFC4QHP04HAGE0aOhoNuPtmP-91i0efsDtNmOimA62JIxBIwPJaNzcV1JI/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/AVvXsEiksGClr_tDLlWKAih2f7WwCZne196kZ0amlGev20nQG5WlpjNuSCraugbk1Rpy4_oNIfADmRbi0HE9lQ0gazk-rZoJGeU98ZY_uLWWyToSHaLLkPBjGoeJM4_ZeOl531qTfEB8XIrUR3I/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/AVvXsEhG1MdKLFPm1T8ZAE3EfGNts3Kx-HyjpJPQBjit20T7k4vMWlS08frq_ksxqPnkhCYIctBlRRt8hzzvY6B-H93zLU4Z7axclvogzM1ACu5jU6PViY0mKjsoBfLGaEaZ4QgSwx55V66J5o0/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.

No comments:

Post a Comment