Home » Blogger Tutorials, Tricks and Hacks » Blogger Labels Tricks » How To Add Flash Animated Label Tags Cloud Widget For Blogger ( blogspot )

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How To Add Flash Animated Label Tags Cloud Widget For Blogger ( blogspot )

How To Add Flash Animated Label Tags Cloud Widget For Blogger ( blogspot )

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

43,722 views

hi all, blogger blogging platform by default give you the ability to add Labels for your post, so you can add and display your blog Labels at your sidebar.

but because we all want our blogs look great for our visitors, we need to give this labels good style,

So now, we’ll learn how to add amazing tag/labels cloud widget to our sidebar instate of the normal one that presented by blogger.

We’ll do it in few steps.

1. Log into your blogger account.

2. Go to dashboard >> layout >> Edit HTML

3. Find the next code

You can find it by clicking ctrl+f in your browser.

And past the next code just after the above 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'></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>

4. Click save template and now check your Blog. And enjoy.

Hints.
– You can change it’s location at your side bar by going to dashboard >> layout
and move it up or down.

– you can change the widget width and height by editing this part in the code.

width="250" height="200" 

Demo.

If you want to see demo flash animated labels cloud
click here
(new window)

The source : Thanks for Amanda.

Cisco is offering express foundation 646-363 exam for the account managers along with 646-563 exam for advanced security and 646-656 exam for wide area application services for account managers.

Liked It ? Please Share

Comments

78 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. michael says:

    Did not work. Got error message h2 not properly closed?!

  2. Max says:

    hi michael
    we tried to add it to another template to make sure that the code is working, and its worked. you can check it out here
    http://allblogtools-elisa.blogspot.com/

    Please make sure that you copy all the code.

  3. Qasim says:

    it is not working on my blog.

  4. digital-link says:

    Great man, it’s really working in my blog. This code is perfectly working…

  5. Thank you so much I been trying to find something like this for months and months I really hope it works :)

  6. Andrejs says:

    It works on my blog with errors. Please tell me is there a way to make it show special language characters of Latvian language, e.g. āēīūģķļēņčžš (hope you can see these)

  7. ashish singh says:

    ha hi my name is ahsish singh and i had builded many many blogs for my frnds and this is my own blog i found ur site very good but i wnat to ask u something dear plz reply me in mail ok how i can make my header animated plz tell me dear

    and i am very glad to have ur anim taed lables and it is working u shouls mention right

  8. wowwwwwwww………..
    it seems coolllllllllllll

    funny scraps
    A blog for all about humor and funny scraps….

  9. Quantum Q says:

    wow.. It works great with my blog.. But is this SEO friendly?
    quantumq.blogspot.com

  10. Thank you! This works beautifully. Please check it out – I modified the colors a little. :)

  11. It does not work on my site. I made sure to install the latest version of flash, and all I have is a white screen. please help. thanks

  12. aneess says:

    Thanks a lot…

  13. Rajasekhar says:

    heyy its not working for my blog yaar…

    cant find the following code

    plzzz help mee….

  14. Freya says:

    woww, it’s working! cool. Thank u so much for sharing this tips!!

  15. The author of this script, amanda fazani, hasn’t answered my comment yet. The label cloud misses one label. If one has 8 labels, it would only shows 7 of it. HeHeHe!

  16. Max says:

    hi iantheragingbull
    actually i didn’t note this problem before.
    can any one who used this hack tell me if he met the same problem.

  17. Jack says:

    that makes my blog look beautiful. Thank you so much.
    Free International VOIP Calls WorldWide

  18. ishfaq says:

    friend doesnot working in my blog.
    please help thanks

  19. Ehtesham says:

    this code isnt avalble in my blog’s html

  20. Max says:

    hi Ehtesham, please check on Expand Widget Templates. when editing your template.

  21. prem says:

    Hi i was able to save it .. but preview showed only the blank lebel.. is it because of numbers of tags, and label for each post.??

  22. Cristina says:

    Hello, thanx for this code, i really like it. The problem is that the links on the tags dont work. If i click o them it doesnt take me anywhere. What am i doing wrong?
    Thanx for your help.

  23. Sulltan says:

    hi admin . i m using Allblogtools.com template name scarlett but first there is no code with this name””“” what to do now ? please explain.

    • Max says:

      hi Sulltan, please contact us using our contact us page to send us the code, you can’t send the code here in comments.
      but before contacting us, make sure to check on expand template widgets or try another template.

  24. Max says:

    Cristina,
    this is very known problem and it’s because a security of flash player and java script. i updated the code, remove it and add it again for your template, i wish it’ll work perfectly.

  25. Cristina says:

    Thanx it works great!

  26. Kalliopi says:

    When I added it to my blog the greek labels didn’t appear so it useless. Is it another way to solve this problem?

    • Max says:

      Kalliopi, it may be your browser problem, try another browser. the trick works in all our blogs perfectly.

  27. Sulltan says:

    hi Max,
    now this flash gedget working in my template.
    but only 2 labels show at a time.
    if i refresh page its Change labels but no of labels 2 only at a same time what to do ? now

    • Max says:

      hi sultan, i’m really don’t know the reason for this issues, i’ll try to look around to find a solution, during this time, please try to change your template, and try it on another template.

  28. sulltan says:

    sorry sam,
    that was my mistake . i correct it . now its working fine . thank u for such a great trick .

  29. ajakanku says:

    can i have in black background ?

  30. Max says:

    @ ajakanku
    sure you can change the background color. in step 3, there is a code that you’ll past it into your template, find the following part

    ffffff

    then change it to your favorite color value before, you can get your favorite color value from our color codes generator in tools page.
    and here is a demo with another background color.
    http://my1-weblog.blogspot.com/

  31. zendengoh says:

    its work, but sad cant support chinese words.

  32. Bailey says:

    This code was better than other of the same features because the labels work (I can click on them)! Thanks so much

  33. It is very nice man.
    but now it is not work.
    can u check ?

    • Max says:

      @ Online Entertainment, please try to add it again, i’m sure it’s working perfectly, make sure to do every thing in the right way, and leave your blog link plz.

  34. Abijah Gupta says:

    Awsm tutorial!
    Thnx a ton… im using the animated cloud nw! :)

  35. aissa says:

    Thanks this was totally awesome! I have a black theme and was wondering if there was a way to make the background transparent or black? Thanks again :) :)

  36. serden says:

    How to do this hack on 2 sidebar templates…

  37. zen says:

    Max i can’t find this scrift

  38. Max says:

    hi alisa, thanks for your comment,

    @ serden you can make it in the same way and then move it to your fav sidebar from page elements page.

  39. Max says:

    hi zen, please explain more,

  40. Livy says:

    Thanks a lot for this !!!

    However it is too wide and I would like to change it. I’m french and I don’t understand what you mean by “edit this part in the code “. Do you mean that it’s already in the code (where ? sorry I can’t see it !)or do you mean I have to add it (so where and how do I do ? )

    Thanks a lot, I really like it !

    Livy.

  41. It’s work in my blog, after i try so many time…tq very much….

  42. sha says:

    hello max, it’s not working on my blog. please help :'(

  43. sha says:

    anyway, here the url :
    khonsakhonsa.blogspot.com

  44. HY says:

    The hack works fine. Theres a minor problem though, there are 4 tags in my blog but theres only 4 of them showing up. Any solution to this?

  45. HY says:

    Sorry, typo. I mean theres only 3 of the tags showing up in the widget.

  46. sronto says:

    hei this doesn’t work. if there is any problem? pliss reply me in my blog ^_^

  47. edwardng says:

    Cool…thanks for sharing

  48. Reema B. says:

    It only appears as a blank white square in my blog

  49. Wana says:

    Hi Max,
    Thanks for this cool widget. How can I make this widget transparent? Please, please.. I really want it to be transparent. It look dodgy with my template. Reply from your is much appreciated.

  50. Max says:

    @ Livy , it’s easy to control the width and height
    find this part in the code and change it’s numbers,

    &quot;240&quot;, &quot;300&quot;, &quot;

    the above numbers control the width and height in pixels.

    @ sha , sronto please tell me more about your problem, where do you get the error.

    @ Wan, You can’t make it transparent, but you can change the background color to make it blend with your blog template,
    to do it please read my comment for @ ajakanku, or click on this link.

    http://www.allblogtools.com/tricks-and-hacks/how-to-add-flash-animated-label-tags-cloud-widget-for-blogger-blogspot/comment-page-6/#comment-7162

    @ Amina Wafiqah , HY and edwardng
    thanks very much for your comments.

  51. Mauser says:

    it works but i can’t find the code to fix it!

  52. Ramesh says:

    it is Great yar.* thank you.

  53. Dash$) says:

    It worked!! Thanks

  54. mak says:

    i donot found

    in my blog belp me

  55. PSYCORE says:

    hey hi… to everyone who doesn’t found the right code <—- that one, OK here is the thing.. some template like the adapted for blogger from wordpress the xml and ccs are referents, so what you have to do is find this one or someone with other name but make it sure that is the right one (sidebar right side) so you replace de “numbers” and deleted so the code will be like the first one (on the post) you gonna save the changes and later undone, so you going to keep the widget… i hope you got it cause my English is to bad haha

  56. Ezura says:

    Is it possible to get the HTML code for this cloud? The code given is for the XML format (the new format).

    And most of them using the classic/traditional blogger.

    Please help

  57. Max says:

    thanks all, please read PSYCORE comment carefully.

    hi Ezura, i think all of people now use the new blogger xml templates. but the classic are to old now.

  58. Thanks alot. You help me a lot to beautify my blogs . One such blog is http://www.scientiamag.com/.

    Thanks once again

  59. 0o_DIGA_o0 says:

    coooool men !!! i love it

  60. Lawie says:

    How to change the “tag” color, its light gray right now…but how to make it white for example?
    Thanks in advance

  61. Max says:

    Hi lawie, you can change it by changing “333333” in step 3 code to your favorite color code.

  62. Lawie says:

    thanks Max:)
    Great widget!

  63. Thomas says:

    Hi, plz help me with this error

    “”The widget with id Label99 is not within a section (actual parent element is: div.) Every widget should be in a section.”””

    Thx so much.

  64. jeff says:

    wicked code cheers!
    ive changed the colours round and it works lovely! :)
    i was looking for a cloud that was based on just text (a long list of interests) not tags.. could i alter this at all? if so how? if someone coul oblige id be truely grateful!:) or someway of me adding my list in to the tags in someway that could overcome the 200 only tag thing on blogger?
    i bow to your geekery :)
    cheers again
    jeff

  65. mamalkay says:

    sorry.it is not working on my blog

  66. shiva says:

    Your Comment Here

    var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, "tagcloud", "240", "300", "7", "#ffffff");
    // uncomment next line to enable transparency
    //so.addParam("wmode", "transparent");
    so.addVariable("tcolor", "0x333333");
    so.addVariable("mode", "tags");
    so.addVariable("distr", "true");
    so.addVariable("tspeed", "100");
    so.addVariable("tagcloud", "");
    so.addParam("allowScriptAccess", "always");
    so.write("flashcontent");

    …. *

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here