Stylish Label Cloud Widget for Blogger

As you all know good and relevant widgets make your blog easy to navigate and can help to keep visitors engaged on your blog. Today i will teach you to add such useful widget to your blog. This blogger widget looks cool on your blog as well as helps user to navigate on your blog. I had previously posted about how to add label or categories cloud on your blog, In this post i will teach you to add animated label cloud to your blog.

Adding Label or Categories Cloud in Blogger

     1. Go to Dashboard > Layout > Add Gadget.
    2. Now choose labels from pop up window and change setting as show in below image.
blogger label
3. Now save it and follow below steps to animate label or categories cloud. For more details check below article.

Animating Label Cloud for Blogger

     1. Go to your Blogger Dashboard and Click on Template
    2. Then click on Edit HTML
    3. Now search for below code be clicking CTRL  + F
                              <b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
    4. Now paste below code just after the code you search on step 3.
<b:widget id=’Label99′ 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’>
<script src=’http://sites.google.com/site/bloggerustemplatus/code/swfobject.js’ type=’text/javascript’/>
<div id=’flashcontent’>My Bloggers World <a href=’http://mybloggersworld.com/’>Mbw</a> and <a href=’http://mybloggersworld.com/’>Mbw</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;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>

     5. Now save the template and go to Layout to change the position of the widget.
6. If you have any problem implementing this widget on your blog leave a comment below, i will be glad to help you out. You may also like to add below widgets to your blog.

We will be happy to hear your thoughts

Leave a reply