从零开始调整自己的博客外观

作为一位初来乍到的小白，想把自己博客的页面变得好看点，广搜资料，一步一步定制自己的博客外观

首先得申请JS权限，在博客园设置的这个地方（没有权限点击申请JS权限，然后等管理员同意），有权限后后面的外观特效就会出现

image

一.实现粒子特效

这个特效是我觉得最好看的特效，我迫不及待的就去尝试了，果然没让我失望，首先在文件里面上传一个js.js名字的JavaScript代码，代码内容如下：

!
function() {
    function o(w, v, i) {
        return w.getAttribute(v) || i
    }
    function j(i) {
        return document.getElementsByTagName(i)
    }
    function l() {
        var i = j("script"),
        w = i.length,
        v = i[w - 1];
        return {
            l: w,
            z: o(v, "zIndex", -2),
            o: o(v, "opacity", 0.8),
            c: o(v, "color", "101,255,115"),
            n: o(v, "count", 300)
        }
    }
    function k() {
        r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    }
    function b() {
        e.clearRect(0, 0, r, n);
        var w = [f].concat(t);
        var x, v, A, B, z, y;
        t.forEach(function(i) {
            i.x += i.xa,
            i.y += i.ya,
            i.xa *= i.x > r || i.x < 0 ? -1 : 1,
            i.ya *= i.y > n || i.y < 0 ? -1 : 1,
            e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
            for (v = 0; v < w.length; v++) {
                x = w[v];
                if (i !== x && null !== x.x && null !== x.y) {
                    B = i.x - x.x,
                    z = i.y - x.y,
                    y = B * B + z * z;
                    y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())
                }
            }
            w.splice(w.indexOf(i), 1)
        }),
        m(b)
    }
    var u = document.createElement("canvas"),
    s = l(),
    c = "c_n" + s.l,
    e = u.getContext("2d"),
    r,
    n,
    m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(i) {
        window.setTimeout(i, 1000 / 45)
    },
    a = Math.random,
    f = {
        x: null,
        y: null,
        max: 20000
    };
    u.id = c;
    u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
    j("body")[0].appendChild(u);
    k(),
    window.onresize = k;
    window.onmousemove = function(i) {
        i = i || window.event,
        f.x = i.clientX,
        f.y = i.clientY
    },
    window.onmouseout = function() {
        f.x = null,
        f.y = null
    };
    for (var t = [], p = 0; s.n > p; p++) {
        var h = a() * r,
        g = a() * n,
        q = 2 * a() - 1,
        d = 2 * a() - 1;
        t.push({
            x: h,
            y: g,
            xa: q,
            ya: d,
            max: 6000
        })
    }
    setTimeout(function() {
        b()
    },
    100)
} ();

js

效果图如下所示：

image

然后在设置页面HTML页脚处写下如下代码(只有JS权限通过才能出现特效)，记住把51selfstudy改为自己的路径，color后的值为颜色RGB值，opacity是透明度，cout是粒子数量，保存即可，刷新页面。

<script id="c_n_script" src="https://files.cnblogs.com/files/51selfstudy/js.js" color="240,230,140" opacity="1" count="75" zindex="-2">
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {

} else {
       
}
</script>

二.快速评论

将下面这段代码放置在页面定制CSS处

/* 定制推荐和反对按键 */
#div_digg{
   position:fixed;
   bottom:10px;
   140px;
   right:15px;
   box-shadow: 0 0 6px #5F5A4B;
   border:2px solid #ECD7B1;
   padding:4px;
   background-color:#fff;
   border-radius:4px 4px 4px 4px !important;
}

.icon_favorite {
     background: transparent url('http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_kj.gif') no-repeat 0 0;
     padding-left: 15px;
}

#blog_post_info_block a {
     text-decoration: none;
     color: #5B9DCA;
     padding: 3px;
}

会有如下效果

image

三.鼠标点击特效

放入页首HTML代码下，然后保存，刷新页面点击鼠标即会出现特效

<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>

四.加个各个国家访问统计

在访问旗帜网站中注册一个自己的旗帜，输入邮箱，会得到一个验证码邮件，进邮件的链接，得到属于自己的计数器，我得到的代码如下，会显示在我博客的右上角，将代码复制到博客侧边栏公告（支持HTML代码）处，保存然后刷新即可。

<a href="https://info.flagcounter.com/6FbY"><img src="https://s11.flagcounter.com/count2/6FbY/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_10/viewers_0/labels_0/pageviews_0/flags_0/percent_0/" alt="Free counters!" border="0"></a>

生成效果如下

image

五.评论打字出现礼花特效

先在博客文件处上传一个JS文件，链接: activate-power-mode.js 提取码: fwq4

然后在页脚Html代码处写上以下代码，注意改下路径，将51selfstudy这部分改为自己的即可，保存刷新。

<script src="https://files.cnblogs.com/files/51selfstudy/activate-power-mode.js"></script>
<script>
POWERMODE.colorful = true; // 控制开启/开启礼花特效  
POWERMODE.shake = false; // 控制开启/关闭屏幕震动特效  
document.body.addEventListener('input', POWERMODE);
</script>

六.添加头像

在个人主页对头像右键复制得到自己头像链接

image

然后在博客侧边栏公告处写下如下代码，把链接改为自己的头像链接即可，刷新保存

<img src="https://pic.cnblogs.com/avatar/1624679/20190308164722.png" alt="zzx" class="img_avatar" width="230px" style="border-radius:50%">

参考：

https://www.cnblogs.com/xiaokang01/p/10125821.html(粒子特效)

https://www.cnblogs.com/zhaopei/p/4174811.html(快速评论)

https://www.cnblogs.com/xiaokang01/p/9911501.html(鼠标点击特效)

https://www.cnblogs.com/wangkun1993/p/7237978.html(其它国家访问人数统计)

https://laod.cn/page/javascript-texiao.html(评论打字输出礼花特效)

https://www.cnblogs.com/ZhaoxiCheung/p/CustomizeBlog.html(添加头像)

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/51selfstudy/p/10505579.html