快速推荐、评论、关注、收藏、置顶

1、你登陆到博客园，后点击管理，再点击随笔中的博客签名。如图

2、进入签名后，如果你有设置签名，那就修改默认签名。如果没有签名，就添加一条签名记录。添加后的签名会在每篇博文最后的地方显示。

3、在博客签名中加入如下代码片段

<div id="div_digga" onclick="DiggIt(cb_entryId,cb_blogId,1);" style="position: fixed; right: 20px; bottom: 30px;">
    <div class="diggit" style="height: 20px; background-image: none; color: #FFFFFF; background-color: #E33100; border: medium none; font-size: 9pt; font-weight: bold; text-decoration: none; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);">
        <span class="diggnum" style="color: #ffffff; font-size: 9pt;">
            顶
        </span>
    </div>
</div>

第一层div
    A、主要设置的就是style属性
    position: fixed; right: 20px; bottom: 30px;
    position 布局方式
    right 设置当前div在屏幕右边 的20像素位置
    bottom 设置当前div在屏幕下方 30像素的位置
    如果你要改变div按钮的位置，只需要改变 right 和 bottom的值即可，
    如果你想让div按钮在屏幕最上方显示，那你就设置div的right和top样式，即position: fixed; right: 20px; top: 30px;
    B、设置事件 onclick 事件的方法是固定的，不能随便修改。当然你可以定义你自己的脚本
第二层div
    主要设置hight、background-color属性，也就是div按钮的高度、颜色，当然还可以设置宽度，这里默认宽度。
第三层 span或a标签
    主要是div按钮上显示的文本。主要设置color、font-size，也就是字体的样式和大小

如果你加入上面的代码片段后，在右下角会看到一个顶的按钮，且可以推荐的。

 

<div id="div_digga" onclick="DiggIt(cb_entryId,cb_blogId,1);" style="position: fixed; right: 20px;bottom: 30px;">
    <div class="diggit" style="height: 20px; background-image: none; color: #FFFFFF; background-color: #E33100; border: medium none; font-size: 9pt; font-weight: bold; text-decoration: none; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);">
        <span class="diggnum" style="color: #ffffff;font-size: 9pt;">
            顶
        </span>
    </div>
</div>
<div id="div_diggc" style="position: fixed; right: 80px;bottom: 30px;">
    <div class="diggit" style="height: 20px; background-image: none; color: #FFFFFF; background-color: #2DAEBF; border: medium none; font-weight: bold; text-decoration: none; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);">
        <span class="diggnum">
            <a href="#top" style="color: #FFFFFF;font-size: 9pt;">
                Top
            </a>
        </span>
    </div>
</div>
<div id="div_diggc" style="position: fixed; right: 20px;bottom: 0;" onclick="AddToWz(cb_entryId)">
    <div class="diggit" style="height: 20px; background-image: none; color: #FFFFFF; background-color: #FFB515; border: medium none; font-weight: bold; text-decoration: none; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);">
        <span class="diggnum" style="color: #FFFFFF;font-size: 9pt;">
            收藏
        </span>
    </div>
</div>
<script>
    var my_follow = c_follow;
    var aa = "0";
</script>
<div id="div_diggb" onclick="my_follow();" style="position: fixed; right: 80px;bottom: 0;">
    <div class="diggit" style="height: 20px; background-image: none; color: #FFFFFF; background-color: green; border: medium none; font-weight: bold; text-decoration: none; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);">
        <span class="diggnum" style="color: #ffffff;font-size: 9pt;">
            关注
        </span>
    </div>
</div>
<div id="div_diggc" style="position: fixed; right: 140px;bottom: 0;" onclick="$('#tbCommentBody').focus();">
    <div class="diggit" style="height: 20px; background-image: none; color: #FFFFFF; background-color: #EEEEEE; border: medium none; font-weight: bold; text-decoration: none; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);">
        <span class="diggnum" style="color: #FFFFFF;font-size: 9pt;">
            评论
        </span>
    </div>
</div>

 

 

其中代码片段出现了script脚本<script>var my_follow = c_follow;var aa="0";</script>

这里主要是防止“关注”按钮的onclick事件的方法被系统替换掉，且后面var aa=”0”;是必须的。当然你可以定义其他的变量。加入完整代码片段后，点击修改或添加。你点击自己的博客中随便一篇随便，就可以看到我博客右下方的效果：

1、点击Top按钮，滚动到顶部，可以立马看见导航按钮，切换起来是不是很方便呢。

2、点击顶按钮，就推荐博文了。

3、点击评论按钮，评论框立马可以输入你想要说的的话了。

4、点击关注按钮，你就可以关注该博客的博主了。以后就可以看到他的最新动态了、最新佳作了。

5、点击收藏按钮，你就可以收藏该博文了，以后找文章直接去收藏立马查找是不是很好。