Introduction: Blogger Categorical Post Tabs

By Projects by KEC
About: Jack of All Trades, Master of One: Being Me!

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 .blogspot.com. by using your Google account.

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

In case you don't already know, Blogger uses a kind of WYSIWYG editor for their general page layout and allows the addition of "Gadgets" to a page. Gadgets are small blocks of code that create something in your blog. They can range from embedded games to photo slide shows and can be created or found online. 

Our first step is to insert a Link List Gadget into the blog.
  1. From your blog, click "Design" in the upper right hand corner.
  2. Click "Layout" from the options on the left hand side.
  3. Click "Add a Gadget" in the layout editor wherever you want the tabs to be - probably under the Header.
  4. From the "Basics," scroll through the gadgets until you find "Link Lists" and click to add it.

Step 2: Configure the Link List

We now need to set up the link list to serve as a category tab. The adding the link list in Step 1 should open a configuration window in your browser like the one shown. You need to fill out the form.

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...
  1. Think of a category or two you would like to use. It should only be one word.
  2. Copy the URL of your blog and paste it in the box. For example: http:www.mclothier.blogspot.com
  3. Add the following after your blog URL: /search/label/
  4. Add the searchable category you would like to use (Capitalization matters!)
  5. 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

The great thing about categorizing your posts with this method is that you can still add static links to your link list. There should always be a link to your "Home Page" on the link list if you really want it to look like a set of page tabs. You can also add links to any other website that you want including a static page on your blogger site!
  1. Edit the link list following Step 3
  2. Add a new link using Step 2
For a Home Page Link
  • New Site URL: http://www.YOUG-BLOG.blogspot.com
  • New Site Name: Home
For a link to any other website
  • 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

If you separate your posts into categories, you might not want every single post to show up on your home page. You can easily limit the number of posts that are displayed on your home page. Setting it to 1 could serve as a "Most Recent Post" layout.
  1. Go to the Layout Editor by Following Step 1
  2. Find the "Blog Posts" portion of the layout and click "Edit"
  3. Change the "Number of posts on main page" value in the Blog Post Configuration Window
  4. Scroll down and hit "Save"

Step 9: Cleaning Up the Searched Label Page

The bad thing about using the "Search for Label" method is that when you click on one of the categories in the link list, the opened page displays the following message before the posts:

Showing posts with label YOUR-CATEGORY. Show all posts

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!
  1. Follow Step 1, but select "template" instead of "Layout"
  2. Click "Edit HTML"
  3. Click "Proceed" on the warning that pops up.
  4. Click the box to "Expand Widget Templates" in the upper left corner of the HTML window.
  5. Click somewhere in the HTML Code Window. Don't freak out! HTML code is not evil!
  6. Press "Ctrl" plus "f" (Ctrl + f) on your keyboard to open the Internet Browser's "Find" function.
  7. Search for this exact phrase: <b:includable id='status-message'>
When the browser finds the phrase, it will probably scroll down to it and highlight it. Different browsers handle this differently. The entire bit of code we are looking for is this: 

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

So if your browser finds this phrase more than once, locate this instance of code. We need to replace this code with the following:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div style='clear: both;'/>
</b:if>
</b:includable>

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!


Hurricane Lasers Contest

Participated in the
Hurricane Lasers Contest