23.6.13

How to Create Horizontal Navigation Bar in Blogger/blogspot blog

Hello !everybody. How are you ? Hope fine.
Today i will discuss how to Create Horizontal
Navigation Bar For Blogger ...

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

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

No comments:

Post a Comment