Summary: Blogger Clouds gives professional look to your blogger blog and also for better SEO Tips and attract your visitors and readers and also you can customize your fonts and colors to look better your blogger sidebar

By this useful article you teach that how to add wonderful stylish label clouds to free blog blogger sidebar for better SEO Tips. Blogger clouds widget gives professional look to your blogger blog. I have received some emails from new visitors and other friends they said that they want to add simple and easy label clouds widget to blogger sidebar. Now I guide you easily step by step how you add it.

1. Go to www.blogger.com then Dashboard and click on Design tab after that Edit HTML. I advice that before applying all codes you should be keep a backup of your blogger template any place of your computer.

2. Do not hurry up search the following code line to use Ctr+F command.

]]></b:skin>

3. Now paste the code shown below before the above code line.

/* Start Label Cloud CSS by www.ravisaive.in */

#labelCloud {text-align:center;font-family:arial,sans-serif;}

#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}

#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}

#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}

#labelCloud a{text-decoration:none}

#labelCloud a:hover{text-decoration:underline}

#labelCloud li a{}

#labelCloud .label-cloud {}

#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}

#labelCloud .label-cloud li:before{content:"" !important}

/* End Label Cloud CSS by www.ravisaive.in */

4. Once again search the following code line to use Ctr+ F command in Edit HTML area.

</head>

5. Paste the following code before the above code line with carefully.

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 30;
var maxColor = [0,0,250];
var minFontSize = 20;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

6. After that finally search following useful code in your blogger template to use Ctr+F Command.

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

7. Finally replace following long code with above code with sensibility.

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

<b:includable id='main'>

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

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

</b:if>

<div class='widget-content'>

<div id='labelCloud'/>

<script type='text/javascript'>

// Don't change anything past this point -----------------

// Cloud function s() ripped from del.icio.us

function s(a,b,i,x){

if(a>b){

var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)

}

else{

var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)

}

return v

}

var c=[];

var labelCount = new Array();

var ts = new Object;

<b:loop values='data:labels' var='label'>

var theName = "<data:label.name/>";

ts[theName] = <data:label.count/>;

</b:loop>

for (t in ts){

if (!labelCount[ts[t]]){

labelCount[ts[t]] = new Array(ts[t])

}

var ta=cloudMin-1;

tz = labelCount.length - cloudMin;

lc2 = document.getElementById('labelCloud');

ul = document.createElement('ul');

ul.className = 'label-cloud';

for(var t in ts){

if(ts[t] < cloudMin){

continue;

}

for (var i=0;3 > i;i++) {

c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)

}

var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);

li = document.createElement('li');

li.style.fontSize = fs+'px';

li.style.lineHeight = '1';

a = document.createElement('a');

a.title = ts[t]+' Posts in '+t;

a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';

a.href = '/search/label/'+encodeURIComponent(t);

if (lcShowCount){

span = document.createElement('span');

span.innerHTML = '('+ts[t]+') ';

span.className = 'label-count';

a.appendChild(document.createTextNode(t));

li.appendChild(a);

li.appendChild(span);

}

else {

a.appendChild(document.createTextNode(t));

li.appendChild(a);

}

ul.appendChild(li);

abnk = document.createTextNode(' ');

ul.appendChild(abnk);

}

lc2.appendChild(ul);

</script>

<noscript>

<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<data:label.name/>

<b:else/>

<a expr:href='data:label.url'><data:label.name/></a>

</b:if>

(<data:label.count/>)

</li>

</b:loop>

</ul>

</noscript>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

8. One thing note that you should be customize your code with para-5 above according your choice that what type of sizes do you like to change i.e var maxFontSize, var maxColor, var minFontSize,var minColor. Now save your template and see the result in your blogger sidebar. One thing note that it is very necessary that show your label widget in blogger templates sidebar.

I hope you like the above simple step by step guide line regarding how to add cloud labels to your blogger blog sidebar for better SEO tips. If you like this article please your comments.