How to List Tags/Labels in Column/Row Display on Blogger

Do you have a problem that you’re Label or Tag for posts has been over populated and therefore appearing to be a super long list on your blog. And thought that the “cloud-view” or “3D interactive-flash” tag widget isn’t looks great at your layout and mostly you want only the simple looking table like in row/column list. In this post we will be discussing on how you can list your blog’s label or tags in a table-like row/column display.

Mainly, this trick will contribute on a more organized and professionally looking labels/tags display on your blog. I have already implemented this on my other blogs TechGeeze.com and AutoGeeze.com and works really great you may head on and check it out.

Here are the steps on how you can lists your labels/tags by column/row:

1. Log on your Blogger account go to Layout–>Edit HTML.
2. Check what is the width of your sidebar just by searching “sidebar” then find the attributes “width”.
3. After you find it, divide it into your specified column (for example I’ll be using 3). Now you must consider the length of your labels/tags on this.
4. Now find the Label widget, search for this block of code: “type=’Label'” then note for the “id=Label#”.
5. Then search for the code: ]]></b:skin>
6.Immediately before that paste this code below:

#Label1 {
font-size: 11px;
list-style: none;
background: none;
border: none;
}

#Label1 ul {
float: right;
width: 369px;
margin: 0;
padding: 0px 5px 0px 5px;
list-style: none;
background: none;
border: none;
}

#Label1 li {
float: left;
width: 120px;
margin: 0;
padding: 0;
list-style: none;
background: none;
border: none;
}

7. The #Label1 is the id we note at step 4 and the width we note at step 2-3. This is very important so you for the CSS to take effect.
8. I have also avoid all possible design on the list design including bullets, background and border. You can always customized it by yourself if you want.
9. Now save and view your template.

Tips:
You can modify the Label widget for it not to show the number of posts under that label. Like I implemented at Autogeeze.com. You can do it by commenting or deleting the code below. You can find it by ticking first the “Expand Widget Template” at then search for this code block:
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/></span>
</b:if>

Hopefully this works for you, always let me know if you have any questions or problem implementing this tutorial by dropping me a message on the contact or comment form.

2 Comments

  1. Thanks for giving such a useful informations.

  2. Nice tricks, I might use it for my blog.