Product Integration,Version Google :Now its Picasa weds Blogger.

Say hello to the new world of product integration. The concept has been the secret of the rise of mammoths, one whom the new one has taken on. No prizes for guessing who the giants are. Now, into the subject matter.

We’ve seen Microsoft use this strategy for about 15 odd years now and has been very very successful(extra stress on very ) .The integration of Internet Explorer into Windows Explorer ,use of proprietary DLLs into the very famous Visual Studio programming languages and later support to export these into 3rd party compilers was received very well indeed. And, what Microsoft showed was possible in offline products is now being done by its competitor against the creator itself (ala Frankenstein, alas IPRs aren’t to be taken lightly, never mind the bad humor and the point I was trying to make and the fact that this has become an unconventionally long sentence).

The latest in the offering by Google is the export of all the pictures you post in your blog to Picasa .

The offer is that it would provide 1 GB of space that you can use to archive all your pictures by date, tag them and share them too(after all, this has been the mantra of the new web ,the much hyped Web 2.0 –social presence ). And you, in return make them a good competitor to Yahoo Flickr. Of course, they didn’t say that, but what do you think the new features (ala Google style) link in Picasa which refers to the new (aaargh) ‘Search Picasa community photos’ would be for.


And now into the details. Each of your blog has a separate album and the good news (hehe, my hard disk needs some freeing up, note this and you will know my next step).

The little problem for now is that only photos uploaded since December will be archived, for now although, since Google says it is making efforts to get the older ones up as well. Google says the problem is ‘there are a lot of them’ .

The features: You can order prints of them, and mail them. These albums are marked ‘unlisted’ though you can change it later to make them ‘public’. These albums are marked nicely with a ‘B’ (Blogger Logo) and stand out special ;) .


Oh, I forgot to tell you the best part. You can even embed the albums somewhere else in the web. For those who have a real good photo collection, all I would say is “Time to show off, folks”.

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.

Tag Clouds :The One-look Summarizers

What are tag clouds?

Well, Wiki says "Tag Clouds occur when a lot of people begin describing a blog, photo, or other online content with the same tags. The tags are a method for summarizing content with weighted words, describing the item's meaning with a few concise words. The tag clouds form after the original post and other users begin describing the content in their own way. A well formed tag cloud implies that many people would summarize or categorize the content with similar descriptive words (tags). "

Now, in this new Web where millions of pages offer similar information to users, it is necessary that users get to the page which offers most of what they need exactly. Tag clouds do exactly that. By displaying words according to their ‘weight’, they offer a means to evaluate the page with just one look.

If you have already visited Technorati, or even Flickr (which is now Yahoo Flickr), the first site to use Tag Clouds, you must’ve seen how much they assist in finding the pics you need (in case of Flickr) , or telling you what is the new hottest talk on the Net ( Technorati )


The above pictures well speak volumes about whats going on in their respective worlds.

How about telling your readers what your blog is all about and what you have said so far in the blog.In fact,this would interest them and would invite them to read what you have said about some particular topic or so.

Next post ,we'll see how to create a tag-cloud in a Blogger blog.

Statcounter...One Successful Irish site on the Net

My rendezvous with Statcounter.com started off with a Google(uh!) search for 'website visitors'.Well, this was the first non-Sponsored search result that showed up :).And so it began.A visit to the homepage which looked little different from what it is now.



The description on the first page is no-nonsense and lucid.

What is STATCOUNTER?
A free yet reliable invisible web tracker, highly configurable hit counter and real-time detailed web stats. Insert a simple piece of our code on your web page and you will be able to analyse and monitor all the visitors to your website in real-time!


Free, Fast, Responsive, Quick loading and Reliable Service.

Invisible Tracking - no ads on your website.

Accurate real-time website statistics with detailed visitor tracking and analysis.

The neat interface did appeal to me and I immediately registered.More interesting was that this did not have that too irritating cross-links all over the place.

Registering was all too easy.The free account had only one disadvantage that really matters now.Your visitor detail log is limited to 100 visitors.Once your visitor count crossed 100, the records get pushed out at the bottom of the stack, so to say.

Then came addition of a 'project'.Thats the term used at Statcounter.

A nice page showing up the available options which are quite new!There are two features 'In Development' and the one that is being used by me at present is the 'Standard Statcounter Project'.



Fast Forward some pages and there appears the code as you please.The best part is that you can choose a code which is designed to your constraints.For example, Blogger allows only strict XHTML compliant code to be inserted in the template.

Then the regular Web-master's work:
Copy,paste and save.

Back to Statcounter, and goto My Projects and a page appears displaying the Project Name,icon links to various pages realting to each project,the type of the project,no. of recent visitors,total no. of visitors.

A couple of days and your stats begin building up,assuming ,ofcourse, that your website is doing well.And well ,a beautiful(assuming you love such things) bar-chart appears on the Real-Time stats page.



Now, the extras and the power within...

1.Came From

Shows all the links from which your blog was reached.So thank the links and leave your traces ;)

2.Visitor Paths

This is one amazing page.But too large to put up an image :)

3.Visit Lengths

Are your Visitors really interested in your blog.Are they reading what has been written?Here are your answers.

4.Visitor Geographic Locations

This must be classified under one of the coolest features provided.
Check it out!

5.Recent Pageload Activity

Keep an eye on who is visiting your blog.

6.Recent Visitor Activity

Yo,here is the most checked out page after The Barchart. :)



Wanna have more fun???The detective in you wants more details about that odd guy who visited your page?Just click on the little 'magnifying glass' beside the visitor.Here's a sample.


Apart from this,Statcounter offers features like Keyword Analysis,System Stats,and the browser from which your visitors browse your site,most popular pages in your site,the entry pages,exit pages.No explanations on these, it has been a long post already and I'm not into(as of now) writing pages of reviews about a site.

Well,lemme conclude sayin that this review of Statcounter covers up most of the features provided by the site to Free Account holders and I intend this post dedicated to the people behind it.

I also use Google Analytics ,however that has been a recent thing or habit,so to say,and the simplicity of Statcounter can't be beaten even by The Goliath.

PS:This is a small riddle:Can someone take the trouble and find out what Statcounter records Windows Vista as?The answer is in the post :P

PS2:Did you think this post was too lengthy or did it contain too many pics or even was simply plain boring? Gimme feedback!!!