May 9, 2011

Blogger Tutorial : Animated Cloud Label Widget For Blogger


Hello guys. It seems like it has been a long time since I last post about blogger tutorial. And now I would like to write and share a bit about how you can create a label cloud widget in blogger that can moving around just like what wordpress did. It is very easy and simple. Cloud text label will make your blog more professional look.“Blogumus” is a flash based tag cloud widget which uses scripts converted from Roy Tanck’s WP Cumulus plugin for Wordpress. But now you may also use this widget in blogger.

Ok let us start now. Just follow the steps below and within 5 minutes, you are now can create your cloud label in blogger that will make you more fun while blogging.



1) First of all, login to your blogger account www.blogger.com



2) At the dashboard page, choose "design" (Click To Enlarge)

3) Then choose "Edit HTML"


4) Click "Ctrl + F" to find this code : <b:section class='sidebar' id='sidebar' preferred='yes'>

5) Below the above code mentioned, copy and paste these new code :


<b:widget id='Label99' locked='false' title='No' 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(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;300&quot;, &quot;350&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='13'><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>

6) Done! Now save the template!
Happy Blogging Everyone!

Reactions: