Blogger Venue

How to Put a Tag Cloud in Blogger or Any Other Site

A tag cloud / label cloud is a cool feature to add in your website. It allows your readers and visitors to easily view your site’s content and it will let them know what topic is the most searched and most discussed in your blogsite / website.

A tag cloud looks like the photo above. Blogger has already made ways to make this feature set up easily.

If you’ve noticed, Blogger Venue also uses this cool gadget to feature its site’s content.

Easy Steps to Make a Tag Cloud (a gift for all bloggers from Blogger's 10th birthday)

And now here are the manual steps to make a cool tag cloud in your site. Don’t forget to download your full template before making any changes in your layout.

Steps in Making a Tag Cloud (Manual Version)

1. Go to your Blogger account and proceed to Layout tab --> Page Elements --> Add a Gadget --> Labels and save.

2. Go to Edit HTML tab and leave the Expand Widget Templates unchecked.

3. Find the ]]> < / b:skin > tag and paste the code below BEFORE it.

/* Label Cloud Styles
----------------------------------------------- */

#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}

#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-

size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

4. Paste the code shown below, this time, AFTER the ]]> < / b:skin > tag but BEFORE

< / head > tag.

This post is written by: Fehl

Fehl is a web content publisher, published poet, photographer, and businesswoman. Follow her on Twitter