Animated Label Tags Cloud: How To Add a Flash Animated Label Tags Cloud Widget For Blogger?

Outlook of flash animated label tags cloud widget

Blogger blogging platform supports Labels. You can easily add or remove labels. The default Labels of Blogger is just text with a number (this number represents the total no of tags). The default labels are quite dull looking. But you can easily change this label cloud by using flash animation and can change your blog's outlook. The flash animated label tags cloud looks really nice. This page contains the detail information to create a flash animated label tags cloud widget and add it to your blog.

Steps to add a flash animated label tags cloud widget for blogger?

Follow the following steps to add a flash animated label tags cloud widget for blogger:

Step 1: Accessing Blogger template HTML code

Go to www.blogger.com and log in to your account. After successfully logged in, you will find the Dashboard panel. From the Dashboard panel, select the blog you want to add the animated label tags cloud and click on the Layout option. From the "Layout" option, click on Edit HTML option and click on Expand Widget Templates. For details, How to find and edit blogspot template code?

Note: Before editing any code of your blogger code, it's good to take back-up of your blog. To learn the blogger back-up, you may read How to Ensure Your Blogger Safety and Ensure Your Blog's Back-up.

Step 2: Finding some code segment

Now, form the blogger template HTML code, find the following line of code:

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

Note:

To find the above code line (in Firefox), you may copy the code and press Ctrl+F keys together and paste the copied line of code. Very soon you will find the line of code easily.

Step 3: Adding the code for Label Tags Cloud

Copy the following lines of code segment and add these code after the line which you find in Step 3.

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>


<div class='widget-content'>
	&lt;object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" &gt;
	&lt;param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" /&gt;
	&lt;param name="bgcolor" value="#ffffff" /&gt;
	&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;

		<b:loop values='data:labels' var='label'>
			<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
		</b:loop>

	&lt;/tags&gt;" /&gt;
	&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
	&lt;/object&gt;
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Step 4: Saving the modified code

After doing the above steps, you need to save all of your modified code for the effect of your blog. Click on SAVE TEMPLATE button to save the changes we have made.

Live Demo!!

I implemented one blog by using this tutorial. If you are interested you may visit the following link and find the effect of this flash animated label tags cloud:

Click here to see the live demo of this tutorial.

By following the above four steps you can easily add a flash animated label tags cloud widget for your blog. I think you success. If you face any problem, you may ask it in the comment section.

Extra Tips:

To place the Label clout to anywhere in your blog, just drag and drop it to do that.
Your blogger template may varies. So, you need to modify the height and width of the tag cloud. You can change the tag cloud side if you look the line 09. Here, you will find two variables to change the height and width of your tag cloud. For example, you want your tag cloud 300 by 300. Then you have to change the width and height with 300 and 300. And that's all.

© This tutorial is written by Blog.

For more blogspot tutorials, visit http://hubpages.com/hub/blog-index

Blogger Resources

	ProBlogger: Secrets for Blogging Your Way to a Six-Figure Income Price: $11.73 List Price: $24.99
	Blogging For Dummies (For Dummies (Computer/Tech)) Price: $13.14 List Price: $21.99
	Blogging Heroes: Interviews with 30 of the World's Top Bloggers Price: $6.89 List Price: $24.99
	No One Cares What You Had for Lunch: 100 Ideas for Your Blog Price: $11.96 List Price: $19.99