博客园页面DIY

转载：

https://www.cnblogs.com/luoxiaoyi/p/9689583.html

1.在公告栏显示自己的头像

右键自己的头像-选择查看源代码，或者是右键头像-查看元素。

<img src="//pic.cnblogs.com/avatar/1795873/20191024105803.png" alt="flypig6的头像" class="img_avatar">

选择这一句复制，进入博客-设置

粘贴在博客侧边栏公告位置

2.在设置鼠标点击的效果

参考：https://www.cnblogs.com/wkfvawl/p/9414180.html

js代码（需要申请js权限）：

<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

3.设置自己博客的背景

body {
    color: #000;
    background: url(https://images.cnblogs.com/cnblogs_com/flypig666/1574890/o_黑魂.jpg) fixed;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
    font-size: 12px;
    min-height: 101%;
}

background后面括号里的网址是你要作为背景的图片。
博客-管理-相册，把想作为背景的大图上传。
点击上传的图片，就会进入大图的页面，获取地址方式同头像。

4.设置博客页面为透明

#home {
    opacity: 0.80;
    margin: 0px auto;
    width: 70%;
    min-width: 950px;
    background-color: #fff;
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

opacity后面的数字就是更改透明度。
注意：有些皮肤会有自带的一些图片，改背景可能会导致这些图片显得突兀。
我用的是simplememory，一个十分简洁的皮肤。

原网址（更换博客背景）：https://www.cnblogs.com/drurry/p/7781812.html

5.公告栏的一些美化

用CSS把公告栏的代码大改了一下
在左边加上了一个小色块。

.catListTitle {
    margin-top: 21px;
    margin-bottom: 10.5px;
    text-align: left;
    border-left: 10px solid rgba(102, 204, 255, 0.8);
    padding: 10px 0 14px 10px;
    background-color: #fff;
}

border-left 后面10px是色块的大小，rgba括号里前三个数是颜色RGB码。

css代码来源：https://www.cnblogs.com/drurry/

附上我自己的配置：

页面定制CSS代码：

body {
    color: #000;
    background: url(https://images.cnblogs.com/cnblogs_com/flypig666/1574890/o_黑魂.jpg) fixed;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
    font-size: 12px;
    min-height: 101%;
}
#home {
    opacity: 0.80;
    margin: 0px auto;
    width: 70%;
    min-width: 950px;
    background-color: #fff;
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
.catListTitle {
    margin-top: 21px;
    margin-bottom: 10.5px;
    text-align: left;
    border-left: 10px solid rgba(102, 204, 255, 0.8);
    padding: 10px 0 14px 10px;
    background-color: #fff;
}

博客侧边栏公告（支持HTML代码）：

<img src="//pic.cnblogs.com/avatar/1795873/20191024105803.png" alt="flypig6的头像" class="img_avatar">