[How to] Add Animated Label Cloud For Blogger : Blogumus [Tutorial]

Hello friends,You Must know if you want to be a pro Blogger that the most important thing is that your blog navigation is easy for your readers.So One Widget which Helps your readers to easily crawl to your blog for the content they are searching for is BLOGUMUS that is a animated label cloud..So the tutorial for How to Add Animated Label Cloud For Blogger goes HERE

Login to your Blogger Dashboard..Select your blog,
Go to Design Tab  Then Edit Html (Back up your Template First)

Press Ctrl+F to open the find box….

now finde one of th code given below..

<b:section class=’main’ id=’main’ showaddelement=’no’> (code A)


<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’> (code B)

Now paste the code given in box below immediatly after the searched CODE A orCODE B

<b:widget id=’Label99′ locked=’false’ title=’Labels’ type=’Label’>
<b:includable id=’main’>
<b:if cond=’data:title’>
<div class=’widget-content’>
<script src=’http://sites.google.com/site/bloggerustemplatus/code/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://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;);
<b:include name=’quickedit’/>

 Now Preview your template if its working properly,then save it,and go to Page Elements to adjust the position of your Label widget you added(Blogumus).

Customize your Label Widget (Blogumus)
Defaul settings for this widget are:
Width  240px
Height 300px
Background color  white
Test color grey
Font size “12”

Now if u want to customize this widget to suit your blog..learn step by step..

change width,height,background.:

Firstly look at code line given below.

var so = new SWFObject(“http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf”, “tagcloud”, “240”, “300”, “7”, “#ffffff”);

this code works like

“tagcloud”, “Widht”, “Height”, “7”, “#Background”);

Change the Colour of Text:

we need to edit this code

so.addVariable(“tcolor”, “0x333333”);

Only chnge the code after ‘0x’ that is only numbers…change 333333 to any Hex colour code….

Change Maximum size of the Tag

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>”);

chnge the no. with STYLE=’-‘..

see the preview to check all these customizations match your blog or not….

let me know if u use this gadget..drop your blog address..

In Return i just need you to share this post and hit like if you like this post…..Comments Are Welcome…thanx..

Abhishek Balani

A Full Stack Developer, sometimes designer, passionate coder, tireless knowledge seeker, curious learner.

I have a strong passion for new technologies, very autodidact and love to build new things from the ground up. Having 5+ years of dynamic experience accumulated from working in early stage startups to mid-sized organizations in Agile environment.

Skilled in Python and related frameworks, React.js, Databases, Hadoop, Elastic Search and various AWS Services like Boto3, API Gateway, Lamda, EC2, EMR, CloudWatch.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.