The NetMediaBlog

  • Home
    • About NetMediaBlog
    • Contributors
    • Guest Posting
    • Contact
  • Technology
    • Computers
      • Softwares
      • Downloads
      • Gaming
    • Smartphones
    • Internet
      • Tech Guide
  • Tutorials
  • Blogging Tips
    • WordPress
    • Blogger
    • SEO
  • Social Media
    • Facebook
    • Twitter
    • LinkedIn

How to add horizontal navigation bar to a blogger blog

March 6, 2012 By Nwosu Desmond 3 Comments

Navigation bars are easier way of navigating through any website, in fact i cant imagine any website without a navigation bar. I have been to many forums and groups and have seen so many folks ask about they can add navigation bars to their blogspot blogs. So I am writing this for such folks. To add a navigation bar to a blogspot, the simple trick is to tweak the template by adding a css code and then create your links. So I am going to teach you the simple method to add a navigation menu to your blogger template today. Before we start remember to make a backup copy of your template.

Steps to add horizontal navigation bar to a blogger blog:

First is to add Css to your template: Go to Blogger dashboard, then Layout, then choose Edit HTML, use CTRL+F to find </b:skin>.

Next add the following code just before the </b:skin> tag.


/*URL: http://www.netmediablog.com/ */

.basictab{

padding: 3px 0;

margin-left: 0;

font: bold 12px Verdana;

border-bottom: 1px solid gray;

list-style-type: none;

text-align: left; /*set to left, center, or right to align the menu as desired*/

}

.basictab li{

display: inline;

margin: 0;

}

.basictab li a{

text-decoration: none;

padding: 3px 7px;

margin-right: 3px;

border: 1px solid gray;

border-bottom: none;

background-color: #f6ffd5;

color: #2d2b2b;

}

.basictab li a:visited{

color: #2d2b2b;

}

.basictab li a:hover{

background-color: #DBFF6C;

color: black;

}

.basictab li a:active{

color: black;

}

.basictab li.selected a{ /*selected tab effect*/

position: relative;

top: 1px;

padding-top: 4px;

background-color: #DBFF6C;

color: black;

}

 

After adding that code save you template.  Next will be to add the menu to our template. Go to Blogger dashboard, then to layout, choose page element above the post area and click add gadget, choose Add HTML/Javascript, leave the title empty and add the following code  to the content area.


<div id='topnav'>

<ul>

<li><a href='/'>Home</a></li>

<li><a href='#'>Contact</a></li>

<li><a href='#'>Link 3</a></li>

<li><a href='#'>Link 4</a></li>

</ul>

</div>

 

Edit the code by replacing the ‘#’ tag with your url’s .Then save your template and preview your blog on a browser remember to also Subscribe to NetMediaBlog Feeds by Email

Other Posts You May Like...

  • Flat design modern vector illustration concept of process web page coding and programming on laptop with workflow objects and icons. Isolated on stylish blue backgroundMore Reasons to Blog as an Entrepreneur
  • 5 Tips to Improve Your Blog’s Crawling and Indexing FrequencyHow to Improve Your Blog’s Crawling and Indexing Frequency
  • Facebook advertising: Is it worth investing in?Facebook advertising: Is it worth investing in?
  • Email Marketing 101 for BloggersEmail Marketing 101 for Bloggers
  • how to deal with blogging burnoutHow to deal with blogging burnout

Filed Under: Blogging Tips Tagged With: Blogger, blogging, blogging-how-to, blogspot, how-to, navigation bar

Comments

  1. Royce says

    March 10, 2012 at 7:16 pm

    These are in fact impressive ideas in on the topic of blogging.
    You have touched some good points here. Any way keep up writing.

  2. Tiffany says

    April 22, 2012 at 8:42 pm

    You got a really useful blog I have been here reading for about an hour. I am a newbie and your success is very much an inspiration for me.

  3. Marcie Miyanaga says

    April 23, 2012 at 9:43 pm

    Just wish to say your article is as astounding. The clarity in your post is just excellent and i could assume you’re an expert on this subject. Well with your permission allow me to grab your RSS feed to keep updated with forthcoming post. Thanks a million and please carry on the enjoyable work.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe To My Blog

Get the latest content first.


Recommended Articles

  • What is Google Play?
  • Remote access – what role does it play in cloud computing era?
  • Google advanced operators: Search Google with more accuracy
  • How to get the most out of Blog Commenting
  • Content Syndication – How it can improve your blog’s traffic

Recommended from BroadedNet

We are upgrading BroadedNet, Blog Traffic Tool. Please keep reading www.netmediablog.com
Get Netmediablog Extension

Find Us on Facebook

Recent Comments

  • Sugar Daddy on Search Engine Optimization Tips for Images
  • Sugar Mummy on How an Active Blog Affects Your Google Rank
  • Larry Frank on 15 Highly Optimized WordPress Themes for Search Engines
  • Steven on How to transfer Contacts from Samsung Galaxy S2 to Galaxy S4
DMCA.com
  • About NetMediaBlog
  • Contributors
  • Advertise With Us
  • Contact Us
  • Guest Posting
  • Privacy Policy

Disclaimer Copyright © 2023 Netmediablog . Log in