Make Label Tag in Blogger

Setup and configuration for New Blogger Tag Cloud / Label Cloud:

Here is the code and setup information to use the Label Cloud in New Blogger. First, you must have a clear blog on New Blogger, and you MUST use the layout template,
(this is not available for classic templates, or FTP published blogs) and you must have some post already labeled. (No need to at least one label with more than one entry or the scripts hit a bug - so have at least one label with more than one entry before starting).


Make sure you backup your template before making any changes!

Log in to Blogger and go to the layout. In the 'Page Elements' setup page
make sure you have a label widget already installed where you want it (can be moved around
later). Then go to the Edit HTML settings and leave the widgets NOT exapanded. Akan make
it is easy to handle.


Now the code comes in 3 parts. To the stylesheet, a configurations section,
and the actual widget itself.

The first to put in is the stylesheet. The following code must be copied
and included in the stylesheet on the layout of the exit marked with .
Termudah untuk dilakukan adalah mencari tag penutup kulit

]]></b:skin>

and place the code right BEFORE that.
There, copy and paste without modification right now. I will explain what can be tweaked
then.

/* 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}

This is the next section for configuration Cloud. He is also running in the template, but outside of the stylesheet. The easiest thing to do is to find the closing stylesheet tag

]]></b:skin>

But this time place the code right AFTER ]]></b:skin>, but before the tag </head>. Here it is.

<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>

All these settings can be changed, but I will explain them in some time. Default will be working for at this time.


Now the widgets themselves. Scroll down and find the label widget in your sidebar. Must be seen
like this.

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

Copy the following code (from beginning widget tag to ending widget tag) and change
the line above it.

<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 > 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>

Now if all was well, and you have a posting labeled, so if you see the first
blog you will see some form of Cloud appears. If it does not appear, then something
There was an error. You may have to go back and try again from the beginning.

Want to Make Label tag Like Wordpress please read HERE


Related Article for this post :