Sunday, September 6, 2009

Flash Animated Label /Tag-Cloud Widget for Blogger Method 2

“Blogumulus” is an Flash based tag cloud widget which uses script converted from Roy Tanck’s WP Cumulus plug-in for WordPress. You need to move your mouse over the Flash object to see the animation is begin.

Mechanism
This widget uses a combination of JavaScript and Flash animation to parse and display blog labels. To see Blogumus in action, both Flash and JavaScript must be installed and need to be enabled in internet browser. However those who do not use JavaScript of Flash (including search engine spiders) still can see this and label links will be clickable though not animated.Flash TabCloud Blogger

Installation
You 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:

1. Go to Layout >> Edit HTML in your Blogger dashboard, and search for the exact section where you want to install the tab cloud. Blogger section is the part which holds widgets (Gadgets) and it begins with <b:section.

You need to find the exact place which you need to be installed the tag cloud. Here I’m assuming in your blog has a section called sidebar and you need to install the Blogumulus before every other widget.

2. Find the sidebar section (normally every blog template contain sidebar however some are not, it is depend on the template which you use).

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

3. Immediatly after this line, paste the following section of code:


<b:widget id='Label2' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
</b:if>
<div class='widget-content'>
<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.tutoorials.com'>Vinoj at Tutoorials.com</a></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;300&quot;, &quot;200&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. Save template and preview if the tag-cloud installed correctly, you should see the tag cloud appear in your sidebar before any other widgets.

5. Customizing the Tag-Cloud
The default installation, Blogumulus includes the following preset variables:

Width = 240px
Height = 300px;
Background color = white
Test color = grey
Font size = “12″

And do not hesitate to change other variables until you get the most suited one for you. I love experiments.

1 comments:

Jaysun Mubarrok said...

thanks ilmunya

http://kumpulankonsultasi.blogspot.com/

Post a Comment