Blogger标签云

  发现标签云有些意思.
  把单调的标签变得不那么死板了.
 
  于是到处找可以用于blogger的插件.
  找到一些,但不是很满意.
  
  于是自己动手写一个简单的先用一样.
  当然,思路来源于这个Blog的介绍,在此声明一下.

  下面是自己写的,或者说改的标签云.

 function getColor( _count , _count_upper_limit )
 {
  var begin_color = 192.0;
  var end_color = 26.0;
  var count = _count/1.0;
  var count_upper_limit = _count_upper_limit/1.0;
   
  var color = begin_color - (count/count_upper_limit) * (begin_color-end_color);
  return [ Math.floor(color) , Math.floor(color*20.0/26.0) , Math.floor(color*5.0/26.0) ];
 }
  
  
 function getFontSize( _count , _count_upper_limit )
 {
  var begin_font_size = 0.4;
  var end_font_size = 2.2;
  var count = _count/1.0;
  var count_upper_limit = _count_upper_limit/1.0;

  return ( begin_font_size + (count/count_upper_limit) *( end_font_size - begin_font_size) );
 }

 // Max label count; 
 var maxLabelCount = 0;
  
 var LableUrls = new Object;
  
 
  var LabelObject = new Object;
  var name = "";
  var count = "";
  var url = "";
  LabelObject['name'] = name;
  LabelObject['count'] = count;
  LableUrls[ url ] = LabelObject;
 
  
 for( url in LableUrls )
 {
  if( LableUrls[url]['count'] > maxLabelCount )
  {
   maxLabelCount = LableUrls[url]['count'];
  }
 }
  
 for( url in LableUrls )
 {
  font_size = getFontSize( LableUrls[url]['count'] , maxLabelCount );
  colors = getColor(LableUrls[url]['count'] , maxLabelCount );
  outputString = "<a href='" + url + "'" + "style='padding-right:0.5em;font-size:" + font_size + "em;color:" + colors[0] + "," + colors[1] + "," + colors[2] + ";'>" + LableUrls[url]['name'] + "</a>";
  document.write( outputString );
 }

  使用的时候将blogger的模板展开,并将上面的内容插入到下面的块中.
  getColor和getFont是用来产生颜色和字体大小的,可以感觉自己需要改.
  两个参数的意义上,_count为传入标签的个数,_count_upper_limit为最大的标签个数.
   
  举个例子,比如有个名为 杂谈 的标签,这个标签下有4个文章,那么_count = 4.
  _count_upper_limit就是所有标签中,_count最大的那个值.

  上面例子outputString里将诸如"'<>等符号转移了,免得更新模板的时候出问题.

  当时写的时候就是因为这个搞了不少时间.
  不过算是学了点JavaScript和CSS : ).