5/5/09

Flash animated label cloud for Blogger!

This post is for those people who asked how to make the cloud labels as you see in my blog.
First, go to Layout.

Then click "Edit HTML" in your Blogger dashboard.




Do not check the "Expand widget templates" box as this would complicate the process!
Click Contol+F on your keyboard that would open search box and search for the code:

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


Immediately after this line, paste the following section of code:
<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'>

<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>

<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>

<script type='text/javascript'>

var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);

// uncomment next line to enable transparency

//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);

so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);

so.addVariable(&quot;mode&quot;, &quot;tags&quot;);

so.addVariable(&quot;distr&quot;, &quot;true&quot;);

so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);

so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);

so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);

so.write(&quot;flashcontent&quot;);

</script>


<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>



Then preview your template. If installed correctly, you should see the tag cloud appear in your sidebar. Now, you are free to save your template! It's that easy! Also, you can edit the colors and dimensions as required, or move it to a different location.

12 comments:

Vijay Krishna Palepu said...

hey!!great post...but for some reason it is not working on my blog...can you give me any suggestions as to what i can do about it??

Vitaliy said...

I see you were able to post it! If still need help with anything... Just ask!

Muzikal203 said...

I can't put it on my blog, the part that you told me to highlight and find isn't there, I do have a custom template that I got from a different site

Vitaliy said...

Hey, Muzikal203! Try searching for:


b:section class='sidebars' id='sidebar' preferred='yes'

If that wont fix it, search for:


b:section class='side

and then post it after > sign.

Let me know if it helped

Muzikal203 said...

Nope, that's not in there either. If it helps, here's the template I'm using: http://btemplates.com/2009/09/03/oriental

Vitaliy said...

ok search for:

b:section id='sidebar123' preferred='yes'

post it after

preferred='yes'>

and now one more thing, you might want to change these numbers

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "120", "150", "7", "#ffffff");


let me know if it worked now?

Vitaliy said...

Muzikal203, for your layout it is better if you change the bold numbers to: 180 and 240:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "180", "240", "7", "#ffffff");

Enjoy!

MC said...

It doesn't work if you have too many labels--44 labels worked for me. Maybe it goes up to 50? I had over 200 labels and had to go to the layout menu to reduce the number of labels to get it to work.

THANKS!

Hard Disk Recovery - External Hard Drive said...

Thanks for the information, i have some blog with blogspot.... thanks to you i will add some make up to my blog

free tutorials said...

Thanks a lot for sharing such a nice and informative article, really a very nice and detailed review and very helpful

By the way for free online tutorials and interview questions check this link: Free Tutorials

Anonymous said...

the id label199 can't be recognized. help!!!!

Anonymous said...

Appreciating the time and energy you put into your blog and detailed information you present. It’s good to come across a blog every once in a while that isn’t the same out of date rehashed material.
website design