【代码保留】博客中加WindowsLiveMessenger的方法

首先声明一下，这篇内容来自于Jeffrey Zhao的文章《在网页里添加Web Live Messenger对话框 》。
刚刚我自己也跟着搞了一下，就收藏至此，同志们如果要深入学习，还是看看老赵的这篇原创吧！（强烈推荐！！！）
我本人对JaveScript基本上是一窍不通啦，也是懒惰也是太忙，看懂它完全是用英文+其他语言的编程基础，至于具体怎么搞，复杂一点我就乱套了，算是我的一个软肋吧，近年来JavaScript红得不得了，真不知道自己为什么也没鼓足勇气去学习它，再加上平时都没用到，能用Server端的东西就不爱去折腾这个Client的宠儿了……（也感受过无数次JavaScript的优势，真的是，改天一定要彻头彻尾地学习一下JavaScript……）
下面以在cnblogs中如何操作这个代码进行一下描述（老赵的文章主要针对的是原理与他的设计思路，我这里关键在设置心得，嗨～比较菜，只能写点周边……）
准备：
1、jQuery.js文件，这里您可以将它上传至您自己的空间，也可以直接用我的……（不过假设我以后移除了，你就用不到了）
jQuery： http://files.cnblogs.com/volnet/jquery-1.2.1.min.js
2、图片，3张图片（我都是从老赵那里窃取来的，哈哈，老赵别生气……）其实我感觉两张就可以了……老赵搞了3张我也懒得整了就3张吧……
背景：http://images.cnblogs.com/cnblogs_com/volnet/85281/o_Messenger_Header_bg.gif
关闭：http://images.cnblogs.com/cnblogs_com/volnet/85281/o_Messenger_close_sm.gif
前景：http://images.cnblogs.com/cnblogs_com/volnet/85281/o_Messenger_logo_beta.gif
打开这三张图片再对照实际效果我想您就很容易明白了……
3、Live相应服务：
a.登录Live帐户（若您未登录则会进入登录页面）；
b.在左侧边框内有“创建HTML”的栏目，点后选择右侧框架中的“Messenger”单选框，拷贝其代码。
创建HTML：http://settings.messenger.live.com/applications/CreateHtml.aspx

步骤：
1、拷贝以下代码：

< div  id ="liveMessengerContainer"  style ="position:absolute;" >
     < div  style ="border: solid 1px black; width: 160px; height:39px; cursor:pointer; background-image:url(http://images.cnblogs.com/cnblogs_com/volnet/85281/o_Messenger_Header_bg.gif)"  id ="liveMessengerThumb" >
         < img  src ="http://images.cnblogs.com/cnblogs_com/volnet/85281/o_Messenger_logo_beta.gif"
             alt ="使用Live Messenger联系我"  style ="margin: 10px 10px 0px 9px;" />
     </ div >
     < table  border ="0"  cellpadding ="0"  cellspacing ="0"  id ="liveMessengerPanel" >
         < tr >
             < td  valign ="top" >
                 < img  id ="hideLiveMessengerPanel"  style ="cursor:pointer; margin-right: 3px;"  src ="http://images.cnblogs.com/cnblogs_com/volnet/85281/o_Messenger_close_sm.gif"  alt ="关闭"   />
             </ td >
             < td >
                 < iframe  src ="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=fa4bd39aec10d7f%40apps.messenger.live.com&mkt=zh-cn"  width ="300"  height ="300"  style ="border: solid 1px black; width: 300px; height: 300px;"  frameborder ="0" ></ iframe >
             </ td >
         </ tr >
     </ table >
</ div >
< script  language ="javascript"  type ="text/javascript"  src ="http://files.cnblogs.com/volnet/jquery-1.2.1.min.js" ></ script >
< script  language ="javascript"  type ="text/javascript" >
     function  getClientBounds()
    {
         var  clientWidth;
         var  clientHeight;
        
         if  ($.browser.msie)
        {
            clientWidth  =  document.body.clientWidth;
            clientHeight  =  document.body.clientHeight;
        }
         else   if  ($.browser.safari)
        {
            clientWidth  =  window.innerWidth;
            clientHeight  =  window.innerHeight;
        }
         else   if  ($.browser.opera)
        {
            clientWidth  =  Math.min(window.innerWidth, document.body.clientWidth);
            clientHeight  =  Math.min(window.innerHeight, document.body.clientHeight);
        }
         else
        {
            clientWidth  =  Math.min(window.innerWidth, document.documentElement.clientWidth);
            clientHeight  =  Math.min(window.innerHeight, document.documentElement.clientHeight);
        }

         return  { width : clientWidth, height : clientHeight };
    }

     function  resetLiveMessengerPosition()
    {
         var  clientBounds  =  getClientBounds();
         var  container  =  document.getElementById( " liveMessengerContainer " );
        
         var  scrollLeft  =  (document.documentElement.scrollLeft  ?
                document.documentElement.scrollLeft : document.body.scrollLeft);
         var  scrollTop  =  (document.documentElement.scrollTop  ?
                document.documentElement.scrollTop : document.body.scrollTop);
                
         var  containerLeft  =  scrollLeft  +  clientBounds.width  -  container.clientWidth  -   5 ;
         var  containerTop  =  scrollTop  +  clientBounds.height  -  container.clientHeight;
                
        $( " #liveMessengerContainer " ).css({top : containerTop  +   " px " , left : containerLeft  +   " px " });
    }

        $( " #liveMessengerPanel " ).hide();
    
    $(document).ready( function (){
        $(window).scroll(resetLiveMessengerPosition);
        $(window).resize(resetLiveMessengerPosition);
    
        resetLiveMessengerPosition();
        
        $( " #liveMessengerThumb " ).click( function (){
            $( " #liveMessengerThumb " ).fadeOut( 500 ,  function (){
                $( " #liveMessengerPanel " ).fadeIn( 500 ,  function (){
                    resetLiveMessengerPosition();
                });
                resetLiveMessengerPosition();
            });
        });
        
        $( " #hideLiveMessengerPanel " ).click( function (){
            $( " #liveMessengerPanel " ).fadeOut( 500 ,  function (){
                $( " #liveMessengerThumb " ).fadeIn( 500 ,  function (){
                    resetLiveMessengerPosition();
                });
                resetLiveMessengerPosition();
            });
        });
    });
</ script >

2、找到对应链接实现替换：
（别的可以不换，Live的帐号可一定要换掉，否则我将成为被联系对象了……）
寻找代码中：

< iframe  src ="http://settings.messenger.live.com/Conversation/IMMe.aspx?invitee=fa4bd39aec10d7f%40apps.messenger.live.com&mkt=zh-cn"  width ="300"  height ="300"  style ="border: solid 1px black; width: 300px; height: 300px;"  frameborder ="0" ></ iframe >
            

并将其替换为您在“准备”步骤3中创建的HTML代码。
3、粘帖代码：
例如：CNBLOGS中，您可以进入“管理”/“选项”/“Configuration”，而后将修改后的代码保存在任一允许放HTML的框内，我是将其放置于“页脚HTML”中。
4、保存，预览效果，注意看清楚是你的LiveMessenger而不是我的……
如果您希望所有用户都可以与您直接交流（包括无LiveId的用户，您需要在http://settings.messenger.live.com/applications/WebSettings.aspx页面上勾选“允许 Internet 上的任何人查看您的联机状态并给您发送消息 ”）