对blog布局的一点小改进

把原来长长的标签列表替换成了标签云, 其实早就想弄了, 可是因为懒, 一直没弄... 早上闲来无事, 就下决心弄了. 代码全部参考这篇文章的, 只有颜色和字体部分修改了下. 啧啧~ 这下可以节省很多空间了.

然后就是把常用的Web 2.0服务聚合在一起了, 这样访问起来也方便点, 至少方便了我自己, XD

下面是标签云的代码, 因为那篇文章没有排版, 所以就贴一下, 代码的具体位置还是要参考原文:

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud 
{
  text-align: center;
  font-family: sans, 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;
}

...

<script type='text/javascript'>
  // Label Cloud
  var lcBlogURL = "http://xiaogaozi.blogspot.com";
  var maxFontSize = 25;
  var maxColor = [23,92,162];
  var minFontSize = 15;
  var minColor = [82,139,197];
  var lcShowCount = false;
</script>

...

<b:widget id='Label1' locked='false' title='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'>
        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 ta = 0;
        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]);
          }
        }
        tz = labelCount.length-1;
        lc2 = document.getElementById('labelCloud');
        ul = document.createElement('ul');
        ul.className = 'label-cloud';
        for(var t in ts)
        {
          for (var i = 0; 3 &gt; 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>

Blogger的定制性还是很强的, 只要你懂HTML或者JavaScript, 对于我这样暂时不想去折腾个人网站的人来说足够了.