Friday, November 20, 2009

Creating Navigation Menu Buttons

Navigation buttons are easy way for the readers to scroll through your blog. It organises things and makes reading a blog more attractive and simpler.
The Navigation Buttons looks something like this:



How to Create Navigation Buttons for your blog?

A>Editing the Code:
1>Login to Blogger
2>Click on Layouts. Then click on 'Edit Html'.
3>Backup your current template
4>Search for </b:skin> tag using Ctrl +F key
5>Just before the </b:skin> tag, paste the code given below in red
a.navigation {
background: #000000;
color: #ffffff;
margin: 1px;
padding: 5px 35px 5px 5px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #5d5d54;
text-decoration: none;
}

6>Now,search for this section of code(given in red):
<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

7>When found,replace the maxwidgets to any number greater than 1 and showaddelement to 'yes'
8>Save your template and close.


B>Adding Navigation Buttons
9>Now click on 'Layout' and then click on 'Page Elements'.
10>Just below/above your Blog Header, click on 'Add a Gadget' and select a 'Html/Javascript' gadget.

11>Paste the code given below(in red) into the gadget you have just chosen
<a class="navigation" href="http://your-link-url.blogspot.com">Your link</a>
<a class="navigation" href="http://your-link-url.blogspot.com">Your second link</a>
<a class="navigation" href="http://your-link-url.blogspot.com">Your third link</a>

12>Replace 'http://your-link-url.blogspot.com' with the url you would wish to link.
13>Also change 'Your Link' with the desired names of your links
14>Save and close. Blogger Templates
Blogger Templates
Twitter Delicious Facebook Digg Stumbleupon Favorites More

2 comments:

my reality bit on March 31, 2010 at 12:53 PM said...

thanks so much for this!
elizabeth

Sparkling Star on April 1, 2010 at 5:47 AM said...

You're Welcome!! :)

 

Networked!

Disabling Right Clicks

Recent Readers

Recent Viewers

Blog Metamorphosis Copyright © 2009 WoodMag is Designed by Ipietoon for Free Blogger Template

--added by swathi