博客园个性化设置：如何让【推荐】【反对】层跟随滚动条移动

　　今天下午有时间阅读【汤姆大叔的博客】，发现他的博客风格的确很专业，说起来也真惭愧啊，我现在终于得到了专职前端的岗位，自己博客风格还是那么土里吧唧的，这个和我工作十分不相称。不过我还是很喜欢自己现在博客的风格，很简洁，有点谷歌百度的风格，我不想大改自己博客的风格，但是如果发现别人博客里有好东西我就加到自己的博客里。比如【汤姆大叔的博客】里那个可以跟随滚动条一起滚动的【推荐】【反对】层就很不错。我已经将这段代码加入到了我自己博客里，这里我就讲讲我是怎么把这段代码找到，最后如何嵌入到自己博客里的。

　　我的工具是firefox+firebug插件。

　　首先打开【汤姆大叔的博客】的一篇博客：

/article/1307970.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，现在我的博客里【推荐】【反对】层也会跟随滚动条移动~~~~~~~