The Navigation Buttons looks something like this:
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
2 comments:
thanks so much for this!
elizabeth
You're Welcome!! :)
Post a Comment