Monday, October 18, 2010

Animated Flash Tag/Label Cloud For 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. :)

Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Now find (CTRL+F) this code in the template

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

And immediately after this code line, paste this code in new line:
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<div class='widget-content'>
<script src='' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href=''>Roy Tanck</a> and <a href=''>Amanda Fazani</a> via <a href=''>Royal Tutor</a></div>
<script type='text/javascript'>
var so = new SWFObject(&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'><></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
<b:include name='quickedit'/>
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″

Change height and width
Both of these options can be configured in the following line:
var so = new SWFObject("", "tagcloud", "240", "300", "7", "#ffffff");
The width is 240px and the height is 300px. These numerical values specify the width and height in pixels, so you can alter these of you prefer.

Change background color
To change the background color, alter the hex value found in this line:
var so = new SWFObject("", "tagcloud", "240", "300", "7", "#ffffff");
By default, this is set to white(#ffffff), but you can alter this to any value you prefer.

Change the color of text
The tag-links are black by default, though you can change this within the following line using the tcolor value:
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!

To alter the size of tags/links
In the following line of code, the size of the tag links is "12" (proportionate to the size of the widget). You can change this value to a smaller or larger number depending on whether you prefer the links to appear smaller or larger in your widget.
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><></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.

You are done.:)

Subscribe to this Blog via Email:

Click here to Subscribe to FREE email updates from "Blogger Tutorials", so that you do not miss out anything that can be valuable to you and your blog!!

Spread It : Share On Facebook ! Share On Google Buzz ! Add To ! Share On Digg ! Share On Reddit ! Share On LinkedIn ! Post To Blogger ! Share On StumbleUpon ! Share On Friend Feed ! Share On MySpace ! Share On Yahoo Buzz ! Get These Share Buttons ! Share On Google Reader ! Google Bookmark ! Send An Email ! Blog Feed !


Post a Comment


Recent Posts


Recent Comments