Create Horizontal Navigation Bar From Blogger Link Lists

Adding a navigation bar (menu bar) to your blog will make it easier for your blog readers to discover some important pages of your blog.  You can add it to the header section, the sidebar or down the footer section of your blog.

Right on this blog, I have explained how to make a navigation bar using Blogger Pages gadget and also shared html code for navigation bar. Today, I am sharing with you, how to convert Blogger Link Lists to make an horizontal navigation bar for Blogger blogs.

If you are finding it hard to hide some Blogger Pages from the navigation tabs you created using the Pages gadget, then creating your navigation bar from Link Lists is highly recommended.

Why?

Simply because you can easily add ANY link to a Blogger Link List gadget and you can easily arrange the links anyhow you like. If you access Ogbongeblog on a PC and scroll down the page, you will see the horizontal navigation bar I created using this method.

How To Get Started

==> Log in to your Blogger dashboard  at blogger.com

==> Go to “Layout” and click “Add a gadget” anywhere you want the horizontal menu bar to appear

==> Choose “Link List” gadget, add your links, arrange them using the arrows and save. (No title)

  •  The “New Site URL” is where your menu item will link to while the “New Site Name” is what will appear in the navigation bar.

==> Now is the tricky part. You need to get the widget ID of the
LinkList
. Go to “Layout” and click on the “edit” link next to the
LinkList.

==> Click inside the address bar of the new window that pops up and move the cursor to the end of the URL. You will see the widget ID e.g LinkList3

==> From the snapshot aboove, we know that this Link List in this example has been assigned an ID “LinkList3“.

==> Now, you need to style the LinkList with css to make it appear horizontally. Go to “Template” > “customize“. This will launch the Blogger Template designer.

==> Click on “Advanced” and click “Add css“.

==> Copy and paste the code below:

#LinkList3 li{
display:inline;
}

==> Ensure you use the exact ID of your LinkList in the code above.

==> Click “Apply to Blog

==> View your blog and you should see the LinkList appearing as an horizontal navigation bar on your Bloggger blog.

I hope it works for you.

NOTE: You can also do the same for your Blogger Labels. Get the ID of the Label gadget and use css to style it the same way as explained above. Will explain better when next I write on Blogger tips.

Spread the love :

Written by Jide Ogunsanya

Pro Nigerian Blogger, Digital Marketer and Web designer. I help business owners to grow their businesses online. You can join my Facebook Group here.

4 Comments

Leave a Reply
  1. hello boss, please I need your help. I like your template for for this blog, and i wanna know how you did it and your adsense. how you put the adsense inside your blog post and the one down here after your post.
    Thank you.

Leave a Reply

We're glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our comment policy. Your email address is required but will not be published. No keyword stuffing in the name field and commenting from blah blah blah makes no sense. Thank You.

  • We can help you buy items from Amazon USA and ship to NigeriaMore Info
  • Do you want to ask some questions?Click Here
  • You Can Use Your Phone To Post Ad OnlineLearn More

Scorecard in Adsense Dashboard Lets You Understand and Improve Your Site Performance

Blogger Contact Form Widget Installation Guide