Adding Navigation Buttons to your Blogspot blog





The interactive transcript could not be loaded.



Rating is available when the video has been rented.
This feature is not available right now. Please try again later.
Published on Jan 16, 2010

Learn how to add navigation buttons to your blog in 5 minutes or less.

1. Copy this code into a new HTML/Java gadget:

<a class="navigation" href="http://website address here"> Title for button </a>

2. Change the website address. No spaces. Do not lose the quotation marks.

3. Change "Title for button" to a short button title.

4. Go to Layout and then Edit HTML.

5. Search (Control F) for the SECOND time the word skin appears. You'll see: ]]> </b:skin>

6. Right above that, paste the following code

a.navigation {
background: #c1b8cd;
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;

7. Want to change the colors? Change the 6 character code after each of the following. (You will need the code for the color you want to change it to. Try http://html-color-codes.info/)
The info in italics indicates what it will change. (Make sure to leave the # there but do not include a space after it.

Background: # Background color of the button.
Color: #Text color

Then later in the code you see:
a.navigation:hover {
background: #this is the color the button changes to when you have the mouse over top of it


When autoplay is enabled, a suggested video will automatically play next.

Up next

to add this to Watch Later

Add to

Loading playlists...