Combining Blogger Labels into Categories

You’ve read several posts here that give you different options for displaying Blogger labels. This article shows you how to create groups of labels, categories, for your sidebar. With these super categories, visitors can explore your blog on a level that approaches menu navigation. This is a good solution if you don’t have a menu bar and you’re not quite ready to add one to your header.

Basic Html Code
Let me start by saying I used part of the extensive post at Beta Blogger for Dummies which covers all things ‘label’. The article is informative, but be warned it takes a long time to load — like all of Vin’s pages but the content is worth the wait. What you see here is a practical application of that code, continuing our series on tweaks around labels (removing counts, putting in a scroll bar, etc.). I outline my strategy below for approaching what looks like pretty complicated code.

This is a quote of the generic code found at Vin’s site:

<h2 class=”sidebar-title”>Labels</h2>
<h3>CATEGORY A</h3> <ul>
<li><a href=”LINK OF LABEL1″>LABEL 1</a></li>
<li><a href=”LINK OF LABEL2″>LABEL 2</a></li>
<li><a href=”LINK OF LABEL3″>LABEL 3</a></li>
</ul>
<h3>CATEGORY B</h3> <ul>
<li>
<a href=”LINK OF LABEL4″>LABEL 4</a></li>
<li><a href=”LINK OF LABEL5″>LABEL 5</a></li>
<li><a href=”LINK OF LABEL6″>LABEL 6</a></li>
</ul>
<h3>CATEGORY C</h3>
<ul>
<li><a href=”LINK OF LABEL7″>LABEL 7</a></li>
<li><a href=”LINK OF LABEL8″>LABEL 8</a></li>
<li><a href=”LINK OF LABEL9″>LABEL 9</a></li>
</ul>

This is simply an unordered list (ul) for each super category you want to define. Below each category you list links to the real post labels you want to highlight.

Work it out on paper
For these instructions you need to define your own title (“Labels”), three Categories (A-C) and use nine of your blog labels (Label1 thru Label9). The nine are listed 3 under each of the 3 categories. Of course you should first map out how many categories you want and vary the number of links under each! So use this as a starting point and work it out on paper first.

Instead of “Labels” as the title I decided to use “More on how to:”
Category A = “Create your blog”
with links to “Blog Design” and “Blogging Tips” — notice I gave a more descriptive name to the raw labels used on the posts. For ‘blog design’ label I used ‘find the right look.’ Be creative.
Category B = “Grow your blog” with “BlogCatalog”, “mybloglog”, “Statistics” *** label names are case sensitive!
Category C= “Customize your blog” with “Widgets”, “Template Tips”, “CSS”, and “Quick Tips”

Finding your label url
First find all of your label links so you can create the ‘href’ link addresses. An easy way is to open a new browser window and click on the first label you intend to put in category A, save the url address and at the same time verify the listed posts are really what you want to show. Remember when you click a label, Blogger does a search for posts tagged with that label!

Here’s the first href:
http://bpwebnews.com/search/label/Blog%20Design
. You can avoid the browser step above by putting your blog url, followed by ‘search/label/ and then the actual label name! Just one caution – a space must be represented by ‘%2o’. It’s that simple.

Getting it done
I prefer to use a test blog to work out any misspelling or misjudgments before you copy to your real blog. Any gadget you add takes effect immediately and anyone visiting at that time could receive a jolt. In the test blog (using url addresses for the real labels), I found the use of h2 with a class of ‘sidebar-title’ worked for me — it puts the title in the font and color style defined in your template. However the h3 style was a disaster, yielding larger type than the h2 and in a bold black font. So I adjusted this by replacing h3 with h2 throughout the code. If your template has h3 then it might look fine!

  • Go to the Layout section and add an Html/Java gadget in the sidebar section.
  • Paste the code from the scroll box or your modified version from a notepad document.
  • Replace title, categories and label url/names with the ones you decided are relevant.
  • Save Page Element, View and make adjustments until you’re satisfied
  • Copy the html into a new element on your real blog, if you used a test first.
  • Drag and drop the new gadget into the position you want along the sidebar.

Summary
Marketing your blog’s content is a key factor in gaining readers. With a little planning you can add a super categories section to help point out more posts your visitors can explore. Let us know if you give this a try.

Hopefully you found this useful and will subscribe by RSS or leave your email address. You don’t want to miss our upcoming tips on customizing your blog.


If you found this post useful, leave a comment and share your thoughts with others.
Get future posts in your RSS feed or by email.


6 Comments

  1. Great post!

    Very informative.

    I used to have a Blogger blog when I first started out, and I never used the labels really till the end.

    Then I ended up switching to WordPress.

    Thumbed and reviewed!

    Thanks for sharing!

  2. @ronin1770 – Glad you found it.
    @Luis Gross – Great to see you visiting! Didn’t recognize you with the eyeglasses. Don’t be a stranger…

  3. Just wanted to say that this is a great tip! I’ve been searching all over the place to combine labels with categories. Fantastic 🙂

    Very few people are aware of this, so many thanks.

  4. @Avatar – This is a very good way to help visitors navigate your site. Maintenance is low as long as you label your posts appropriately! Thanks for letting my know you’ll use it.

Comments are closed.