Intro: Blogger Categorical Post Tabs
My wife recently started a blog to share her crafts and our travels with friends and family. Being the technological one in our relationship, I am blessed with the responsibility of setting it up and making it look how she wants it to look. She has a lot more to add, but here it is if you are interested: M Clothier on Blogger.
One thing she definitely wanted was tabbed pages to specific categories. This is easily done in a WYSIWYG website editor such as Google Sites, but a bit more difficult in a blog style website such as Blogger/Blogspot. Just so you know, Blogger and Blogspot are owned by Google and are one in the same. Going to Blogger.com will allow you to create a blog at
My first attempt to do this was not ideal. I created "static pages" through the blogger layout editor, but these pages were meant for "static information." You cannot create a new blog and post it to one of the static pages. By default, it will only post to your home page. You could manually edit each static page to include the same information as your blog post, but this defeats the purpose of the "Blog" style website.
The solution is to label (or tag) each of your blog posts and then create a link list which points to each of your post labels.
Step 1: Adding a Link List
Our first step is to insert a Link List Gadget into the blog.
- From your blog, click "Design" in the upper right hand corner.
- Click "Layout" from the options on the left hand side.
- Click "Add a Gadget" in the layout editor wherever you want the tabs to be - probably under the Header.
- From the "Basics," scroll through the gadgets until you find "Link Lists" and click to add it.
Step 2: Configure the Link List
Title: What do you want to call the Link List? Suggestion: Blog Categories
Number of links to show in list: Leave blank. What good is a hidden link?
Sorting: Leave the "Don't Sort" default. You can do it manually later.
New Site URL: This is where we need to be creative...
- Think of a category or two you would like to use. It should only be one word.
- Copy the URL of your blog and paste it in the box. For example: http:www.mclothier.blogspot.com
- Add the following after your blog URL: /search/label/
- Add the searchable category you would like to use (Capitalization matters!)
- The entire box entry should look like this: http://www.YOUG-BLOG.blogspot.com/search/label/YOUR-CATEGORY
New Site Name: What is your category called? This will show up on the link list and can be multiple words)
Then click "Add Link" to save that category link. You can add more now if you have them or anytime in the future. Each link can be edited or deleted and the order of the links can be rearranged by clicking the up or down arrows. To make sure it works, try clicking "Test YOUR-CATEGORY Link." Be sure to save the link list!
Step 3: Editing a Link List
After you create a link list, you can always edit the current links, add more, or remove the link list all together. Go to the Layout Editor as described in Step 1, find the link list (Shown as "Test Link List") and click edit. This takes you to the configuration window described in Step 2.
Step 4: Labeling a New Post
For your tabbed category link list to work, your blog posts to be searchable on the website. To do this, simply add a label when you create new post.
On the right hand side of the new post editor, select "Labels" under the Post Settings. In the open box, you can add any labels you want to associate with the blog post, but I recommend using one word labels. Also note that the capitalization of the label will affect its searchability. If you created a link for ".....com/search/label/instructables" in Step 2 or Step 3 but label your post "Instructables" it will not work right. Any label you have previously used should show up under the entry box, so clicking on a previously used label is the best way to get it right.
Step 5: Labeling an Old Post
If you want to add this ability to older posts, you just need to go to the post editor and add the label exactly as in Step 4. To get to the post editor, follow Step 1, but select "Posts" from the left hand column instead. It should display a list of your blog posts. Hovering over one will bring up a small menu with the options Edit, View, Share, & Delete. Click "Edit" to edit that blog post, and follow the instructions in Step 4 to add a label to the post before saving and republishing the post.
Step 6: Testing the New Tabs
Once you have created the link list and have a few blogs with the appropriate labels, you can test the new ability. The link list should be displayed on any page of your blog. If you added the gadget directly under the Header in Step 1, it will be at the top of the page. Clicking on any of the categories in the link list will open a new page displaying any posts with the associated label.
With this ability, you can easily separate your posts into specific categories!
Step 7: Adding Static Links
- Edit the link list following Step 3
- Add a new link using Step 2
- New Site URL: http://www.YOUG-BLOG.blogspot.com
- New Site Name: Home
- New Site URL: http://www.SOME-WEBSITE.com
- New Site Name: Whatever you want to call the website in your link list.
Step 8: Restricting the Home Page Blog Feed
- Go to the Layout Editor by Following Step 1
- Find the "Blog Posts" portion of the layout and click "Edit"
- Change the "Number of posts on main page" value in the Blog Post Configuration Window
- Scroll down and hit "Save"
Step 9: Cleaning Up the Searched Label Page
This can be annoying, but there is a somewhat easy way to get rid of it. This solution involves editing the page level HTML code, but don't worry if you have no experience doing this or don't evening know what an "HTML" is. Just follow these easy steps!
- Follow Step 1, but select "template" instead of "Layout"
- Click "Edit HTML"
- Click "Proceed" on the warning that pops up.
- Click the box to "Expand Widget Templates" in the upper left corner of the HTML window.
- Click somewhere in the HTML Code Window. Don't freak out! HTML code is not evil!
- Press "Ctrl" plus "f" (Ctrl + f) on your keyboard to open the Internet Browser's "Find" function.
- Search for this exact phrase: <b:includable id='status-message'>
<div style='clear: both;'/>
So if your browser finds this phrase more than once, locate this instance of code. We need to replace this code with the following:
<div style='clear: both;'/>
Note that the first and last lines didn't change, just the middle stuff. You should be able to copy and paste the code directly to the window. Finally, save it and close the window. After you click save, the editor will quickly scan the code to make sure there are no errors. If you did this correctly, it should work fine. If it spits an error out at you, just close the window and try again.
Now when you use your link list to search for a specific category, the new page will not have the mentioned displayed message.
Enjoy your new ability to display your categorized posts!