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.