Introduction: 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!


Comments

author
Goon FookW (author)2017-05-24

Thanks. This is very helpful.

author
RajendraT3 (author)2017-03-29

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?

author
TommyM30 (author)2016-05-31

This was real helpful Kurt. Thanks.

author
Maria AlvaR (author)2016-05-26

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

author

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)

author
Maria AlvaR (author)Maria AlvaR2016-05-26

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

author
WendyL43 (author)2016-05-25

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

author
LizL30 (author)2016-05-08

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.

author
Kurt E. Clothier (author)LizL302016-05-09

No problem - I'm glad it worked for you!

author
BrendaS118 (author)2016-05-02

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!

author

Well I am very happy to have helped. Good luck with the blogging!

author
YasirA27 (author)2016-04-22
author
SenthuriK (author)2016-03-03

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

author
JaysonB8 (author)2016-01-11

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. ;)

author

Great, I'm glad it worked for you!

author
OnyekachukwuU (author)2015-12-10

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 ?

author
Anthonyl35 (author)2015-11-20

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.

author
Anthonyl35 made it! (author)2015-10-15

Hi K E. Clothier, Could help me regarding this , I've created Main Manu list , but I can't add a link data, how to put a data in manu list.. Please help as soon possible...

THANKS.....

Sample.png
author
-chase- (author)Anthonyl352015-11-15

@ AnthonyI35 -

Don't know why Kurt can't figure out what you want as you explained pretty clearly or will help you, as what you want to do is real simple AnthonyI35.

Real simply the HTML hyperlink code will look like this in your header. .

<a href="http://"your blog address"/search/label/"your label">Your Link Text</a>

replacing quoted text in the above with the appropriate address - label and link text.

You can get the label url by either mouse over the label link in your post or label list and right click->copy url and paste it into your header via Template-> Edit HTML.

You can do this to create link sub-categories etc., etc.

it's real simple...

author

I really have no idea what you are asking. If you follow the instructions, it will work.

author

ok, I follow your instruction , but the categories made under the left hand side, but I wanna under the header, how can it possible , how can add links to those categories.. thanks.

author

Sorry, but I'm afraid I don't really understand how to accomplish what you want. Good luck!

author
BamideleE made it! (author)2015-09-16

Proof of earnings

DATE: 09/16/2015 02:04

TO PAY PROCESSOR ACCOUNT: U6909711

AMOUNT: 09.60

CURRENCY: USD

BATCH: 102111841

MEMO : API payment. Ad Clcik Xpress Withdraw 4444055-278647.

PAYMENT ID: - 276847

URL : http://adcxpressandi.blogspot.com.ng

proof 2.PNG
author
BamideleE (author)2015-09-16

author
MilosC1 (author)2015-06-13

author
dorrij.peterson (author)2015-03-19

Do you know if it is possible to add a Home label to the list? I tried to add one by using all my labels separated by back slashes and commas but neither of those options worked? thanks....

author

By "Home" Do you just mean a static link to your blog's homepage? That should be as easy as copying the URL from the homepage (minus any weird junk google might affix to the end of it) and pasting it into the "URL" form shown in Step 7.

author
TooS1 (author)2015-03-29

This was exactly what I was looking for! This was very straight forward. I liked that you had screen shots. Thank you so much!

author
InformationT (author)2015-03-09

Very useful trick thanks for sharing this platefourm also provideing trickes.http://infotechzz.blogspot.com/

author
heavenle84 (author)2015-02-28

~Thank you SO much!!

author
Liera GraceK (author)2015-02-24

This is awesome! My blog is still under construction and this is a great help!
http://gracyshome.blogspot.com/ Thanks!

author
Learn EducateS (author)2015-02-13

I just followed all your steps, Thank you so much my website is looking so great

http://www.learneducateshare.com/

author

It does look nice, glad I could help.

author
AnA8 (author)2015-01-26

I am brand new to blogging and this was SUPER helpful! Thanks so much for the very detailed, easy to understand instructions!!

www.anaccidentalhippie.com

author
Kurt E. Clothier (author)AnA82015-01-26

Great to hear, and happy blogging!

author
JesseH2 (author)2014-10-07

Very well-written and informative, but one problem:

I'm having trouble with the HTML code at the end, where you get rid of the notification. I've searched for the code you put there to edit, but I can't find it at all. Please help. Thanks.

author

Hi, I've been having the same issue and I foun this solution:

http://helplogger.blogspot.pt/2012/05/how-to-remov...

Hopefully it will help you as much as it helped me :)

author
ElenaV (author)2014-12-24

You are the best! I've been looking for a way to make the tabs without the status message showing for sooooo long.

I also deleted the Pages gadget and put the static About page in the link list by copying its address, and it worked perfectly!

Screen Shot 2014-12-24 at 22.44.32.png
author
Kurt E. Clothier (author)ElenaV2014-12-24

Awesome, I am so glad it is working for you!

author
audreyyyphannn (author)2014-11-22

Thanks you for this tutorial! Do you know how to make it so that the "tab" is a different color when you are within that certain tab?

author

I'm glad it helped, but sadly, no, I don't know how to do that. You can set the "Selected tab background color" in the advanced options of the layout editor (or in the html code), but that is only the highlighted tab color. Once you click on the tab (to go to the link it holds) the site doesn't care what page you are on because those are really just "links" not actual page tabs.

There might be an option for the tab (link) to a static page which is contained inside of the blog, but not for this kind of label search result which is not so much a page you are within, but just the result of a search query. That is to say, I can't find any options, even in the html, to do that. It doesn't mean it isn't possible, I just haven't figured it out...

author
KateL2 (author)2014-11-06

Thank you so much!!! I have been trying to figure this out for a while and your instructions were very easy to follow and understand :)

author
Kurt E. Clothier (author)KateL22014-11-07

Glad I could help.

author
kwongmingyou made it! (author)2014-10-20

Simple and clear! Thanks

Capture.JPG
author

Awesome, I'm glad it worked for you!

author
ZarP1 (author)2014-09-29

The last time I also did these instructions however lately, I have made a drop down menus in Blogger so that my blogs will fall in an organized manner. I have tabs and under them are sub tabs. Now Im having a hard time linking my blog post under those subtabs. Do you have tutorials about this? Thanks. Your answer will be highly appreciated. ;)

author
Kurt E. Clothier (author)ZarP12014-09-29

Sorry, I'm afraid I don't know much about that. The instructions I gave work to a point any link to a search of your labeled posts, so I suppose they could be modified through some trial and error to any sort of link including those in tabs and sub tabs.

author
adeb3 (author)2014-09-19

i am using it and shall be adding 1000 pages soon but showing 1000 page links on homepage is difficult. any solution?

author
Kurt E. Clothier (author)adeb32014-09-19

Under no circumstances (unless it is just a repository for yourself... like a personal page of links, but you already have browser bookmarks for that) should any website ever display that many links on a single page... it is just horrible web design.

If you must display so many links, I would break them into categories and sub categories, similar to a file system on a computer. Each page would only display 10 or so links to more specific sub categories.

author
electrobank-hp made it! (author)2014-09-03

Excellent post, really easy to follow

Screenshot from 2014-09-03 09:32:29.png

About This Instructable

68,040views

8favorites

License:

Bio: Jack of All Trades, Master of One: Being Me!
More by Kurt E. Clothier:RV Awning Tension AdjustmentSimple Steps to Give Your Robot PersonalityUnited States Photo Map
Add instructable to: