How To Show Technorati Style Labels In Your Blog

First Look at the Below Picture you will find the Labels created like technorati cloud style. Almost Every Blogger templates comes with a List view of label clouds. But This Label Cloud Style Makes Our Blog Looks beautiful And The Space take by List Label will be Reduced in this Cloud Style Label. Not Only this Will Show The Bigger & Highlighted The labels which have maximum No of Posts.

So Lets Start With This. We Have To Edit Our Blogger Template So For This First go to Your Blogger Account Sign In Using your Google Account.When You Will see the dashboard Then Click on layout. Following this Then Click on Edit Html. Before Begin Any edition in template I will advice to please take a backup of your blog template by clicking on Download Full Template.

After taking a backup click on check box of Expand Widget Templates. Now Search for the below code in your tamplate this can be done by CTRL+ F.

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

once you Got above code in your template Then Replace this Widget/Code with the below code.

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

<div class='widget-content'>
<div id='LabelDisplay'>
</div>
</div>

<script language='javascript' type='text/javascript'>
function zoomStyle() {
var max = 0;
var min = 10000;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> > max)
max = <data:label.count/>;
if (<data:label.count/> < min)
min = <data:label.count/>;
</b:loop>
var display = "";
<b:loop values='data:labels' var='label'>
var delta = <data:label.count/> - min;
var size = 80 + (delta * 100) / (max - min);
display = display + "<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span> ";
</b:loop>

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

zoomStyle();
</script>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

After Pasting this Code Click on Save Template And Visit your Blog. your Will Find The Same Thing for Labels As Shown In Pictures In My Blog. If you have Many Labels Then Use Wider Space to Show This or In The Footer of Your Blog.If you have Few Labels Then It is right to show Then In Side Bar.