Labels cloud, also known as Tags cloud is a widget that sums up all your blogger / blogspot blog labels and displays with style. By default blogger blog shows the list of labels in one column and if you have a lots of labels, the list goes really long. But, labels cloud add style to it, highlights the important labels and gives less importance to labels with minimal posts, with the freedom to remove label number counts. This is useful for both, blogs having lots of posts with labels or blogs having less no of posts with few labels. Check out the below screenshots.
This is how labels cloud will look in blogger blogs having less posts.
If you are having large number of posts with lots of labels, labels cloud widget will look this in your blogger/blogspot blog.
How to add Labels Cloud or Tags Cloud widget to your Blogger / Blogspot blog
1. Login to your blogger dashboard.
2. Navigate to Layout >> Page Elements and choose Labels widget. Labels cloud looks like the below screenshot.
3. Select to sort labels alphabetically from the options and then add it to your blog.
4. Once you are done with the above steps, navigate to Layout >> Edit HTML. (Make sure that you have NOT checked the “Expand Widget templates” option)
5. Search for the following piece of code in your template. Even if not exact, you can find a similar piece of code.
<b:widget id=’Label1′ locked=’false’ title=’Labels’ type=’Label’/>
6. Now replace the above code with the following codes.
<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’/>
<p align=’center’>
<script type=’text/javascript’>
var cloudMin = 1;
var maxFontSize = 25;
var maxColor = [0,255,0];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
// 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';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>
</p>
<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>
<br/>Powered By:<small><a href=’http://www.solidblogger.com’>Blogger Widgets</a></small>
<b:include name=’quickedit’/>
</div></b:includable>
</b:widget>
7. Now we are done with the labels cloud code. But we are yet to add style and format it to look good on your blog. Follow below steps to make it look good in your blog sidebar.
8. Search for the following code in your HTML.
]]></b:skin>
9. Replace the above code with the following code.
#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>
10. Click on Save to save changes and you are done.
Now open your blog and you can see the stylish and new blogger labels cloud in your sidebar. You can rearrange it’s location now, to fit better with your blogger template. If you face any problems in adding labels cloud widget, feel free to use below comments section.
Below are some more related articles to the topic:
When i inserted the codes i get this error……
We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “id”.
@ Shana : DO NOT expand template while adding codes, else you will get these errors. Try adding the code again without expanding the code.
I have face same problem as Shana and I have not expend also ,but same error here.
@ Neeru, which template are you using?
Hello
I am also facing the problem, i don’t expand my template
it sad :-
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “id”.
following error occured while adding cloud widgets as per yr direction
We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute “{1}” associated with an element type “id”.
@ Arvind & Mohinder56 : You have to completely remove
and paste the above given code in that space. Trying to paste the code just above or blow this code gives errors. Also, expand widget templates before doing any editing.
Hi guys i got the solution ! Just delete the previous label widget OR fully as shown in the below image link and replace the link shown above (No.6)
http://lh5.ggpht.com/_I_ixxWlWOZ0/ScIBKStp3RI/AAAAAAAAEAU/maeEUQQXbvI/s1600/image%5B80%5D.png
Now save it !! should work…
Note: if u don’t find, Try Searching (press Ctrl F to search easily
Sorry guys the ‘label’ (No.5 see above) link is not showing on the comment i posted previously…see if u don’t find ‘label1′ try ‘label2′ the thing is delete all the previous widget as shown in the below link
http://lh5.ggpht.com/_I_ixxWlWOZ0/ScIBKStp3RI/AAAAAAAAEAU/maeEUQQXbvI/s1600/image%5B80%5D.png
http://andrewpauldhas.blogspot.com/