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

首先声明一下，这篇内容来自于Jeffrey Zhao的文章《在网页里添加Web Live Messenger对话框 》。
刚刚我自己也跟着搞了一下，就收藏至此，同志们如果要深入学习，还是看看老赵的这篇原创吧！（强烈推荐！！！）
我本人对JaveScript基本上是一窍不通啦，也是懒惰也是太忙，看懂它完全是用英文+其他语言的编程基础，至于具体怎么搞，复杂一点我就乱套了，算是我的一个软肋吧，近年来JavaScript红得不得了，真不知道自己为什么也没鼓足勇气去学习它，再加上平时都没用到，能用Server端的东西就不爱去折腾这个Client的宠儿了……（也感受过无数次JavaScript的优势，真的是，改天一定要彻头彻尾地学习一下JavaScript……）
下面以在cnblogs中如何操作这个代码进行一下描述（老赵的文章主要针对的是原理与他的设计思路，我这里关键在设置心得，嗨～比较菜，只能写点周边……）
准备：
1、jQuery.js文件，这里您可以将它上传至您自己的空间，也可以直接用我的……（不过假设我以后移除了，你就用不到了）
jQuery： https://files.cnblogs.com/volnet/jquery-1.2.1.min.js
2、图片，3张图片（我都是从老赵那里窃取来的，哈哈，老赵别生气……）其实我感觉两张就可以了……老赵搞了3张我也懒得整了就3张吧……
背景：http://www.cnblogs.com/images/cnblogs_com/volnet/85281/o_Messenger_Header_bg.gif
关闭：http://www.cnblogs.com/images/cnblogs_com/volnet/85281/o_Messenger_close_sm.gif
前景：http://www.cnblogs.com/images/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://www.cnblogs.com/images/cnblogs_com/volnet/85281/o_Messenger_Header_bg.gif)" id="liveMessengerThumb">
        <img src="http://www.cnblogs.com/images/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://www.cnblogs.com/images/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="https://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 上的任何人查看您的联机状态并给您发送消息 ”）