Blogger Categorical Post Tabs

Jack of All Trades, Master of One: Being Me!

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


4 People Made This Project!

Recommendations

  • Electronics Tips & Tricks Challenge

    Electronics Tips & Tricks Challenge
  • Plastics Contest

    Plastics Contest
  • Audio Contest 2018

    Audio Contest 2018

57 Discussions

0
None
Glitchyspoons

9 months ago

Signed up so I could say thank you. Thank you! I blog about books that have a vast age range. I wanted a way that those visiting could click the age group they're interested in. I didn't even think about the tags or that I could even modify the HTML. Thanks.

2 replies
0
None
Goon FookW

1 year ago

Thanks. This is very helpful.

0
None
RajendraT3

1 year ago

Hi Kurt,

Thanks, its helpful, however I was also looking to filter out right panel blog archive links to show only of that sub category is this possible?

0
None
TommyM30

2 years ago

This was real helpful Kurt. Thanks.

0
None
Maria AlvaR

2 years ago

Hi Kurt, and thanks for this tutorial. I've got the link tabs up and running, but I'd love to center them and remove the outer border (the inner lines between labels are fine). I've tried adding CSS found on another How To blog as well as adding html code, but nothing's working.

Can you help me out? Here's my blog: www.icelandeyes.blogspot.com

2 replies
0
None
Kurt E. ClothierMaria AlvaR

Reply 2 years ago

Hmn, I'm afraid I don't know how to do that right away. Since most of these sites use themes with varying html code, it can be a bit tricky to get something to work across the board. The list on my wife's blog was centered by default I believe. I'm not really an expert in HTML or CSS. I'm much more comfortable with firmware in an embedded system. Sorry, and good luck to you! (your blog looks great, btw)

0
None
Maria AlvaRMaria AlvaR

Reply 2 years ago

P.S. I moved my Link List to the left sidebar while awaiting a reply

0
None
WendyL43

2 years ago

Oh wow! Thank you so, so much for this! I'm so glad I found your post! Phew!

0
None
LizL30

2 years ago

Thank you ever so much for figuring this out and posting how to do it! I am beyond excited to have my site looking more normal and more easy to navigate. So easy to do with your help.

1 reply
0
None
BrendaS118

2 years ago

OMG! I could just come right through the screen and kiss you!!! Finally! I am just like your wife - no techs here! I am so thankful that I found your post. I am new to the blogging-o-so-fear, and frustration levels have maXed! You bring relief.

Thank You SO Much!

1 reply
0
None
SenthuriK

2 years ago

Appreciative and Effective steps by steps information . Blog helps to bring out the in and out frame of Blogger Categorical Post Tabs.Thanks for sharing.

http://www.webgeniusbangalore.in

0
None
JaysonB8

2 years ago

Hi sir! Thank you so much for posting this step by step instructions. This is exactly what i needed. I followed everything that you've written here and SUCCESS! i made it! ^_^

Tip: spelling and capitalization is really important. I've encountered some difficulties trying this only to find out that i added just one letter to a word. ;)

1 reply
0
None
OnyekachukwuU

2 years ago

hello sir,

i must say this is a helpful blog for me,but i need your help,

i created this blog http://minenigerianews.blogspot.com

just for practice purpose ,but my major problem is on how to post into
each or specific categories i created ib the free blogger or blogspot,

please i need help each time i post it goes into the home menu
instead of the individual categories ,as intended .please someone here
should please help me on this.

And also how do i SEO OPTIMIZED MY BLOGGER POSTS PLEASE ?

0
None
Anthonyl35

2 years ago

Thanks Chas for reply, as u told, i did it, but the prob. is that, I want to add a specific post, under a specific category , or sub-category. that's the point, but i don't know, how to do it..

Please can u told me, if u can

Anyway thanks again.