Showing posts with label Navigation bar. Show all posts
Showing posts with label Navigation bar. Show all posts

Tuesday, February 4, 2014

How To Create A Horizontal Navigation Bar

Someone just mentioned to me that they didn't know how to add a Blogger navigation bar. Well, it's quite simple. Most people seem to go for the horizontal version. Some for the vertical one on the sidebar. 

Okay, go to Design>Pages. Click on Pages. It will say New Page.

The first thing you see says Blank Page. You could have an About Me page here, and write about yourself. Whatever you want. It is a blank page.

Say you want to just have a Page go straight to a website, or something on your own blog. Click the bottom one. You will be linking straight to another site. 

I think you are allowed 10 Pages on Blogger. You probably won't need that many. Especially if you want it to run horizontally underneath your header. 

On the right, you will see Show Pages As. Underneath that you will see Top Tabs, under that Side Links and under that Don't Show. For a horizontal navigation bar, you would of course choose Top Tabs. If you want it in your Sidebar, you would choose Side Links. And if you want to start a Draft for a Page, but don't want to use it yet, you would choose Don't Show. 

As you do these Pages, either Save or Publish. If you Publish, it will automatically go to the type of Navigation Bar you have chosen. If you have chosen horizontal (Top Tabs), publishing it will put it automatically under your header. 

Keep adding Pages until you have what you need for your Navigation Bar.  You can always go back in and edit your Pages, change them around. Whatever.

That's it!

Enter your email address:


Delivered by FeedBurner
Follow on Bloglovin
follow us in feedly
Read more »

Friday, January 3, 2014

Center Tabs Under Blog Header With CSS

Sometimes the tabs start to look disorganized under your blog header. But there is a fix to center them and make it look great. 

Go to Layout>Design>Customize>Advanced>Add CSS.

In the CSS box, copy and paste the code below.

.tabs {text-align:center !important;}
.tabs li {display:inline !important; float:none !important;}

Hit the space key. It should center then.

Click save. 

That's it!



Want To Get Each New Post Emailed To Your Inbox?
Enter your email address:


Delivered by FeedBurner
Follow on Bloglovin
follow us in feedly
Read more »