How to add label cloud in your blog

Hello,here is a trick to add label cloud in your blog.To put label cloud or tag cloud on your blog side bar template you have to follow the below instructions carefully.Label cloud help your readers in finding content according to label.Firstly Backup your template.

• Go to DESIGN

• Go to Edit HTML 

•  Then seach for the code ]]></b:skin> and place the below in place of ]]></b:skin>

/* Label Cloud Styles
----------------------------------------------- */
#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} 

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

Now save the template 

And search for the below mentioned label widget in blogger html.

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

Replace with the below code

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'><br /> <b:includable id='main'><br /> <b:if cond='data:title'><br /> <h2><data:title/></h2> </b:if><br /> <br /> <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><br /> <br /> <noscript><br /> <ul> <b:loop values='data:labels' var='label'> <li><br /> <b:if cond='data:blog.url == data:label.url'><br /> <data:label.name/><br /> <b:else/><br /> <a expr:href='data:label.url'><data:label.name/></a><br /> </b:if><br /> (<data:label.count/>)<br /> </li> </b:loop> </ul></noscript><br /> <b:include name='quickedit'/><br /> </div><br /> </b:includable><br /> </b:widget>

Save the template.If any problem? then  post your problem as comments.

Please add your comments!

Continue reading →