Monday, July 5, 2010
5:38 PM | 
Posted by
Sunil Bhaskar |
I had covered how to create static pages in my previous blog.Now lets take this to the next step and add pages directly into the template code.Many people have approached me saying that they are unable to place their pages as tabs below the header.In this section I shall give out a detailed guide where you can add navigation menu's which will be more appealing that the normal dull version.So first and Foremost go to your Dashboard >>Design>>Edit Html and tick Expand Widgets as shown below:
Now make a backup of your remplate by clicking on Download Full Template.
1) Now try to find this piece of code in your blog :
<div id="navibar-wrapper">
<b:section class="navibar_section" id="navibar_section" showaddelement="yes"><i>
</i></b:section></div>
<div style="clear: both;">
<i></i></div>
Then click on save template.
3)Now go to Design>>Page Elements>>Add Gadget below the header.Now click on add Html/Javascript element.Better leave the title box empty,as it wont add beauty and makes it look awkward.Now copy this piece of code into the text box:
Next Replace the title with the text you want to appear when the mouse hovers over it.The Tab must be replaced by the tab names(like about us ,contact us ) which you want to appear in the title.
4)Now For adding a bit more color & Features lets add Css.Now head over to Design>>Edit Html and add this piece of code just before ]]>(Use Ctrl+ f to find this):
/* Navigation tabs start */
a.navitabs, a.navitabs:link, a.navitabs:visited {display:block; width:145px; height:25px; background:'#e1ecfe';margin-top:2px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:'#0000ff'; line-height:25px; overflow:hidden; float:left;}
a.navitabs:hover {color:white; background:blue;}
#navibar {width:760px; margin:0 auto;}
/* Navigation tabs end */
Now after making all these changes your blog will now look like this(If you did everything as i had described):
5)Now lets try to Customize a few features in this so that we can make it blend it with our template(Actually in this case my template):
1)Background:'#e1ecfe' --> This is to merge my tabs with the background header blue color.
2)Color:'#0000ff' --> Is my font color.Change its value to the appropriate one you want.
3)a.navitabs:hover {color:white; background:blue;} --> They refer to the hover effects.Change this value as per your dersire.make sure you use contrasting colors.The color and background should be opposite.
4)#navibar {width:760px; margin:0 auto;} -->If you wanna increase the width or decrease adjust the values.
6)Attributes which you can add:
I ommitted a few attributes as it was making my title look bizzare.Incase you want to add more features,they you can add the following ones:
1)border:1px solid black; --> This adds a border of 1px of black color around the tabs.Incase you wanna change the color select the appropriate one.You can also change the border thickness by going for higher values than 1.
2)margin-top:2px; -->This docs the tabs 2 px down and gives a small space between the header and the tabs.
Incase you wanna know about more customizable features that can be added along with the ones i have discussed feel free to ping me.Trust me the list is never ending/I can even show you how to put \ flash tabs which could drastically improve the sites beauty multifold.But for now lets just be contended with this.happy tabbing.
1) Now try to find this piece of code in your blog :
div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=Your Blog Title(Header)' type='Header'/>
</b:section>
</div>
2)Paste the following code right below it:<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=Your Blog Title(Header)' type='Header'/>
</b:section>
</div>
<div id="navibar-wrapper">
<b:section class="navibar_section" id="navibar_section" showaddelement="yes"><i>
</i></b:section></div>
<div style="clear: both;">
<i></i></div>
Then click on save template.
3)Now go to Design>>Page Elements>>Add Gadget below the header.Now click on add Html/Javascript element.Better leave the title box empty,as it wont add beauty and makes it look awkward.Now copy this piece of code into the text box:
<!-- Navigation tabs start -->
<div id='navibar'>
<a href="Your page" class="navitabs" title=" title">Tab name</a>
<a href="Your page" class="navitabs" title="title">Tab name</a>
<a href="Your page" class="navitabs" title="title">Tab name</a>
<a href="Your page" class="navitabs" title="title">Tab name</a>
<a href="Your page" class="navitabs" title="title">Tab name</a>
<div>
<!-- Navigation tabs end --></div></div>
You can add upto 10 pages.Keep adding them if you want more of them.I use five on my site which is preferable.Here you need to replace your page with your blogger page address.You need to go to Posting>>Edit Pages>>And click on the View option of your pages.This will look like this:<div id='navibar'>
<a href="Your page" class="navitabs" title=" title">Tab name</a>
<a href="Your page" class="navitabs" title="title">Tab name</a>
<a href="Your page" class="navitabs" title="title">Tab name</a>
<a href="Your page" class="navitabs" title="title">Tab name</a>
<a href="Your page" class="navitabs" title="title">Tab name</a>
<div>
<!-- Navigation tabs end --></div></div>
4)Now For adding a bit more color & Features lets add Css.Now head over to Design>>Edit Html and add this piece of code just before ]]>(Use Ctrl+ f to find this):
/* Navigation tabs start */
a.navitabs, a.navitabs:link, a.navitabs:visited {display:block; width:145px; height:25px; background:'#e1ecfe';margin-top:2px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:'#0000ff'; line-height:25px; overflow:hidden; float:left;}
a.navitabs:hover {color:white; background:blue;}
#navibar {width:760px; margin:0 auto;}
/* Navigation tabs end */
Now after making all these changes your blog will now look like this(If you did everything as i had described):
1)Background:'#e1ecfe' --> This is to merge my tabs with the background header blue color.
2)Color:'#0000ff' --> Is my font color.Change its value to the appropriate one you want.
3)a.navitabs:hover {color:white; background:blue;} --> They refer to the hover effects.Change this value as per your dersire.make sure you use contrasting colors.The color and background should be opposite.
4)#navibar {width:760px; margin:0 auto;} -->If you wanna increase the width or decrease adjust the values.
6)Attributes which you can add:
I ommitted a few attributes as it was making my title look bizzare.Incase you want to add more features,they you can add the following ones:
1)border:1px solid black; --> This adds a border of 1px of black color around the tabs.Incase you wanna change the color select the appropriate one.You can also change the border thickness by going for higher values than 1.
2)margin-top:2px; -->This docs the tabs 2 px down and gives a small space between the header and the tabs.
Incase you wanna know about more customizable features that can be added along with the ones i have discussed feel free to ping me.Trust me the list is never ending/I can even show you how to put \ flash tabs which could drastically improve the sites beauty multifold.But for now lets just be contended with this.happy tabbing.
Labels: