Top Menu links for Blogger

Top Menu links for Blogger or Menu Bar at Top or Menu Navigation or Menu Butttons.

Show others pages links in blogger at top to make them easier for visitors to surf and show your important pages like CONTACT , HOME and SUBSCRIBE.

Now to add these links at the top of your blog, you have to add no of links to your blogger html/javascrip section you want to show. Check this image with 4 red links for Demo.

For this to show at top the page below header , there is small hack you have do with your blogger template Html.

Go to LAYOUT > EDIT HTML > PRESS ctrl + F > Search below codes

<div id=’crosscol-wrapper’ style=’text-align:center’>
<b:section class=’crosscol’ id=’crosscol’ showaddelement=’no’>
<b:widget id=’HTML1′ locked=’false’ title=” type=’HTML’/>
</b:section>
</div>

Change the showaddelement=’no’ code to showaddelement=’yes’ And Save The Template.

Now Go to LAYOUT > Page elements

A new Add a Gadget Element will Appear Below Your Blogger Header.

Click on Add a gadget > Add HTML/javascript Add these link below, And Save It.

<a href=”http://www.about.com/” class=”navigation”>About</a>
<a href=”http://www.photos.com/” class=”navigation”>Photos</a>
<a href=”http://www.amazon.com/ class=”navigation”>Amazon</a>
<a href=”http://www.contact.com/” class=”navigation”>Contact</a>

Preview your blog now. Now these Link will appear at top of your page below your header.

As you can see i have added a class=navigation to your links that i will define now to show of your Buttons Looks with colors and hover effect.

Go to LAYOUT > EDIT HTML > PRESS ctrl + F > Search </b:skin>

Add below css codes before </b:skin> and SAVE it.

a.navigation {
background: #ff0000;
color: #ffffff;
margin: 1px;
padding: 2px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #404040;
color: #ffffff;
text-decoration: none;
}

You can edit the codes in red to change the colors of buttons and its hover effect also.

Change the green codes to adjust margins between the buttons and there size.

Note:-This hack will work in uncustomized blogger template for sure but for customized template it can or couldn’t.

I hope You woul’d Enjoy this Hack.If you liked It subscribe to my blog.senyum

16 Comments

  1. St0n3Ð October 27, 2008
  2. ColourLab March 8, 2009
  3. Kid on a Modern World April 6, 2009
  4. Anshul April 6, 2009
  5. Monica May 8, 2009
  6. Anonymous June 17, 2009
  7. The author. July 1, 2009
  8. Anshul July 3, 2009
  9. The author. July 6, 2009
  10. Anshul July 6, 2009
  11. sket August 21, 2009
  12. Estefania Sofea Zahara November 3, 2009
  13. DJ Slam November 11, 2009
  14. Orkan November 26, 2009
  15. The Campfire Place January 16, 2010
  16. Anshul January 17, 2010

Leave a Reply