Thursday, March 19, 2009

Label cloud in blogger

I think you might have seen tag clouds in blogs running Wordpress blogging software. Tag cloud is pretty cool widget that collects all post tags in a particular blog ,and projects out the most popular ones in between others.Here in Blogger blogs ,we can rename tag clouds to label clouds as we use to label each posts.

Label clouds are too important for Blogger blogs as these widgets are filled up with your keywords. So care should be taken while labeling each of your posts . Well, after reading this you would able to create a simple label cloud in Blogger with minimum number of steps .
To begin with , you will have add a label widget anywhere into your blogger layout as shown below ..

Label cloud in blogger

Now click on add page element to add a label .

If you have already added a label in required location , then here follows the next step .

add label in Bloggerlabel cloud for Blogger


Remember to download and backup your Blogger template , before doing any modifications.
Press Ctrl F , search for term <b:widget and press the arrow key on right until you can see the code line <b:widget id='Label1' locked='false' title='Tags' type='Label'>.
Also, scroll down and find out </b:widget> . Now delete everything in between including the above lines of code.

Download Blogger label cloud code ,copy and paste it in place of the deleted label widget and save.

If you don't want to display the no:(count) on the labels, search for the line
var showcount=1; and change the value to "0"
Edit the following sections to increase or decrease maximum and minimum font size from default.
var max = 150;
var min = 50;

 simple label cloud in Blogger

Refresh your home page . Now you would be able to see a simple text based label cloud In your Blogger blog .

Animated Label cloud Widget in Blogger :

animated Blogger label cloud



The previous label cloud was a simple text based widget . This one uses flash and some sort of JavaScript to create a animated label cloud widget .Here the User need to be in a browser supporting JavaScript and Flash .Credits for this animated label cloud goes to Amanda ( Bloggerbuster.com) and Roy (roytanck.com) for creating the Blogger and Wordpress versions respectively .
Go to your Blogger templates' layout and select edit HTML . Now click on expand widget templates.
Now search for the following line .

<b:section class='sidebar' id='sidebar' preferred='yes'>


Download the animated label cloud code and paste just below that line . Now save your Blogger template . ( Remember to have flash payer installed ) .
In the above download , locate the following terms and change them with your custom values.

"tagcloud", "240", "300", "7", "#ffffff");

240=width , 30= height and #ffffff( hexa color code for white back ground color)
If you need to find out background color of website or a hexa color code finder , use this tool


Change font size of the label cloud to match with your template

expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");



Change the font size from 12 to a suitable value .

Out of the two Blogger label clouds , I would recommend you to use the first one.
Reasons :
1. Search engine optimization friendly
2. Simple installation .
3.No need of flash player .
4.Better page load time .

So tell me your thoughts about these Blogger two label cloud widgets .And don't forget to subscribe to our email news letter .

Comments :

0 comments to “Label cloud in blogger”


Post a Comment