博客園個性化設置：如何讓【推薦】【反對】層跟隨滾動條移動

　　今天下午有時間閱讀【湯姆大叔的博客】，發現他的博客風格的確很專業，說起來也真慚愧啊，我現在終於得到了專職前端的崗位，自己博客風格還是那么土里吧唧的，這個和我工作十分不相稱。不過我還是很喜歡自己現在博客的風格，很簡潔，有點谷歌百度的風格，我不想大改自己博客的風格，但是如果發現別人博客里有好東西我就加到自己的博客里。比如【湯姆大叔的博客】里那個可以跟隨滾動條一起滾動的【推薦】【反對】層就很不錯。我已經將這段代碼加入到了我自己博客里，這里我就講講我是怎么把這段代碼找到，最后如何嵌入到自己博客里的。

　　我的工具是firefox+firebug插件。

　　首先打開【湯姆大叔的博客】的一篇博客：

http://www.cnblogs.com/TomXu/archive/2012/04/26/2443010.html

　　

　　按圖所示的步驟進行操作：

圖1-1

圖1-2

圖1-3

代碼如下：

<div style="position: fixed; right: 0px; bottom: 0px; z-index: 10; background-color: white; margin: 10px; padding: 10px; border: 1px solid rgb(204, 204, 204);" id="div_digg">                                        
    <div onclick="DiggIt(cb_entryId,cb_blogId,1)" class="diggit"> 
        <span id="digg_count" class="diggnum">8</span>
    </div>
    <div onclick="DiggIt(cb_entryId,cb_blogId,2)" class="buryit"> 
        <span id="bury_count" class="burynum">2</span>
    </div>
    <div class="clear"></div>    
    <div id="digg_tips" class="diggword">(請您對文章做出評價)</div>    
</div>

作為比較，我用同樣的方式取到我頁面里相同層的代碼：

<div style="" id="div_digg">                                        
    <div onclick="DiggIt(cb_entryId,cb_blogId,1)" class="diggit"> 
        <span id="digg_count" class="diggnum">15</span>
    </div>
    <div onclick="DiggIt(cb_entryId,cb_blogId,2)" class="buryit"> 
        <span id="bury_count" class="burynum">2</span>
    </div>
    <div class="clear"></div>    
    <div id="digg_tips" class="diggword">(請您對文章做出評價)</div>    
</div>

我們發現大叔的博客里的div上多了style樣式，但是這個div肯定是博客園預先就做好的，大叔不可能直接改源碼將這些樣式加到元素上，一定是交給了js腳本實現的，於是我查看了大叔博客里頁面的源碼，通過div里的id值div_digg查找，終於發現了js腳本了，腳本內容如下：

<script type="text/javascript">
    $(document).ready(function () {
        $("body").prepend($("#div_digg").css({
            "position": "fixed", "right": "0px", "bottom": "0px", "z-index": "10", "background-color": "white", "margin": "10px", "padding": "10px", "border": "1px solid #cccccc"
        }));
      $(".cnblogs_code_toolbar").hide();
    });
</script> 

那么接下來怎么把腳本嵌入到我自己的博客里呢？

這個很簡單了，按圖操作了：

圖1-4

圖1-5

圖1-6

最后點擊【保存】按鈕，ok，現在我的博客里【推薦】【反對】層也會跟隨滾動條移動~~~~~~~