Flag This Hub

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

By

Outlook of flash animated label tags cloud widget
See all 3 photos
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

rancidTaste's Recent Pages

blog's Recent Pages

Others are also reading...

Comments

blog 2 years ago

You can visit the following link to view the output of this tutorial page:

http://i-nets.blogspot.com/

psychopoet 2 years ago

thanx, it really works! you are most generous! ;-)

online entertainment 2 years ago

Hi

It is really nice.

but now some time ago it is not work on my computer. can u check ?

it is work on your computer ?

samironwebtrack 2 years ago

excellent tutorial....thanks an lot...

http://twitter-makemoney.blogspot.com/

BloggerGeeze | Blogging Tutorials 2 years ago

I've got another solution on displaying the labels/tags in a column/row list. You may want to check it out: http://www.bloggergeeze.com/2010/04/how-to-list-la

Web Promotion 22 months ago

I tried to add in my blog here http://seogadgets.blogspot.com but no accept... giving some errors... so wht i do for...?

Rachel 10 months ago

I am using the latest version of Firefox [5.0] and I've visited the links to see a w2orking demo of the floating tag cloud and THERE IS NO GODDAMN WORKING DEMO. Seriously what are the other commentors referring to when they write that it is nice and cool. I mam not technically illterate and am a blogger and webmaster.

But I see NOTHING.,

y 4 months ago

yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Vikram 7 weeks ago

Extremely good topic.

www.edutechnology.net

Submit a Comment
Members and Guests

Sign in or sign up and post using a hubpages account.



    Like this Hub?
    working