A Menu bar is very useful feature ,which makes the blog more effective and attractive.
This touturial will help you to make a attaractive menubar as shown above.
STEP 1 : "SIGN IN " into your blog.
STEP 2 : the dash board will appear after signing in . click on "template" > "edit html"
STEP 3 : now the html editor will be apear . move the cursor in box and press " ctrl+F " >
a search box will apear in editor box.
STEP 4 : In the search box copy paste : ]]> </b:skin>
and hit enter, the term will apear click on dots(...)
STEP 5: after clicking on ...(dots) a long css code will appear . move
cursor down untill u find "]]> </b:skin> ".
STEP 6 : now paste the css code given below just above
"]]> < /b:skin>"
/******************from here*******/
nav{
display:block;width:1000px;
height:50px;
background:#d50000;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.5, rgb(213,0,0)),
color-stop(0.51, rgb(221,49,49)),
color-stop(1, rgb(234,130,130))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(213,0,0) 50%,
rgb(221,49,49) 51%,
rgb(234,130,130) 100%);
-moz-border-radius: 8px;
border-radius: 8px;
border:#c30000 1px solid;
}
nav ul{
display:block;
width:998px;
height:48px;
-moz-border-radius: 8px;
border-radius: 8px;
border:#ffb2b2 1px solid;
margin:0px;
padding:0px;s
}
nav ul li{
display:inline;
margin:10px;
padding:10px;
}
nav a{ display:block; float:left;
padding:0px 19px;
line-height:4em;
font-family:Verdana, Geneva, sans-serif;
color:white;
font-size:.73em;
text-decoration:none;
}
nav a:hover{color:#ffb2b2;}
/*********till here**********/
STEP 7 : Press CTRL F again and paste " <b:section class='header' " and you'll find the following code:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog (Header)' type='Header'/>
</b:section>
==> Change the value of maxwidgets to 3 or any value more than one, for
example: maxwidgets='3'
Change also the value of showaddelement to 'yes' or: showaddelement='yes';
and the value of locked to 'false' or locked='false'.
Thus, your new code should look like this:
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='yes' title='Your Blog (Header)' type='Header'/>
</b:section>
STEP 8 : now save the template and you are done.
STEP 9 : Go to LAYOUT and look for "Add a Gadget" at the header area.
STEP 10: click on add gadget Then, choose the HTML/JavaScript
gadget.
STEP 11 : now paste the given code in content box :
<nav>
<ul>
<li><a href="#"> HOME</a></li>
<li><a href="#"> PAPERS</a>
</li>
<li><a href="#"> NOTES</a></li>
<li><a href="#"> TEST</a></li>
<li><a href="#">SYLLABUS</a></li>
<li><a href="#"> ABOUT US</a></li>
</ul>
</nav>
note that : the list should not be greater than MAXWIDGET inputted in HEADER area .
IMPORTANT NOTE: Replace "#" with your URL. For example:<li><a href="http://iblog-master.blogspot.in">Home</a></li>
Then press Save arrangement.THATS IT ! YOU ARE DONE NOW RELOAD YOUR BLOG PAGE AND ENJOY!
Comments
Post a Comment