The new quilt and a late post :)

My customization-of-the-template spree continues and a new widget gives its entry - The Quilt.



First,an introduction to the concept of scrobbling, or more precisely as audioscrobbling.Each and every song you listen to is noted down an a database of it is maintained online.This is called 'scrobbling'.And your 'charts' are generated.They might be weekly,monthly or even yearly.This is a way of analyzing your music habits.As time passes, you come to know of your tastes and how they have undergone changes as you discover new artists and songs.Like how Enter Sandman could make Linkin Park go down to Metallica in three days in my case ;) .

And, here is where Last.fm enters the scene.Last.fm© is primarily a Internet radio station and music recommendation system.

Last.fm provides a software that you can install on your computer that would scrobble all the songs that you play on your media player.Ofcourse you also have to install a Audioscrobbler© plugin for that media player.The best part is that it will scrobble even when you are offline.It will write all data to a file and then upload it when you are connected.

Now,the extras:
Last.fm provides nice goodies in the form of code snippets that you can embed on your webpage/blog. This includes live RSS feed of your played songs, and a nice widget called 'quilt' which consists of small thumbnails of all the albums/artists you've hears to.And again ,the choice between albums or artists is yours.

This was just intended to give you a little introduction to the world of audioscrobbling and the world's largest social music platform, Last.fm.

Find out more about Last.fm at Wikipedia and the site itself.

And,in case you join Last.fm ,add me as a friend :).

My profile at Last.fm

More customization to the tag cloud code

Now, we move on to edit the CSS part of the widget. Most of the lines are just to ensure that the cloud doesn't infringe other parts of the page and ruin the nicety of it.

However, there are some elements that are easy and can be modifies to suit your taste.

Consider the first line:

#labelCloud{text-align:center;font-family:arial,sans-serif;}

You could change the font used. You can also change the alignment of the text. I’ve chosen center but other values (given below) can also be used. Try out each and find your choice.

text-align:right;
text-align:left;

The next line is

#labelCloud  .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}

Most of it is not necessary unless you are a serious Web designer. We shall consider only the first entry

display:inline;

This ‘inline’ value makes the tags appear ‘floating’ in the cloud.(In fact, this setting is what causes the ‘cloud’ )

We could’ve changed this to

display:block;

This will make the tags appear in what is called a ‘flat’ listing. Each entry has its own line. And in case you choose this, you might like to sort them by frequency instead of having them listed in alphabetical order. This can be changed by editing the widget in the Page Elements tab in Template section of the blog (as shown below).


And with this, I intend to end this short and informative (hopefully!!!) post. There is much more flexibility in the code but I intended this post for novices creating a tag cloud as a nice little widget to their blog.

PS:Oh,I forgot to add this in the original post.This is a continuation to the tutorial on How to add a tag cloud to your Blogger blogs.

A tag cloud to your blog

All users of Blogger must be knowing what are tags and must’ve tagged their posts.
Now, let us see how to create a tag cloud for your blog.

First, make sure you back up your template. This can be done by navigating to the Edit HTML page in the Template which appears in the Dashboard. Click on the ‘Download Full Template’.

The code consists of three parts: a section for the stylesheet , a configuration section , and the actual widget itself.

---

The Stylesheet Section:

The stylesheet section is marked out in the template between the , tags. The easiest thing to do is to locate the closing tag. In Blogger , the closing line is on a separate line as

]]><b:skin>

Now, place the following code just before this closing tag.

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

---

The Configuration Section

This code is also in the head of the template but outside the stylesheet part of it So, to make things easy, we place the following code just after the above told tag.

<script type='text/javascript'>
// Label Cloud User Variables
var lcBlogURL = 'http://YOURBLOG.blogspot.com';
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script> 

We shall change some settings later but for now, immediately change the http://YOURBLOG.blogspot.com .It must be replaced by the URL of your blog.And make sure you do not forget the single quotes.

---

The Widget

Now,for the actual widget.

Scroll down your template and find some tags of the form

<b:widget id=”” locked=”” title=”” type=”” />

After all such already existing tags , insert the following code before any other code appears. In fact the line after these tags will be

</b:section>

So insert this code just before the closing tag.

<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>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 = lcBlogURL+'/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> 

---

Customizable features:

These changes are to be made in the Configuration Section.

var cloudMin = 1;
This setting you can use to limit the number of labels shown (for example if you have a lot of labels). Leave the setting at 1 to show ALL labels. If you enter in a higher number, then only labels that have at least that number of entries will appear in the cloud.

var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;

The line maxFontSize sets, in pixels, the size of the label with the largest frequency. The maxColor also is related to the label with the max frequency in RGB palette.

Same goes to the lines about minFontSize and minColor.

The cool part of it is that the tags with intermediate frequency are given intermediate size and colors.

The last variable lcShowCount determines whether the frequency is shown beside the label or not. The possible values it can take are True and False (and is False by default).

---

PS: There are two bugs in the code.
1.Make sure that atleast one label is repeated atleast once, i.e. atleast one label has a frequency more than one.

2.Make sure your tags do not have double quotes .Apostrophes and single quotes are ok.

Will be back with some more tweaks to this in the next post.