Blogumus: Animated Label Cloud for Blogger

Did you label or categorize your posts? Labeling or categorizing your posts under common topics will help your readers to find more specific stories related to your posts. Mostly readers may tend to find your posts through organic web search or just stop by on your blog via referral. After being navigated to your posts if they find your article interesting to them, they would like to find out what are most relevant articles on your blog too. If they jump to homepage, they will find recent posts published on your blog. But labels under your posts helps them to see what similar posts you have got. However all those labels would be displayed on post footer. But would you like to make it more interactive and eye catching for your readers?

Blogger offers you labels widget through its official widget collection. So whenever users visit your blog, they will able to find your posts through specific categories rather than searching your all content. Animated label cloud widget is a deviate from a WordPress plugin and it has interactive animation of labels you have specified in your posts. It displays all your labels specified in your posts with a circular animation. Whenever an user hover over the widget, it will tend to animate and rotate your labels in circular motion. It is much attracting and so you would be more preferable to add this widget to your blog to grab attention of your visitors too. Shall we?

Before You Go:

* Make sure you have already labeled or categorized your posts to display them on this widget. Else read How to Label or Categorize Your Posts in Blogger and label your posts first.

* If you already added standard Label widget, remove it from your blog template.

How to Remove Label Widget from Your Template

i. Go to your Blogger Dashboard.

ii. Click on your Blog Title.

iii. Navigate to Layout from left pane.

iv. Find the Labels element on your template.

Note: If you have altered title of Labels widget earlier, then find search for that named element.

v. Click Edit link correspond to Labels element.

vi. Now click Remove button on next pop up windows and confirm deletion.

Steps:

1. Go to your Blogger Dashboard.

2. Click on your Blog Title.

3. Navigate to Template tab from left pane.

Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.

4. Click Edit HTML button and proceed to template editor by clicking Proceed button.

5. Search for a line of code similar to <b:section-contents id='sidebar-right-1'> and add following code snippet right after that line.

<b:widget id='Label1' locked='false' title='' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<script src='https://sites.google.com/site/mayura4ever/swfobject.js' type='text/javascript'/>

<div id='flashcontent'></div>

<script type='text/javascript'>

var so = new SWFObject("https://sites.google.com/site/mayura4ever/tagcloud.swf", "tagcloud", "300", "300", "7", "#ffffff");

so.addParam("wmode", "transparent");

so.addVariable("tcolor", "0x333333");

so.addVariable("mode", "tags");

so.addVariable("distr", "true");

so.addVariable("tspeed", "100");

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

so.addParam("allowScriptAccess", "always");

so.write("flashcontent");

</script>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Color Indication Information

   - Width

   - Height

   - Background Color

   - Remove this line to disable transparent mode

   - Tag/Text Color

Here text color specified using flash variable. So you can't use exact Hex code for color. Specify your Hex color code without the # prefix, after 0x.

i.e: If Hex color code is #333333, use it as 0x333333

   - Rotation Speed

   - Text Size

6. Preview your blog.

7. Save your template.

Credits: The initial development of Animated Label Cloud credited to Roy Trank & Luke Morton Amanda Kennedy managed to convert it to use with Blogger.

Enjoy :-)