Nov 19, 2008

Tag Cloud

Hi friends,

As you you know every blog we post, falls under some category or the other. We try to categorize whatever we blog about. It makes our blog more organized and also helps searching. A Tag Cloud is yet another way of displaying your labels. The widget displays the current labels of your blog and occupies less space in case you have numerous labels.

The steps for adding the widget is really simple. Here we go :

Step1: Backup your template. Its necessary so that we can revert to the original in case the widget doesn't install properly. So, Download the current template to your PC.

Step2: Click the "Expand Widget Templates" so that the full template is displayed in the box below.

Step3: Now look for the desired place to install the widget, preferably in the right sidebar. Next comes the Copy-Paste  job. Copy the code below and paste it at the desired position.

 <b:section id='tag cloud'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>

<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.bloggerbuster.com'>Amanda Fazani</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;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'><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>
</b:section>

Customization :

The default installation includes the following preset variables: 

Width is set to 240px
Height is set to 300px;
Background color is white(#ffffff)
Test color is grey(333333)
Font size is "12"

DONE!! .. your tag cloud is almost created. Just perform the required customization and save the template.

Source: Blogger Buster

Back to Useful Widgets

0 comments:

Post a Comment