博客园样式美化

最新推荐文章于 2024-04-19 09:52:08 发布

weixin_30551963

最新推荐文章于 2024-04-19 09:52:08 发布

阅读量604

点赞数

原文链接：http://www.cnblogs.com/huanzi-qch/p/11313934.html

版权

　　前言

　　博客园有着丰富的博客皮肤（目前有124个），博客样式按说应该足够丰富了，总有一款适合我们吧？但作为一名专业的程序员，有时候我们想要有自己的一些自定义操作

　　1、账号设置 -> 博客设置

　　2、向博客园申请js权限

　　3、在以下位置定制代码

　　有了HTML、CSS、JS代码权限，就可以愉快的美化自己的博客样式啦

　　如何“剽

　　窃”他人的智慧？...

　　如果自己不擅长前端操作，可以自己喜欢的一些大佬的页面美化效果“偷”过来，教大家一招如何“偷”别人的代码，打开具体博客，打开F12，就可以看到该博客对博客园页面美化的代码了，一般在页首、页尾（手动滑稽脸...）

　　拿我自己的博客为例，

　　个人定制的CSS代码

　　个人定制的HTML、JS代码

　　我的样式

　　我的博客园皮肤选的是

　　所有的优化具体效果直接看我当前博客页面

　　目录弹窗

　　请看我之前的博客：自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗

　　效果

　　统计阅读总数

　　请看我之前的博客：Web Worker——js的多线程，实现统计博客园总阅读量

　　效果

　　火箭返回顶部

　　css

/*回到顶部*/
#rocket-to-top div {
    left: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 0;
    width: 149px;
}
#rocket-to-top .level-2 {
    background: url("http://images.cnblogs.com/cnblogs_com/mq0036/508398/o_rocket_button_up.png") no-repeat scroll -149px 0 transparent;
    display: none;
    height: 250px;
    opacity: 0;
    z-index: 1;
}
#rocket-to-top .level-3 {
    background: none repeat scroll 0 0 transparent;
    cursor: pointer;
    display: block;
    height: 150px;
    z-index: 2;
}
#rocket-to-top {
    background: url(http://images.cnblogs.com/cnblogs_com/mq0036/508398/o_rocket_button_up.png) no-repeat scroll 0 0 transparent;
    height: 250px;
    margin: -125px 0 0;
    overflow: hidden;
    padding: 0;
    position: fixed;
    right: 0%;
    top: 97%;
    width: 145px;
    z-index: 11;
    display: none;
}

View Code

<script type="text/javascript">
    // jQuery火箭图标返回顶部代码
    $(function() {
        var e = $("#rocket-to-top"),
        t = $(document).scrollTop(),
        n,
        r,
        i = !0;
        $(window).scroll(function() {
            //只监听博客详情页面
            if($("#post_detail").length == 0 ){
                return ;
            }
            var t = $(document).scrollTop();
            t == 0 ? e.css("background-position") == "0px 0px" ? e.fadeOut("slow") : i && (i = !1, $(".level-2").css("opacity", 1), e.delay(100).animate({
                marginTop: "-1000px"
            },
            "normal",
            function() {
                e.css({
                    "margin-top": "-125px",
                    display: "none"
                }),
                i = !0
            })) : e.fadeIn("slow")
        }),
        e.hover(function() {
            $(".level-2").stop(!0).animate({
                opacity: 1
            })
        },
        function() {
            $(".level-2").stop(!0).animate({
                opacity: 0
            })
        }),
        $(".level-3").click(function() {
                        tip.msg("火箭发射~~");
            function t() {
                var t = e.css("background-position");
                if (e.css("display") == "none" || i == 0) {
                    clearInterval(n),
                    e.css("background-position", "0px 0px");
                    return
                }
                switch (t){
                case "0px 0px":
                    e.css("background-position", "-298px 0px");
                    break;
                case "-298px 0px":
                    e.css("background-position", "-447px 0px");
                    break;
                case "-447px 0px":
                    e.css("background-position", "-596px 0px");
                    break;
                case "-596px 0px":
                    e.css("background-position", "-745px 0px");
                    break;
                case "-745px 0px":
                    e.css("background-position", "-298px 0px");
                }
            }
            if (!i) return;
            n = setInterval(t, 50),
            $("html,body").animate({scrollTop: 0},"slow");
        });
    });
</script>

View Code

　　html

<!-- 火箭 -->
<div style="display: none;" id="rocket-to-top">
    <div style="opacity:0;display: block;" class="level-2"></div>
    <div class="level-3"></div>
</div>

View Code

　　效果

　　特效爱心

        // 鼠标特效，心
    window.onclick = function(event) {
        var heart = document.createElement("b");
        heart.onselectstart = new Function('event.returnValue=false');
        document.body.appendChild(heart).innerHTML = "❤";
        heart.style.cssText = "position: fixed;left:-100%;";
        var f = 16, // 字体大小
            x = event.clientX - f / 2, // 横坐标
            y = event.clientY - f, // 纵坐标
            c = randomColor(), // 随机颜色
            a = 1, // 透明度
            s = 1.2; // 放大缩小
        var timer = setInterval(function() {
            if (a <= 0) {
                document.body.removeChild(heart);
                clearInterval(timer);
            } else {
                heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" + c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" + s + ");";
                y--;
                a -= 0.016;
                s += 0.002;
            }
        }, 12)
    }
    // 随机颜色
    function randomColor() {
        return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
    }

View Code

　　效果，单击鼠标左键

　　背景线条

　　引入这个js

<!--网页动态背景——随鼠标变换的动态线条-->
<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

　　效果

　　求打赏插件

　　引入这个js

<!--引入求打赏插件-->
<script src="https://static.tctip.com/tctip-1.0.0.min.js"></script>

　　然后初始化

    //求打赏
    new tctip({
    top: '20%',
    button: {
      id: 9,
      type: 'dashang',
    },
    list: [
      {
                //支付宝收款码图片，先事先上传到博客园
        type: 'alipay',
        qrImg: 'https://files.cnblogs.com/files/huanzi-qch/1540353568326.bmp'
      }, {
                //微信收款码图片，先事先上传到博客园
        type: 'wechat',
        qrImg: 'https://files.cnblogs.com/files/huanzi-qch/1540353592438.bmp'
      }
    ]
    }).init();

View Code

　　效果

　　css常规操作

/*屏蔽广告*/
#ad_t2 {
    display: none;
}
.c_ad_block {
    display: none;
}

/* 推荐及反对 */
#div_digg {
    position: fixed;
    bottom: 25px;
    right: 120px;
    width: 50px;
    border: 2px solid #CBCFD2;
    padding: 10px;
    background-color: #ffffff9e;
    border-radius: 5px 5px 5px 5px !important;
    z-index: 1;
}
/* 反对 */
.buryit {
    display: none;
}

/* 版权 */
#MySignature {
    border: #e0e0e0 1px dashed;
    padding: 10px;
    font-family: 微软雅黑;
    font-size: 11px;
    background-color: #fcffe3;
    line-height: 25px;
    display: block;
}

/*隐藏搜索*/
#sidebar_search{
    display: none;
}

/*隐藏常用链接*/
#sidebar_shortcut{
    display: none;
}

　　转载说明

　　转载说明是在博客签名进行设置

<div>作者：<a href="https://www.cnblogs.com/huanzi-qch/" target="_blank">huanzi-qch</a></div>
<div>出处：<a href="https://www.cnblogs.com/huanzi-qch/" target="_blank">https://www.cnblogs.com/huanzi-qch/</a></div>
<div>若标题中有“转载”字样，则本文版权归原作者所有。若无转载字样，本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利.</div>
<div><span style="color: red">请注意：</span>作者五行缺钱，如果喜欢这篇文章，请随意打赏！</div>

View Code

　　效果就是这个

　　后记

　　由于本人不是专业前端，更多骚操作都没涉及到，之前看到有好多优秀的博客页面美化，更多骚操作欢迎大家评论分享

转载于:https://www.cnblogs.com/huanzi-qch/p/11313934.html

weixin_30551963

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
博客园样式美化

　　前言　　博客园有着丰富的博客皮肤（目前有124个），博客样式按说应该足够丰富了，总有一款适合我们吧？但作为一名专业的程序员，有时候我们想要有自己的一些自定义操作　　1、账号设置 -> 博客设置　　2、向博客园申请js权限　　3、在以下位置定制代码　　有了HTML、CSS、JS代码权限，就可以愉快的美化自己的博客样式啦　　如何“剽　　窃”他...
复制链接

扫一扫