Monday, September 5, 2011

article logoHow to add animated tag cloud for blogger blog

"Blogumus" is an Flash based tag cloud widget which uses scripts converted from Roy Tanck's WP Cumulus plugin for Wordpress. Amanda from blogger buster convert this for use in Blogger powered blogs. The result is the widget you can see in action at the top of this post. However 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 with ease!
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 on Blogger
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.
Firstly you need to download the following two files and upload them to your hosting server.


and then Go to Layout>Edit HTML in your Blogger dashboard, and search for the following line
<b:section class='sidebar' id='sidebar' preferred='yes'>
(or similar)
<b:section-contents id='sidebar-right-1'>
Immediatly 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://sites.google.com/site/bloggerustemplatus/code/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("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "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", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Its almost done! :) Then preview your template. If installed correctly, you should see the tag cloud appear in your sidebar. That's all! Now you can customize your blogumus for your own choice. Lets see how can we customize that.

Customizing Blogumus>>
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 marked as RED.
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/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://sites.google.com/site/bloggerustemplatus/code/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, not "0x". Otherwise it will not work.!
Credit, Supports and requirements
Blogumus is based on the original WP Cumulus plugin by Roy Tanck, and was converted for use with Blogger layouts by Amanda Fazani on Blogger buster. Please leave the credit links in the widget code intact. These will not be seen by the majority of your blog readers (as they will only display if JavaScript and Flash is not activated) but leaving these links intact is a great way of passing some link love on to Roy for all his hard work, and to inform other Blogger users that they can find the widget codes on this site.

Requirements
For Blogumus to display properly in your template, you will need to have Flash Player 7 or higher. You can download the latest Flash Player plugin for your browser from Adobe. I'm not sure that this installation will support special characters as tags (only Latin characters supported at present). If you do experiecce issues with labels displaying incorrectly, please let me know. I'll try to add more support, but have very little experience using Flash!

13 comments:

Chrissy C said... My Blog Haven[Reply]My Blog Haven

Thanks for all the great blogger tips!

Ziaur said... My Blog Haven[Reply]My Blog Haven

@Chrissy C You are most welcome!!

Ram A Singh said... My Blog Haven[Reply]My Blog Haven

very useful tips. I will try to add in my other blog. U do not have adsense otherwise I need to reward you for this hard work. www.ram-a-singh.blogspot.com

juvylovezmuzik耶稣 said... My Blog Haven[Reply]My Blog Haven

it's not working in my blog.... why us that so?..
it only shows balnk page......
i tried different tips along the sites... the same results happened....... leave me a message...
here's my blog... thankz a lot

http://muzikcraze.blogspot.com/

Nana said... My Blog Haven[Reply]My Blog Haven

Thanks..really working on my blog.

Kathrine said... My Blog Haven[Reply]My Blog Haven

Tag clouds are must for fast SEO.
Followed this tutorial and added tag cloud to my blog seamlessly.

Clear instructions.

Thanks.

Kathrine

Ziaur said... My Blog Haven[Reply]My Blog Haven

@juvylovezmuzik?? First I'm sorry for answering late. because I'm so busy in those last 3/4 months. So I can't time to log in my blog. Sorry!!

Point of your solution, You say the tag cloud are not working in your blog? Its true that the tag cloud nor work in your blog. because you use qoutation mark for your label. If you use any qoutation mark in your label this gadget will not work. I see your blog and found that qoutation mark. So remove these marks and enjoy. Thanks.

nilbaboon said... My Blog Haven[Reply]My Blog Haven

WOW,THIS IS BEAUTIFUL!I'VE JUST APPLIED.IT'S REALLY MIND BLOWING.THANK YOU DUDE!

Brent Armstromg said... My Blog Haven[Reply]My Blog Haven

I just discovered this on your site. Very nice! I'm going to try it out on one of my blogspot blogs.

Anonymous said... My Blog Haven[Reply]My Blog Haven

Hello. I use for hosting blogspot. I mean i just bought a domain name and no hosting service. So how do i add these 2 files and where. Could i use Google Drive gfor that? And excuse me but most of blogspot users (blogger) are using google as the host. So where do we put these files?

Rajib Mridha said... My Blog Haven[Reply]My Blog Haven

Dear admin
Thank you so much. This is really good. Long time i was searching but i don't get it. No i am success.
This my blog.
Pc Help

VM said... My Blog Haven[Reply]My Blog Haven

thank u very much it really works.

Red cloud Systems said... My Blog Haven[Reply]My Blog Haven

the ruler of your world your smartphone might meet all your needs! But wait..a great cloud computing solution As could ease burdens, a VOIP phone can work wonders at home and if you want to improve your skills, lets get you professionally trained.
http://www.redcloudsystems.com/

Post a Comment