Creating and Centering Tabs With Multiple Posts in Blogger

When we first started this blog, I started learning some basic HTML and CSS. Today I thought I'd share some very simple points with you guys regarding tabs. (This isn't a book related post, but I hope you'll like it anyways. It's just an additional post.)

As you may have noticed, this blog has tabs at the top. Blogger normally only allows 'pages' as tabs, which can only include one post. The purpose of this is for tabs to only include important information like an introduction, contact information, privacy policy, and the like. I found a way around this. It's very simple and allows you to have an unlimited amount of posts in each tab.

How To Create Tabs

1. Label your posts.

When you're editing a post in Blogger, you will find your 'Post Settings' on the right side. Go to one post, click on 'Labels' under 'Post Settings' and put a label into the box. If you want one tab to contain book talks, for example, then go to a post that is a book talk and make up a label and type it into the box. For instance, 'Book-Talks'. Give that label to all of your posts that are book talks.

2. Create a tab for your label.

Now that you've labeled all your posts with their proper labels, go to layout. In your 'Cross-Column" field, click on "Add a Gadget". A window will pop up with many different gadgets. Scroll through it until you find one called "Pages". Click the plus sign beside it.

Perfect! Now you have a pages gadget. Click on the 'edit' button.

A menu will pop up. Click on "Add external link".

It will ask you to fill in two fields. "Page title" is where you put the title you want on the tab.

"Web adress (URL)" is where you put a link. The link you will put here is: http://YourBlogName.blogspot.com/search/label/OneOfYourLabels

Use the URL above, but replace "YourBlogName" with the name of your blog, and replace "OneOfYourLabels" with the label you want in that tab.

For example, I want a tab for all my book talks. I labeled all of them "Book-Talks". In this case, this is how I filled it out:

Then click on "Save Link". 

You can then arrange the order of your tabs by dragging them with your mouse. Once everything is to your desire, click "Save".

 

Now you're done with making that tab! You can do this with all of your labels, and it works the same way. This is what the "Book Talks" tab looks like. When you click on it, it shows you all post with the label "Book-Talks". This way, you can have multiple posts per tab.

How To Center Tabs

To center your tabs instead of having them left-aligned, do the following: Go to 'Template' on your Blogger dashboard, and click on 'Customize'.

Options will appear. Click on 'Advanced', then scroll down and click on 'Add CSS'. There will be a box where you can add text. Insert the following text:

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

You're completely done! Your tabs are now centered. Simple, huh?

I hope you found this little tutorial helpful. I'm thinking of making more tutorials like this for Blogger. If you have any problems with this or any questions whatsoever, don't hesitate to leave a comment! I'll respond and help you to the best of my ability. :)