Adding label (category) tabs to navigation bar

How do you add a tab (on horizontal navigation bar) that shows all the posts that fall under a subject or category in Blogger?

tab display all posts that fall under a particular label category

Before I give a correct answer, let’s first see a popular-but-wrong DIY method (using Music category as an example):

  1. Create a page with “Music” as the title. “Music” tab will be added to the bar automatically. So far so good.
  2. Attempt to add music posts to the page. This is where it gets stuck, because posts can’t be added to pages.
  3. Mission failed. 

Well, that’s the end of that.

The correct way of doing this is by adding a tab linking to a label-search URL.  A label-search URL is a link that points to a label-search page. This page lists out all posts labeled with a particular label.

Here are the steps:

 

1. Label your posts

Label your posts according to subjects or categories (if you haven’t already done so). This is pretty basic, but if you don’t have the slightest idea what a label is or don’t know how to apply it, read How do I label my posts?.

You can also apply a label to multiple posts at once.

 

2. Get the label-search URL

You can get the URL of a label-search page in a couple of ways -by copying the label’s hyperlink or construct the link yourself.

  • Copying label’s hyperlink

    First view your blog and find the label. Labels are hyperlinked and are usually displayed at the bottom of each post and in Labels gadget if you have a Labels gadget installed. You can get the label URL by right-clicking on the label and copy the link from the context menu: In Firefox you select “Copy Link Location”, in Chrome select “Copy link address”, and if you are using Internet Explorer, select “Properties” and copy the link from there.

  • Constructing label-search URL

    A URL follows the format below:
    http://YOURBLOGNAME.blogspot.com/search/label/YOURLABEL

    For a multiple word label such as "YOUR LABEL", you need to replace the space between words with %20, like so: YOUR%20LABEL. Labels are case sensitive, make sure you enter the correct letter case.

    Example:
    This is the URL for BloggerSentral’s “SEO and traffic” label. Clicking it will take you to a page showing all posts that fall under that label:
    http://www.bloggersentral.com/search/label/SEO%20and%20traffic

3. Add the tab with the label URL

The method of adding the tab is different depending on the type of widget used for the horizontal navigation bar.

  • To add the tab to the Pages gadget, follow this tutorial: Adding non-page links to Pages/PageList gadget.
  • If your tabs uses a LinkList gadget, enter the URL into “New Site URL” text box.
  • For tabs that are made of list items or anchor tags, just add the label URL as a target link like so:

    <a href="PUT LABEL URL HERE" >Link Text</a>

Enjoy!

101 comments to "Adding label (category) tabs to navigation bar"

AkuDeqja February 21, 2011 at 11:31 AM    

hi green lava.

me again:. u can speak malay, so let's talk in malay:) hehe. kenapa failed eh ? i salah applied maybe. but its quite complicated for me. if u still remember i'm the one who asked u how to add post under certain page..then u suggested to me to following this one.but i'm not sure this is the answer for may last question. what i want is.. i want to add my daily post or entry under one page (eg: healthy tips page)..i totally stuck how to add it eventhou i had read your last tips for many times ^^

Greenlava February 21, 2011 at 9:35 PM    

@AkuDeqja
I left a comment on your blog...in Malay :)

Khairi Mohd February 22, 2011 at 2:22 PM    

akudeqja, let's talk malay but u talk english ma haha. err...

Anonymous,  February 22, 2011 at 6:54 PM    

http://subscribeoptioninimageformat.blogspot.com/2011/02/how-to-create-subscribe-option-in-image.html

Anonymous,  February 22, 2011 at 6:55 PM    

u can copy and publish the content in your blog from the link i have given to you...many people will be benefitted..

Greenlava February 22, 2011 at 11:09 PM    

@Khairi
tu la pasal :)

mancai February 23, 2011 at 8:28 AM    

thanks a lot..

G February 24, 2011 at 8:44 AM    

I am a little lost. As I understand correctly, after getting label URL, I simply add that URL into a page or tab as you call it?

Greenlava February 24, 2011 at 9:21 AM    

@G
Yes you add it to a tab.

G February 24, 2011 at 9:47 AM    

Hi, nevermind I have figured it out.
Thanks for this great tip.

SEO FRIENDLY March 2, 2011 at 7:26 AM    

The first visit here. thanks for sharing

Greenlava March 2, 2011 at 11:17 AM    

@SEO FRIENDLY
Welcome to Blogger Sentral :)
Check out the archive in the sidebar.

Melinda April 4, 2011 at 9:35 PM    

can't seem to figure out step three, nothing happens my post stay on my home page instead of going to the specific drop down menu. can you help me figure this out
thanks

Greenlava April 5, 2011 at 11:45 PM    

@Melinda
An example:
Your label URL for the label Easter is http://mommymomentsabc123.blogspot.com/search/label/Easter

Now go to the HTML code for "Easter" menu:
[li][a href="http://mommymomentsabc123.blogspot.com"]Easter[/a][/li]

and replace the target link http://mommymomentsabc123.blogspot.com with the label URL

so the end result will look like this:
[li][a href="http://mommymomentsabc123.blogspot.com/search/label/Easter"]Easter[/a][/li]

Yvonne April 10, 2011 at 2:58 AM    

Hi there, I followed as stated in this post but it says :

LHS of numeric is null before 49 in http://8thcanvas.blogspot.com/search/label/Health

why?

Yvonne April 10, 2011 at 3:13 AM    

This is how it looks in my template (HTML script):

[!-- begin top menu --]
[div id='topMenu']
[div id='topMenu_content']
[div id='topLinks']
[ul]
[li class='current_page_item'][a expr:href='data:blog.homepageUrl' title='Home']Home[/a][/li]
[li][a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Posts RSS']Posts RSS[/a][/li]
[li][a expr:href='data:blog.homepageUrl + "feeds/comments/default"' title='Comments RSS']Comments RSS[/a][/li]
[li][a href='#' title='Edit this link']Edit[/a][/li]
[/ul]
[/div]
[/div]
[/div]
[!-- end top menu --]
[/div]
[!-- end header --]

Greenlava April 10, 2011 at 9:07 AM    

@Sheena
Just use a normal list syntax, like in this example:
[li][a href="http://8thcanvas.blogspot.com/search/label/Health"]Health[/a][/li]

you don't need the "expr" thing, except for the Home tab (leave it as it is).

Sheena April 10, 2011 at 1:51 PM    

Its not working :( I dont know it is not linking it..and it brings to other page without my template theme..I dont know where iam doing it wrong~

Greenlava April 10, 2011 at 4:26 PM    

@Sheena
1. Labels are case sensitive, for example the correct URL for "science" is
http://8thcanvas.blogspot.com/search/label/science
instead of
http://8thcanvas.blogspot.com/search/label/Science

2. The "About" tab.
You have to create the page first in Posting > Edit Pages > New Page.
Then copy the page's URL and use it in the tab.

Sheena April 11, 2011 at 4:55 PM    

Hi there, Thanks for your prompt reply and informative feedback on the issue. It was VERY helpful:D Thank you.

You're my blog guru!!

Q* April 16, 2011 at 12:52 PM    

how can I change the name at the tab that comes together with the layout?There are Home,FAQ,Contact and About.How can I change them?

Greenlava April 16, 2011 at 4:44 PM    

@Q*
I'm afraid you can't. The tabs are actually a part of the header image. You are kind of stuck with them :(
I suggest you change your template.
You can try Free Designer Blogger template: Tinted Panes

Shine Radiantly April 24, 2011 at 12:28 PM    

After looking everywhere on the internet this tutorial was the only one that worked for me. Thanks so much and keep up the great tutorials!

FoodPilgrims May 23, 2011 at 2:13 AM    

Have looked elsewhere unsuccessfully but with your tut was actually able to get my pages/pagelists working just fine, thanks!

One quick query... I've centre aligned the pages and padded them to stretch them accross the entire header but the pagelists displaying posts with a certain label won't work with the padding CSS I've used, and just stay squished up close to one another. Any ideas?

Greenlava May 24, 2011 at 9:03 AM    

@Beth-C
Have you tried this? How to align Pages/PageList gadget

Anonymous,  June 11, 2011 at 4:27 AM    

Just a quick question. How do you add multiple labels to one tab? Do you simply seperate with a comma when listing labels or does it require more than that?

Greenlava June 11, 2011 at 8:32 AM    

@Anonymous
You can't use multiple labels.
But here's what you can do - create a label on top of those labels. For example if you want to show "apple" and "orange" labels, simply add a label "fruits" to both of them and use it in your label URL.

Jen June 11, 2011 at 10:29 PM    

Thanks! I searched all morning for something like this, and was very unsuccessful. This worked perfectly since I wanted some label tabs next to some static pages. Thanks a million.

www.brooklynexperiment.com

Marsha June 16, 2011 at 9:15 AM    

Hi - Thank you for the great information. I copied your code and have a navigation bar with links: http://www.knowfoodnow.com.

I would really like the posts to show up as snippets per your link below. Would you be kind enough to explain how you did that. I am getting full text for each post.

http://www.bloggersentral.com/search/label/SEO%20and%20traffic

Marsha June 16, 2011 at 9:23 AM    

Hello again,
I have one more question pertaining to the navigation links. Now that they are working, my google search bar seems to be affected. It is pulling up to many articles that have nothing to do with the search word. Is there a way to fix this?
Thank you.

Greenlava June 17, 2011 at 1:09 AM    

@Marsha Hallet
This post will teach you how to show only post titles on archive and label pages.
As for adding the snippets, I've answered it in the comments (of that post).

Marsha June 17, 2011 at 3:14 AM    

Thank you for responding so quickly! This is working out very well except I see:

"Showing newest posts with label XXXXX. Show older posts"

"And I would like to see Showing posts with label XXXXX: Show all posts" per your example.

The problem is that when you click on show older posts it says there are none which is confusing.

Please tell me where and how I modify that text.

Greenlava June 19, 2011 at 7:34 PM    

@Marsha Hallet
The text is automatically generated by Blogger and I'm afraid it's beyond our reach.

Anonymous,  July 14, 2011 at 5:18 PM    
This comment has been removed by the author.
Greenlava July 17, 2011 at 7:11 AM    

@Shirshak Bajgain
You can't. You are stuck with the later permalink structure.

Dasharath Santra August 8, 2011 at 1:57 AM    

it is not very good discus

Ehab August 13, 2011 at 12:39 PM    

Hi G, awesome blog & thanks for all the effort done :D

I have a small question about labels :

let say am currently viewing a specific label tab [ ex: music] then I clicked to view a post from this label ,,,, How can i make the navigation at bottom [ next post / previous post ] to go to next/previous post from label music only ,,,

the standard thing that next/previous post will navigate based on date of post !

any ideas ??

many thanks in advance

Greenlava August 17, 2011 at 11:04 AM    

@Ehab
I don't think that's possible :(

teach August 26, 2011 at 4:05 PM    

thanks great tutorial.. finally i can configure my site to look more professional

Jodi September 11, 2011 at 3:40 AM    

HI, I have been searching for this forever!!!

Here is my question... I see that I can add this to a tab in a navigation bar and point to the URL I want. Great! Fab!

BUT what I am hoping for is to....
have my tab in a Nav BAR
Drop Down Menu
The items in the drop down menu are pages.....
I want the link to the page to take me directly to the search URL, without having to go to the page and then click on a separate link.

Is that possible? Does this make sense?
I am using a self-hosted wordpress.

Thanks! You rock!

Jodi

ps..my site is under construction so you can't see it.

Greenlava September 11, 2011 at 6:06 PM    

@Jodi
Sorry, this tutorial is for Blogger blogs.
That said, adding a dropdown menu in Wordpress 3+ is easy. Go to Dashboard > Appearance > Menus to create your menu. Add tabs to the menu by ticking the categories, custom links etc. and click the Add to Menu button. You can turn a tab into a subtab by dragging it into another tab.
To display the dropdown menu on your blog, go to Dashboard > Appearance > Widgets, scroll down to Inactive Widgets header and locate the "Navigation menu" widget. Drag it to your preferred location.

Anis September 22, 2011 at 2:04 AM    

yes this is it what i am looking for quite somedays

Kedai CoKelat BerKelip October 9, 2011 at 2:04 AM    

sorry kalu nk tnya..
sy da try, tp kan jd mcm ke bawah..
boley buat jd mcm pages x?
siap ade kotak2 yg boley separate kan label tu?
tq2

Greenlava October 10, 2011 at 11:36 AM    

@Kedai Kelat Kelip
Awak guna Blogger template lama (Layout template) sebab tu tiada kotak2. Kalau guna Designer template, tabs tu akan berkotak2 secara otomatik.
Pilihan terbaik ialah tukar ke Designer template. Lagipun Designer template senang nak customize.

ax November 11, 2011 at 6:15 PM    

sangat membantu
thank you
check my site

Unknown November 16, 2011 at 10:58 AM    

UR THE BEST!IMMLOOKING FOR IT MANY DAYS!TNX A LOT!

ComVia November 20, 2011 at 7:20 PM    

Thanks for this wonderful info. Works Fine!

Azubuike S. Ikedionu November 22, 2011 at 4:41 AM    

This is great mehn,
i love this. It's too loaded and i'm gotta implement it right away!
Tumb up!

Anonymous,  November 23, 2011 at 6:27 AM    

Best help I have found Thank you so much

Elizabeth December 2, 2011 at 11:54 AM    

Thank you!!!!

engineer December 4, 2011 at 5:10 PM    

thank you very much very great article helped me alot ... i was searching it for a long long time and your %20 made it all a big thanks for you ...

get shared files December 6, 2011 at 6:24 AM    

Hi

I am so much thankful for your help for each and every time I visit this site, always get useful information about blogger, I have learned a lot about customizing blogger blog form this site.

Regards

suriatimustafa December 16, 2011 at 12:29 PM    

hi... nk tny... saye nk add pages...tp xleh... katenye alrealy added...

tp kat pages saye xde pon..kat page elements pun xde add pages tu... mcmane ye?? arap kawan dpt membantu...

Greenlava December 17, 2011 at 12:58 AM    

@suriatimustafa
Nampaknya awak dah dapat selesaikan problem tu sendiri, menggunakan LinkList :)

Free E-books December 18, 2011 at 2:57 PM    

good job!

Prasanna December 27, 2011 at 3:18 AM    

Wow. Just what I was searching. You are a genius, Greenlava. thanx a lot.

Rizwan Chaudhry January 10, 2012 at 4:12 AM    

thanks

Jesseny January 16, 2012 at 5:13 AM    

I have a few questions and hoping someone can help me out as I have been searching for some answers and can't seem to find them on the net. I'm new to blogging and so far I've enjoyed the learning process on designing my blog. However, I have reached a couple of problems.

(a) I and am trying to figure out why my drop down navigation menu bar does not contain any of the labels from my posts. Only two of the eight tabs show the labels that are labeled under the heading, the rest remain on the home page.
(b) Then when I click on the "home" page navigation bar I return to a page that is empty. Does this mean that I have to put "home" as one of the labels.

(c) would it be better to rid my blog from the drop down menu created by following Blogger Sentral sets and use a linklist gadget instead? I really like the drop down menu look as I see myself adding more menu tabs in the future.

Many thanks in advance for the help.
This is what my HTML code looks like
[ul id="jsddm"]
[li][a href="http://mommaalwayssaid2.blogspot.com/search/label/Home"]Home[/a]
[li][a href="http://mommaalwayssaid2.blogspot.com/search/label/Workout"]Workout[/a]
[li][a href="http://mommaalwayssaid2.blogspot.com/search/label/Nutrition"]Nutrition[/a]
[li][a href="http://mommaalwayssaid2.blogspot.com/search/label/Lifestyle"]Lifestyle[/a]
[li][a href="http://mommaalwayssaid2.blogspot.com/search/label/Pregnancy"]Pregnancy[/a]
[li][a href="http://mommaalwayssaid2.blogspot.com/search/label/Thins no one tells you"]Things no one tells you[/a]
[li][a href="http://mommaalwayssaid2.blogspot.com/search/label/Reviews"]Reviews[/a]
[ul]
[li][a href="http://mommaalwayssaid2.blogspot.com/search/Reviews/Baby stuff"]Baby stuff[/a][/li]
[li][a href="http://mommaalwayssaid2.blogspot.com/search/Reviews/Momma stuff"]Momma stuff[/a][/li]
[/ul]
[/li]
[li][a href="http://mommaalwayssaid2.blogspot.com/search/label/Budget living"]Budget living[/a]
[/li]
[/li][/li][/li][/li][/li][/li][/ul]

Jesseny January 16, 2012 at 5:29 AM    

I finally found what I was looking for! Thank you Blogger Sentral.

Greenlava January 20, 2012 at 1:27 PM    

@Jesseny
Things you need to know regarding Blogger labels:
1. Labels are case sensistive.
2. Labels are one level only. For example the URL you are using:
http://mommaalwayssaid2.blogspot.com/search/Reviews/Baby stuff
is nonexistent. The correct URL is:
http://mommaalwayssaid2.blogspot.com/search/label/baby stuff

And one more thing, Home button is usually for your homepage.

Here's the corrected code:
[ul id="jsddm"]
[li][a href="http://mommaalwayssaid2.blogspot.com/"]Home[/a]
[li][a href="http://mommaalwayssaid2.blogspot.com/search/label/workout"]Workout[/a]
[li][a href="http://mommaalwayssaid2.blogspot.com/search/label/Nutrition"]Nutrition[/a]
[li][a href="http://mommaalwayssaid2.blogspot.com/search/label/lifestyle"]Lifestyle[/a]
[li][a href="http://mommaalwayssaid2.blogspot.com/search/label/pregnancy"]Pregnancy[/a]
[li][a href="http://mommaalwayssaid2.blogspot.com/search/label/Thins no one tells you"]Things no one tells you[/a]
[li][a href="http://mommaalwayssaid2.blogspot.com/search/label/Reviews"]Reviews[/a]
[ul]
[li][a href="http://mommaalwayssaid2.blogspot.com/search/label/baby stuff"]Baby stuff[/a][/li]
[li][a href="http://mommaalwayssaid2.blogspot.com/search/label/momma stuff"]Momma stuff[/a][/li]
[/ul]
[/li]
[li][a href="http://mommaalwayssaid2.blogspot.com/search/label/budget living"]Budget living[/a]
[/li]
[/li][/li][/li][/li][/li][/li][/ul]

more on no.2 above -to mimic subcategories/sublabels? ("Baby stuff" and "Momma stuff" ) for "Reviews" tab, you need to apply "reviews" label to each posts labeled "baby stuff" and posts labeled "momma stuff".

Tiffany January 23, 2012 at 9:42 AM    

Thank you so much for this tutorial! I've been searching about eight hours today for the answer for this question. So glad I found your blog. Very easy to understand and much appreciated. :)

Unknown February 14, 2012 at 8:11 PM    

Hey I just wanted to say that I really enjoyed reading your blog. You have good views, Keep up the good informative info. thnks

Anonymous,  February 16, 2012 at 7:14 PM    

Nice One!

Kerry February 19, 2012 at 5:12 AM    

So helpful!!! Thank you so much for taking the time to write up this post!!!

dayo February 24, 2012 at 8:13 AM    

very helpful for bloggers

Jenponix February 24, 2012 at 10:34 AM    

thanks.it answered my query.:)

sanu February 26, 2012 at 12:29 PM    

i like it thank yu for posting

custom labels February 28, 2012 at 8:53 PM    

It is a very informative article.I got very good information about how i can add a tab in blogger.

mempawah creation March 6, 2012 at 2:57 AM    

visit here again. good sharing.

Puipuii April 10, 2012 at 7:32 PM    

Thank you Man... very simple to understand. This is what I need and I got it once again thank you.

Berto and Kwala April 14, 2012 at 4:04 PM    

Thank you! This was very helpful!

chamara April 20, 2012 at 11:31 PM    

Thank you admin. I waill us ethis for my blog.

pathirana April 20, 2012 at 11:33 PM    

great job..... Thanks for this tip

Anonymous,  May 31, 2012 at 10:58 PM    

Even though I added the label in my post, it doesn't appear at the page when i click on my tab. Help please?

Greenlava June 1, 2012 at 4:31 PM    

@Anonymous
Make sure the tab's URL is correct.

ristizona June 4, 2012 at 11:49 AM    

thankyou suhu. this post very hepful for me.

Susan Barwood June 5, 2012 at 10:28 PM    

Thanks so much, at last some clear and simple to understand advice for technophobes like me.

The tea-drinking Book Lover June 21, 2012 at 6:56 PM    

Thank you very much!

Unknown June 24, 2012 at 3:38 AM    

Thank you, so much ....!!!!

Govt Jobs June 24, 2012 at 4:12 PM    

Thanks,I have been looking for it....

Unknown June 29, 2012 at 8:38 PM    

I have been searching for a solution for days. Thank you for the simply put and helpful info! Just organized my entire blog in less than 15 minutes!

Carla McMahon July 14, 2012 at 7:59 PM    

WoW!!!! Thank you so much for this blog changing post!!!

Jill Stott July 21, 2012 at 10:14 PM    

This worked so well! Thank you!!!

cricview July 22, 2012 at 1:29 PM    

I add it to my blog
http://cricscope.blogspot.com/
after click the tab that blog disply

"showing posts with label videos"
then display posts
I want to remove displying this "showing posts with label videos"
how can I do it

Greenlava July 25, 2012 at 5:14 PM    

@cricview
Go to Template > Customize > Advanced > Add CSS and add this code:
.status-msg-wrap {display: none;}

KarennnTran August 10, 2012 at 2:08 AM    

So I added the page using the pages gadget and it works but when you click on the page it shows at the top "Showing posts with label food. Show all posts" for my Food page for example. Is there a way to get rid of this?

Greenlava August 13, 2012 at 9:29 AM    

@KarennnTran
I've answered similar question here.

Jonty September 1, 2012 at 8:57 AM    

Awesome post Greenlava .... Keep sharing the information with us .... thanks a lot

Limousine Boston October 23, 2012 at 2:12 PM    

This tutorial of sorts is very crucial to bloggers who are not aware of the method that goes into adding label tabs to navigation bar.

Unknown November 1, 2012 at 9:10 PM    

finally! it workswithmy blog..

Caresofts November 15, 2012 at 8:03 AM    

Thanks Alot Dear Its work

Yes May I Help You December 23, 2012 at 7:00 AM    

thnx alot for posting this wonderful blog
it really solved my problem

thnx a ton

Paula Castillo January 5, 2013 at 4:40 AM    

Thanksssssssssss!!!!!!!!!! ♥

Unknown January 22, 2013 at 9:29 PM    

THANK YOU. NICE TUTORIAL :)

Anonymous,  February 24, 2013 at 11:42 PM    

Thank you for explaining how to add categories for my blog :o)

Unknown March 16, 2013 at 9:27 PM    

Thank you so much! Exactly what i've been looking for!

Gyzmoos June 17, 2013 at 7:32 AM    

Your the BEST ! +rep

Unknown June 18, 2013 at 4:03 AM    

Thanks Alot Dear It.s work

Unknown June 18, 2013 at 4:05 AM    

Thanks Alot Dear Its work.

Lady E September 25, 2013 at 2:08 AM    

You, sir, are AWESOME!!! This was just what I needed and it was so clear and easy to follow. Thank you! Thank you! Thank you! (:

xx, E
curiositydidntkillthiscat.blogspot.com

Unknown October 20, 2013 at 2:15 AM    

thanks