Blogger Shout Box logo

Friday, October 23, 2009

Label Cloud Blogspot

by 0 comments



Translate This Post: Portugues | Francais | Espanol | Deutsche | Italiano | Chinese | Korean | Japanese


In blogger blog the label cloud is another important widget. I see this widget in phy3blog. You can make it is easy for a visitor to surf your blog by using label cloud. Here you just categories all your entries in organized manner.
I try to explain to install the label cloud widget in your blogspot blog. You follow the step as described here

First step:The first part to put in is the stylesheet section. The following code needs to be copied
and inserted into your stylesheet, which in the layouts is marked out by the <b:skin> tags.
Easiest thing to do is find the closing skin tag
]]></b:skin>

  and place the code right BEFORE that.
/* 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}

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

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [139,35,35];
var minFontSize = 15;
var minColor = [205,51,51];
var lcShowCount = false;
</script>

Third step:Now the widget itself. Scroll down and find the label widget in your sidebar. It should look
something 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 replace
the line above with it.

<b:widget id='Label12' 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>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';
         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>

Yes friends, you do it. If you like the tutorial, then don't forget to leave a comment. I suggest you to visit the original work of label cloud  by phy3blog.

Happy blogging. Stay with me ...

Label Cloud BlogspotSocialTwist Tell-a-Friend Subscribe to updates
Comments 0 comments
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))
Welcome You To Comment on My Blog

Comment please if you have any question on-topic and not abusive. Try not to include website URLs/links in your comments.

Srikanta Lenka
I am a teacher and blogger. INDIA
Drop me a line
Blogger

Subscribe my feeds via e-mail
Subscribe in your preferred RSS reader
  • Add to My AOL
  • Subscribe in NewsGator Online
  • Add to Google Reader or Homepage
  • Subscribe in Bloglines
  • Add to netvibes

Subscribe feeds rss Recent Entries

Advertise on this site Sponsored links

Sponsored Links

Label Cloud

Blogumulus by Roy Tanck and Amanda Fazani

BLOGROLL on BLOGGER

http://catswatch.blogspot.com Your favicon Your favicon Your favicon
Your favicon Your favicon Your favicon Your favicon

Subscribe feeds rss Recent Comments

Hello World

BLOGDIRECTORY
Join My Community at MyBloglog!Blogging Tips Blogs - BlogCatalog Blog DirectoryAdd to Technorati Favorites
BlogRankers.com Education/Research blogs Personal blogs
Top100 Bloggers - Top Blog Directory - Blog Top list
blogarama - the blog directory
BLOGRANKS
View blog authorityOpen Directory Project at dmoz.orgMy BlogCatalog BlogRank
indiae.in we are in
Indiae.in

Indiae: India's search engine