• Be My Friend :)

    Wanna Be My Friend? Then connect to me on these social sites where you will often find me updating about me.

  •  
  • Subscribe To Our Newsletter

    Subscribe To Our Newsletter And Receive An E-book To Learn How To Build Profit-Pulling Niche Blogs. Just Enter Your Information Below.

    First Name :

    Your Email :

  •  

Subscribe to this blog

Subscribe to full feed RSS
Follow Me On Twitter!

Subscribe Via Email

1724 Happy Subscribers :)

Blogumus: A animated label cloud for Blogger!

By Typhoon On Under Blogger Hacks, Tools For Bloggers

Amanda Of Blogger Buster Launched this Awesome Animated Label Cloud for blogger “Blogumus” converting Roy Tanck’s WP Cumulus plugin for us.The result is the widget you can see in action in the sidebar of my blog. Hover your mouse over the Flash object to see the animation begin. In this post, I’ll explain how you can add Blogumus to your own Blogger layout.

How it works

This widget uses a combination of JavaScript and Flash animation to parse and display your blog labels. Once installed in your template, it should work “out of the box” without any additional tweaking required, though of course you may prefer to change the variables for color, background and size if appropriate :) You should also be able to move the Label Cloud widget through the Page Elements page of your dashboard if you prefer display in a different layout location. To see Blogumus in action, both Flash and Javascript must be installed and enabled for your internet browser. However, it does degrade relatively gracefully, and label links will still be clickable (though not animated) for those who do not use JavaScript of Flash (including search engine spiders).

How to install Blogumus in your Blogger layout

Installing Blogumus in your Blogger layout is surprisingly simple! You should only need to copy and paste a section of code to your Blogger template, though any tweaks for the style of display will require some manual editing. Here are the steps required to install Blogumus in your Blogger layout: Go to Layout>Edit HTML in your Blogger dashboard, and search for the following line (or similar):

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

Then paste the following section of code below above line.

Click Here For The Code To Be Copied.


Then preview your template.If you see it in your sidebar then save it.
Now All you have to do is matching the colors.For this read below..

In this default installation, Blogumus includes the following preset variables:

  • Width is set to 240px
  • Height is set to 300px;
  • Background color is white
  • Test color is grey
  • Font size is “12″

If you would prefer to make your widget wider, shorter, change the color scheme, etc, you will need to do this by editing various parts of the code. I’ll go through these options in the order they appear in the widget code.

Editing width and height

The variables for width and height are found in this line of the script:

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

The width (currently 240) is highlighted in red, while the height (300px default) is highlighted in blue. These numerical values specify the width and height in pixels, so you can alter these of you prefer.

Editing background color

You can change the background color from white to any other color by altering the hex value in the same line:

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

For example, if you prefer a bright red background, you may replace #ffffff with #ff0000. Take a look at this page for a list of commonly used hex color codes.

Alter the color of text

By default, the text is set to display as dark grey ( hex value #333333). You can alter this variable in the following line:

so.addVariable("tcolor", "0x333333");
Be aware that “tcolor” is a Flash variable and doesn’t include the usual hash symbol of hex color codes. Be sure to only replace the numbers!

Adjust the font size

The maximum font size of tags is specified in this line:

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

You can alter this to ensure tags are displayed in a bigger or smaller font if you prefer by changing “12″ to a larger or smaller number.

While making any of these changes, you should be able to preview your widget and be certain that your new choice of color, dimensions and background are suitable for your needs.

If you are not able to do so then ask Amanda of Blogger Buster she might help you.Or send me your blogger account info via the contact link in my tabs,so that i can add it to your blog successfully..


Article Written By Typhoon

Yo! I am Typhoon a.k.a Sushant, a 17 yrs. old blogger from India and the owner of SmartBloggerz. Here I try to share useful Blogging related articles which would help a blogger to succeed. You can connect to me on Twitter.

Typhoon has written 333 superb article(s) on this blog



Don't be shy ;) Share your thoughts on this article by commenting below. Remember that this is a do follow blog with many more exciting features!

19 Comments Add yours

  1. Admin
    August 31, 2008
    9:00 am

    Beautiful post, my congratulations. One of the best i ever seen.

  2. Lhurey
    August 31, 2008
    9:09 am

    this is awesome

  3. limits
    September 4, 2008
    2:16 pm

    can i ask if it is possible to display this in a blog which template is edited, and does not include a sidebar, for example a blog with a template like this: http://soul-ruins.blogspot.com/

  4. Typhoon
    September 4, 2008
    5:27 pm

    Limits i don’t think it could happen,since i don’t know anything about the template you are using..But still I think you should ask the the person who made this hack i.e Amanda of bloggerbuster..She is always available to help.

  5. zumbartes
    September 17, 2008
    3:05 pm

    Very Nice!

    Tanks!

  6. Cat
    September 26, 2008
    10:42 am

    Hi!
    Is there a way to put a background image?
    thanks

  7. Typhoon
    September 26, 2008
    4:07 pm

    I don’t think it can happen.You can only change the colors right now..You can ask Amanda of bloggerbuster.com(The maker of this widget) she might tell regarding this thing.

  8. notes.em from qgmail.com (mindseye)
    September 26, 2008
    6:00 pm

    thanks, i like this.

  9. belitungismyheart
    December 2, 2008
    10:16 am

    Thanks for the trick, i used it on myblog.

  10. Teman
    January 29, 2009
    6:25 am

    Thanks for This Tutorial,

    I ILL Try This Cloud Label Later

    its possible to apply @ my blog ??
    can u check this for me
    http://blog.dmoon.co.cc

  11. Typhoon
    January 29, 2009
    10:38 am

    @Teman

    I don’t think there should be any problem installing it on that blog.. If you get then I will give an alternative method..

  12. aku
    April 24, 2009
    7:38 am

    thanx 4 da trick.
    really appreciate it…

  13. Hi, nice post. I have been wondering about this topic,so thanks for posting. I’ll certainly be subscribing to your site.

  14. rky
    July 7, 2009
    7:50 am

    Thanks for giving blogumus label cloud widget and for its wonderful tutorial.
    i will try it on my blog .
    Thanks

    • Typhoon
      July 7, 2009
      7:08 pm

      No need of thanking me that much. Say thanks to Amanda of bloggerbuster.com who created this thing. I only blogged about it.

  15. Vindex
    November 12, 2009
    2:21 pm

    The olny text this #$%& shows me is “Blogumulus by Roy Tanck and Amanda Fazani”. Nothing else -.-!

  16. scheng1
    December 8, 2009
    10:54 am

    sounds great! blogspot really have very lousy gadgets
    scheng1´s last blog ..Reflection: stock market investment and mood swings My ComLuv Profile

  17. Senthil Ramesh
    December 21, 2009
    10:26 am

    I think this is similar to that of WP Cumulus in wordpress. But I should say that you have to no follow the tags in this cloud or else each tag ll be indexed ultimately resulting in duplicate content issue.
    Senthil Ramesh´s last blog ..25 Google Wave Invites for Grabs My ComLuv Profile

Add a comment

Don't Forget To Read Our Comment Policy

  • Avatars are handled by Gravatar
  • Comments are being moderated

CommentLuv Enabled

This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.



whos.amung.us