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.


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

==> 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
. Go to “Layout” and click on the “edit” link next to the

==> 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{

==> 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.

Please Share :

Receive Alerts In Your Email Inbox

Enter Your Email Address Below To Receive Latest Updates via Inbox, Free of Charge!

What do you think?

93 Points
Upvote Downvote

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 or join my Telegram Group here.

Comments are closed.


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

Blogger Contact Form Widget Installation Guide