Saturday, May 12, 2012

How to Add Animated flash label cloud Blogumus for Blogger?

Another widgets tools for blogger I will share. The "Blogumus" is an Flash based tag cloud widget which uses scripts converted from Roy Tanck's WP Cumulus plugin for Wordpress. The result is the widget you can see in action at the top of this post. 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 with ease!

How to Add flash Animated label cloud Blogumus for Blogger

Step 1:
First Of all Goto Your blogger Layout>Page Elements page and add a Labels Widget there..You can Do that using the Add a Page Element Option on that

Choose to sort the labels Alphabetically when prompted.
Step 2:
After Adding the Label Widget Goto Layout>Edit Html (Do not expand the widget templates for the sake of easy explanation)

You will find some code similar to


<b:widget id='Label1' 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'><ul><b:loop values='data:labels' var='label'><li><b:if cond='data:blog.url == data:label.url'><span expr:dir='data:blog.languageDirection'><data:label.name/></span><b:else/><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a></b:if><span dir='ltr'>(<data:label.count/>)</span></li></b:loop></ul><b:include name='quickedit'/></div></b:includable></b:widget>


Immediately after this line, paste the following section of code: 


<b:widget id='Label1' 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'><center>
<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> | Distributed by <a href='http:/getseonow.blogspot.com/'>GetSeoNow-Pro Blogging Tools</a></div>
<script type='text/javascript'>
var so = new
SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf",
"tagcloud", "240", <!-- width="240" -->
"300", "7", <!-- height="300" -->
"#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'/></center>
</div>
</b:includable>
</b:widget>


Finally, preview your template. If installed correctly, you should see the tag cloud appear in your sidebar.
If you want to change the size and colour of the label cloud , just play around with the highlighted numbers in the code and you will do fine.

0 comments:

Post a Comment

 

Tags

Site Info

Followers

blogscenters Copyright © 2009 Blogger Template Designed by Bie Blogger Template