February 24, 2011

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 :-)




Awesome! Thanks for coming by and taking your time to read this post :) I hope you have learnt something today. Now you can share it with your friends and I'd love to hear from you too.






Related Posts and Categories


Category, , , ,





Comments

* Make sure your comment is genuine and comply with our commenting guidelines.

* Review your email and reply notification settings to receive replies via email.


Unknown said...

Very Nice bro
Mayura

Mayura De Silva said...

Thanks for stopping by mate :)

Cheers...

Unknown said...

i still can't figure out why this labels cloud stopped working on my blog, i guess one of many changes i applied was at fault, and i'm mad it is not working, it feels like something went missing, damn it

Mayura De Silva said...

Where did you implemented label widget? Remove implemented code and implement it again without changing any values in the code mate. Right after, let me know here :)

Cheers...

Unknown said...

nope, it's not working, I've tried like million times, i even tried "revert widgets" and then put the code again, and still nothing, i would try and make the blog from scratch but that's a lot of work and time, and plus all my stats will be gone

Mayura De Silva said...

Don't start your blog from scratch mate. Never :) Just drop your URL once after implementing label widget. I ll check your blog. And implement it without any changes to code.

Cheers...

Unknown said...

shame on you for not knowing my blog by now :D http://genutsu.blogspot.com/ it's on left sidebar, if it works i'll move it down under posts

Mayura De Silva said...

I know mate :D I can find it via your profile too. But I don't know where you gonna implement label widget exactly...

Cheers...

Mayura De Silva said...

Hi Eugeniu,

Can you tell me what are the explicit script added to your blog? Can you remove them from template and preview your blog WITHOUT SAVING template?

Cheers...

Unknown said...

look here http://viatanmd.blogspot.com/ on the right sidebar, it works perfectly and it's the same script, i don't think we're going to figure this one out :(

Mayura De Silva said...

Label widget works on other blogs. I mean not label script mate. What are the other scripts you added on your blog? Try removing other scripts one by one in template window without saving and just preview your blog.

Mayura De Silva said...

I'm gonna move your thread to Support section mate. Drop your future replies here ~ Label Widget.

I hope we can figure it out :) I've implemented label widget in another blog which has your exact template. It's working there. Something interfering your label widget. Let's find out. Drop your replies @ Support section.

Cheers...