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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Next Post

Creating Simple Drop Down Menu Code

Sun Nov 27 , 2016
A drop down is really essential tool or widget for any blog or websites. It gives real feel or look of the template or blog. Drop down menu lets users easily navigate through different parts of the blog. In this tutorial i will teach you to add simple navigation menu […]
Creating Simple Drop Down Menu Code