用脚本为本blog增加了几项自定义功能

    这段时间的工作主要是研究客户端的脚本编程，所以顺便使用脚本为blog提供了几个小功能，这些功能有的是便于读者阅读，而有的是便于作者管理blog的。包括：banner广播、页面反色、搜索跟踪和Google广告。下面分别说说他们是怎么弄得。

    从上到下说吧，第一个添加一个Banner广播，这个是干什么用的呢？就是写一些问候的话语放在这里了，效果如下图：
   
    这个广播播的内容是：怎么老是这些广告啊，真是烦人:<
    这个东西的实现基于了页面的布局，这个Banner条目的位置正好是我使用这个主题的一个ID为sub的DIV里。所以我替换DIV里的内容，就弄出这个广播了。我这里都是介绍google广告的，当然你可以自己订制放任何的东西。
    添加Banner广播的代码如下：

<script language="javascript">
function GetAdWord()
{
　var adwords = ['谢谢您点击了Google的广告~:)', '...'];
　var second = (new Date()).getSeconds();
　return adwords[second%adwords.length];
}

function InjectHint()
{
    var imgPath = '/images/cnblogs_com/birdshome/System/Speaker.gif';
    var _divInnerHtml = sub.innerHTML;
    sub.innerHTML ='<table border=0 width=100% cellspacing=0 cellpadding=0><tr>'
        + '<td style="text-indent: 4px; color: gray"><img id="speaker" border="0" src="'
        + imgPath + '" align="absmiddle" title="birdshome speaker">&nbsp;'
        + GetAdWord() + '</td><td align=right style="color:white;padding:0 8 0 0;">' 
        + _divInnerHtml + '</td></tr></table>';
}
InjectHint();
</script>

    第二个功能是增加了一个页面色彩反转，其开关在'公告'下的计数器旁边(如右图)，您可以自己选择是否将页面反色，并且现在的结果会保存在cookie里，将在以后的浏览中继续生效。这个功能其实提供了又一段时间了，不过一直没有提供customize，也就一直没有介绍。后来居然搞得有人抱怨说在反色状态下老是点错滚动条。
    第三个功能是提供了一个Google的广告，是通过Google AdSense计划加入的。由于Google广告是先详细分析页面内容，然后再提供与页面紧密相关的广告条目，所以可以给浏览文章的人提示很友好的广告内容。当然点击Google也会给我们带来一点点的好处，AdSense是会根据点击付费的。
    第四个功能是增强了'搜索跟踪'功能，原来我曾介绍过通过注入脚本给页面添加了一个GoogleTrack的功能。不过后来我发现对于中文内容的搜索，Baidu还是有其优势的，本来我对Baidu有些成见(因为有一年Google被阿共封锁了，www.google.com居然被解析成了baidu@_@)。但是这么长时间了，Baidu也还是在进步，何必老是翻那些陈年老账呢，要于时俱进嘛，所以又添加了一个'百度跟踪'。而且可以通过右图下端的一组RadioButton来选择使用什么Track，它们分别是：GoogleTrack，BaiduTrack和随机选取Tracker。
    注入Search Tracker的代码如下： 

<script Language="javascript">
String.prototype.getGBCode = function() 
{ 
    return vbGetGBCode(this); 
} 

function SearchTrack(){}

SearchTrack.Checkboxs = ['GoogleTrack', 'BaiduTrack', 'GBTrack'];
SearchTrack.TrackType = 'GBTrack';
SearchTrack.InvertColor = 'Invert';

function SearchTrack.InjectGoogleTrack()
{
     var imgPath = '/images/cnblogs_com/birdshome/System/';
     var posts = document.getElementsByTagName('H5');
     var imgSrc = imgPath + 'GoogleTrack-s.gif';
     if ( !posts || posts.length == 0 )
     {
          posts = document.getElementsByTagName('H2');
          imgSrc = imgPath + 'GoogleTrack.gif';
     }
     for ( var i=0 ; i < posts.length ; ++i )
     {
          var post = posts[i];
          var innerLinks = post.getElementsByTagName('A');
          if ( innerLinks.length > 1 )
          {
              return;
          }  
          post.style.display = 'inline';
          var link = document.createElement('A');
          link.href = 'http://www.google.com/search?hl=zh-CN&q='
              + window.encodeURIComponent(post.innerText)
              + '&btnG=Google%E6%90%9C%E7%B4%A2&lr=';
           link.target = '_blank';
          var imgGoogle = new Image();
          imgGoogle.align = 'absmiddle';
          imgGoogle.title = 'Click me to search the title by google.';
          imgGoogle.src = imgSrc;
          link.appendChild(imgGoogle);
          link.onmouseover = function()
          {
               window.status = 'Google Track by birdshome';
               return true;
          };
          link.onmouseout = function()
          {
               window.status = '';
          };
          post.insertAdjacentElement('afterEnd', link);
     }
}

function SearchTrack.InjectBaiduTrack()
{
     var imgPath = '/images/cnblogs_com/birdshome/System/';
     var posts = document.getElementsByTagName('H5');
     var imgSrc = imgPath + 'BaiduTrack-s.gif';
     if ( !posts || posts.length == 0 )
     {
          posts = document.getElementsByTagName('H2');
          imgSrc = imgPath + 'BaiduTrack.gif';
     }
     for ( var i=0 ; i < posts.length ; ++i )
     {
          var post = posts[i];
          var innerLinks = post.getElementsByTagName('A');
          if ( innerLinks.length > 1 )
          {
              return;
          }  
          post.style.display = 'inline';
          var link = document.createElement('A');
          link.href = 'http://www.baidu.com/s?wd=' + post.innerText.getGBCode() + '&cl=3';
              //+ window.encodeURIComponent(post.innerText) + '&cl=3';
          link.target = '_blank';
          var imgBaidu = new Image();
          imgBaidu.align = 'absmiddle';
          imgBaidu.title = 'Click me to search the title by baidu.';
          imgBaidu.src = imgSrc;
          link.appendChild(imgBaidu);
          link.onmouseover = function()
          {
               window.status = 'Baidu Track by birdshome';
               return true;
          };
          link.onmouseout = function()
          {
               window.status = '';
          };
          post.insertAdjacentElement('afterEnd', link);
     }
}

function SearchTrack.Save(elmt)
{
    var chkbs = SearchTrack.Checkboxs;
    for ( var i=0 ; i < chkbs.length ; ++i )
    {
        var chkb = document.getElementById(chkbs[i]);
        if ( chkb )
        {
            var value = chkb.checked;
            SetCookie(chkbs[i], value.toString());
        }
    }
    if ( elmt.tagName == 'BUTTON' )
    {
        SetCookie(elmt.id, elmt.innerText);
    }
}

function SearchTrack.Initialize()
{
    var chkbs = SearchTrack.Checkboxs;
    for ( var i=0 ; i < chkbs.length ; ++i )
    {
        var value = GetCookie(chkbs[i]);
        var chkb = document.getElementById(chkbs[i]);
        if ( chkb && value)
        {
            chkb.checked = eval(value);
            if ( chkb.checked )
            {
                SearchTrack.TrackType = chkbs[i];
            }
        }
    }
    var value = GetCookie('InvertColor');
    if ( value )
    {
        SearchTrack.InvertColor = value;
    }    
}

function SearchTrack.Inject()
{
    switch(SearchTrack.TrackType)
    {
        case SearchTrack.Checkboxs[0] :
        {
            SearchTrack.InjectGoogleTrack();
            break;
        }
        case SearchTrack.Checkboxs[1] :
        {
            SearchTrack.InjectBaiduTrack();
            break;
        }
        case SearchTrack.Checkboxs[2] :
        {
            if ( new Date().getSeconds()%2 == 0 )
            {
                SearchTrack.InjectGoogleTrack();
            }
            else
            {
                SearchTrack.InjectBaiduTrack();
            }
            break;
        }
    }
}

SearchTrack.Initialize();
document.body.onload = function()
{
    // InjectHint();
    SearchTrack.Inject();
    if ( SearchTrack.InvertColor == 'Resume' )
    {
         ChangeColor(document.getElementById('InvertColor'));
    } 
};
</script>

    由于Baidu搜索引擎接受的是GB码的escape形式，所以在代码使用了一段VBScript来编码。

<script language="vbscript"> 
function vbGetGBCode(str) 
    dim i, length, s 
    length = len(str) 
    for i=1 to length 
        hexCode = hex(asc(str.charAt(i-1))) 
        if (len(hexCode) mod 2) = 0 then
            s = s & "%" & mid(hexCode, 1, 2)
            if ( len(hexCode) = 4 ) then
                 s = s & "%" & mid(hexCode, 3, 2)
            end if 
        else 
            s = s & "%0" & hexCode 
        end if 
    next 
    vbGetGBCode = s 
end function 
</script> 

    而Google搜索引擎是接受encodeURIComponent的编码，所以就简单多了。

    注入百度Tracker的效果如图所示：

   

    本来这些功能除了反色以外都可以很容易的在服务器端做的，不过毛主席不是教导过大家'自己动手风衣足食'嘛。