You are here: Home / Search Engines / Google / Adding a Tag / Label Cloud to Your Blogger Account
April 22, 2010 by Leave a Comment

Adding a Tag / Label Cloud to Your Blogger Account

Tag clouds have become more popular as websites begin to use them to help organize their keywords in an easy to read manner for their readers.

First used by Flikr the website they have since grown. Tag clouds are a nice feature for a blog or website as it organizes major keywords into clickable links, making it easy to find and search for topics/ categories.

It is easy to set up what has now become popularized and known as the tag or label cloud. Basically it is a dynamic area which displays your prominent keywords in a easy to read, fun fashion. It allows for quick navigation to a selected topic on your page. What I will explain is how to add this cloud to your Google Blogger account. You can see an example of this on my blog to the right side where it says Label Cloud.

Since Word press has a plug-in for this, blogger users need to hand hack the code. Don’t worry it is easy to do and takes less than 10 minutes to do.

ENJOY!

First you need to have a Blogger Account and must be using the layout templates. It does not work if you do not have any posts or and tags/labels in your posts. So before you install this make a few posts and add some labels.

Then go to you Blogger Account and go to “Layout”. From there you should click on “Add A Gadget”. Add the “Labels” widget to your blog. Now save your changes and click on the link on the top navigation menu that reads “Edit HTML”. Once here it is highly recommended to back-up your files. You can do so by clicking on “Download Full Template” and saving it somewhere just in case you screw up the code. Go ahead and Click to learn more about direct cloud connection for larger businesses to learn more about direct cloud connection for larger businesses.

Once this has been done you are ready to add to the HTML. Don’t worry it is basic HTML, where you only need to add or remove lines of code. You will not be doing any actual coding. There will be a ckeckbox that says “Expand Widget Templates”. Leave this box unchecked as it will simplify things.

The code is broken down into three sections; the stylesheet, a configurations section, and the actual widget.

The easiest way to add the code is to first search for the area of HTML that needs to be modified. To do so hold down the control button + f and a find box will appear asking what you are looking for. Enter the section of HTML you are trying to find and you will be instantly brough to it. You will not have to search around for hours trying to find the specific code block.

The first step is adding a snippet of code in the stylesheet immediately before “”]]>“”

Copy this exatly as is. You can modify it later:

The next step is to find the configuration section and add another snippet of code, this time find the ]]> and the

Place the following code between these two sections before the head and after the b:skin

Leave the default settings as they are now and I will explain how they can be modified latter.

Now we need to edit the code for the widget itself. Hold control + and find

“the head tag”

Replace the line above with the following code exactly as it reads:

<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&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(‘labelCloud’);
ul = document.createElement(‘ul’);
ul.className = ‘label-cloud’;
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(‘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>

That is all you have to do. Now your tag / label cloud should appear on your blogger page.

If the tag cloud does not appear there may be two main issues at hand. The first issue is not having more than one label in your blog posts. The script requires multiple labels in order to work. The second issue is to make sure you don’t use quotation marks “” in your labels.

Once the bugs are fixed and you tag cloud is showing you may want to customize it. Everything is customizable; you just have to make minor changes.

Special thanks to the delevoper!

http://phy3blog.googlepages.com/Beta-Blogger-Label-Cloud.html

Click to rate this post!
[Total: 0 Average: 0]

Related posts:

  1. Robots.txt Meta Tag Versus X-Robots-Tag HTTP Header .htaccess
  2. Adding a FAQ’s Page for SEO Purposes
  3. International SEO: Hreflang Tag for Location Targeting
  4. White Label SEO: Why is it so Hard to Outsource?
  5. Perfect Your Approach to Google AdWords Account Management
About Brandon Leibowitz

is a Social Media fanatic. His blog, Bosmol, is based on trending stories on various topics related to social media, Facebook, Twitter, LinkedIn, YouTube, Google Plus, Internet Marketing, Social Bookmarking, Smartphones, SEO, and many other topics. Established in Los Angeles, California in 2007. Subscribe to us to receive the latest news and updates first. Please feel free to comment back.

Loading Facebook Comments ...

Speak Your Mind

*