1. Login to your blogger.
2. Go to template design.
3. Edit HTML.
4. Download the full template for back up so if you making any unexpected thing when modifying your template you can set it back to the old template.
5. Tick the small box titled "expand template widget" above the box for the template code. This is to expand / load the entire html code.
6. Among the template code should be there a tag (or just say it a "code") ]]>< / b : s k i n>. Just above that tag put the following code:
To be the lesser arrangement the above code looks like the following: /* Navbar start */
a.b urastabs,
a.bu rastabs:link,
a.bur astabs:visited
{disp lay:block;
width:100px; height:25px;
bac kgro und:#00a0ff;
borde r:0;
m arg in-top:1px; text-align:cen t er; te xt-d ecoration:none; fo nt-fa mily:arial, sans-serif;
f ont-s ize:12px; font-weight:bold
color:#ffffff; line-height:25px;
overfl ow:hid den;
floa t:left;}
a. bura stabs:hover
{co l or:white;
background: # 00a0ff;}
# b u r a s b a r {width:auto;
margin:0 auto;}
/* Navbar end */
7. After, look for code < b : s e c t i o n class='header'
i d='header' maxwidgets='1' (could be set 0, 1, 2, or even higher)
showaddelement='yes'>. If the value for the "showaddelement" is "no", then make it yes (showaddelement='yes'). And change the value for maxwidget just like what you want. Yet, don't get it 0.
8. Save your change and go to the template design page.
9. You should find a "add element" button above the header column. Click on it.
10. Click the "Html / Java script" widget and insert the following code:
To be the lesser arrangement the above code looks like the following: < div id = 'bur asbar'>
< a href = " # ">Home< / a >
< a h r e f = " # " class = "b urastabs">Mobile View< / a >
< a h r e f = " # " class = "burast abs">Posts List< / a >
< a h r e f = " # " class = " bu rastabs ">Sitemap< / a >
< a href=" # " class = "burast abs " >Language< / a >
< a h r e f = " # " class = "bura stabs">Link Exchange< / a >
< a h r e f = " # " class = "bura stabs ">Contact Me< / a >
< / d i v >
11. Save the widget.
12. And you are done.
Annotation
1. To modify the button size change the value for attribute width and height in the code 1 (width:100px; height:25px;
and the "line-height:25px;).
2. To modify the background color change the value for the attribute background (background:#00a0ff;
)
3. Replace the "#" accents in the code 2 with your own url.
4. Replace the home, language, mobile, and so forth, with any title that you want to appear on your header.
Well, that's all everybody. Supposing that you got any question, please feel free to post your comment about. I don't mean to make pretense to any expertise, but, i think the exact expression for me to say is "I would never say i can't help you.. :D
0 comments:
Post a Comment