Label Cloud Widget For Blogger / Blogspot

Thank you for visiting Design24h.com. Do you have comments or questions comment about this article comments.You can also read the article on the blog via the tools to read news Feed Link with this or to subscribe to new posts via email. In addition, you can address this blog to Favorites (Internet Explorer) or Bookmarks (Mozilla Firefox) for easy tracking. If you're working at Google Blogger blog you can also save this blog in the track records, which are the sources that bring visitors your blog. I hope you find interesting tips from this page.

A tag cloud or label cloud for blogger is a list of all the labels used within a blogger blog displayed with style.You can see a demo of the Label cloud widget here on my site. This Tag Cloud Widget was originally developed by phydeaux3. I have just simplified and made it easier to install..



You can see a good implementation of this label cloud widget on one of our readers blog -Speak Media Blog.


First Of all Goto Your blogger Layout>Page Elements page and add a Labels Widget there..You can Do that using the Add a Page Element Option on that page.

Choose to sort the labels Alphabetically when prompted.



After Adding the Label Widget Goto Layout>Edit Html (Do not expand the widget templates for the sake of easy explanation)




You will find some code similar to

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

Now Replace that with

<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&gt;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 = &quot;<data:label.name/>&quot;;


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(&#39;labelCloud&#39;);

ul = document.createElement(&#39;ul&#39;);

ul.className = &#39;label-cloud&#39;;

for(var t in ts){


if(ts[t] &lt; cloudMin){

continue;

}

for (var i=0;3 &gt; 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(&#39;li&#39;);


li.style.fontSize = fs+&#39;px&#39;;



a = document.createElement(&#39;a&#39;);

a.title = ts[t]+&#39; Posts in &#39;+t;

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


a.href = &#39;/search/label/&#39;+encodeURIComponent(t);

if (lcShowCount){

span = document.createElement(&#39;span&#39;);

span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;

span.className = &#39;label-count&#39;;


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(&#39; &#39;);

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.bloggerplugins.org'>Blogger Widgets</a></small>

<b:include name='quickedit'/>


</div>



</b:includable>

</b:widget>

Now find

]]></b:skin>

and replace it with

#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:&quot;&quot; !important}


]]></b:skin>

Save your template and now you should get a working Label Cloud On your Blog.

You may be interested in the following freebies as well:

Search In Blog:

Thank you for reading the article. Do you have suggestions or how better to go back a few words to share with everyone. Please note you, these comments have no comment of building or helping each other progress will be deleted without notice. In addition, you will not necessarily be a member of the Google Blogger or other networks listed below are new comment, use Anonymous (anonymous) if you do not want to leave personal information of themselves.Wishing to house your have been many visitors. The contents of typing in Chinese are clearly marked will easily account for more than all of sympathy. (Design24h.com).