文档章节

博客园样式美化

o
 osc_i6ddt53t
发布于 2019/04/10 10:10
字数 1316
阅读 18
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

  前言

  博客园有着丰富的博客皮肤(目前有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

 

  js

<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

   效果

  

 

 

 

  特效爱心

  js

// 鼠标特效,心
    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

   效果

 

  2020-01-08更新:这个打赏插件时不时会莫名报错,现在我已经注释起来,不用它了,改成直接在版权声明下面贴出二维码

 

 

 

  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

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
浅入浅出Android(003):使用TextView类构造文本控件

基础: TextView是无法供编辑的。 当我们新建一个项目MyTextView时候,默认的布局(/res/layout/activity_main.xml)中已经有了一个TextView: <TextView 运行效果如下: 修改其文本内容...

樂天
2014/03/22
708
1
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.3K
1
极速博客引擎--Gor

gor 是使用 golang 实现的类Ruhoh静态博客引擎(Ruhoh like),基本兼容ruhoh 1.x规范. 相当于与ruhoh的官方实现(ruby实现), 有以下优点: 速度完胜 -- 编译wendal.net近200篇博客,仅需要1秒 安装...

wendal
2013/01/20
3.9K
0
NSSplitView 扩展--DMSplitView

DMSplitView 对标准的 OS X 的 NSSplitView 控件进行改造,可满足更复杂的要求: 子视图的大小和约束 分隔条位置 可收缩伸展的子视图 动画变换效果 可控制分隔条的粗细和样式 可保存和恢复分...

匿名
2013/01/24
371
0
XLSX读写库--EPPlus

EPPlus 是使用Open Office XML格式(xlsx)读写Excel 2007 / 2010文件的.net开发库。 EPPlus 支持: 单元格范围 单元格样式(Border, Color, Fill, Font, Number, Alignments) Charts 图片 形状...

匿名
2013/02/01
1W
2

没有更多内容

加载失败,请刷新页面

加载更多

大数据研发学习之路--Hadoop集群搭建

阅读编译文档 准备一个hadoop源码包,我选择的hadoop版本是:hadoop-2.7.7-src.tar.gz,在hadoop-2.7.7的源码 包的根目录下有一个文档叫做BUILDING.txt,这其中说明了编译hadoop所需要的一些...

DSJ-shitou
50分钟前
8
0
OSChina 周五乱弹 —— 特么是别的公司派来的特洛伊木马吧?

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 小小编辑推荐:《我会守在这里》- 毛不易 《我会守在这里》- 毛不易 手机党少年们想听歌,请使劲儿戳(这里) @FalconChen :股市连跪了五天,...

小小编辑
51分钟前
59
2
如何在find中排除目录。命令 - How to exclude a directory in find . command

问题: I'm trying to run a find command for all JavaScript files, but how do I exclude a specific directory? 我正在尝试为所有JavaScript文件运行find命令,但是如何排除特定目录? ......

法国红酒甜
今天
73
0
《Java8实战》笔记(02):通过行为参数传递代码

本文源码 应对不断变化的需求 通过筛选苹果阐述通过行为参数传递代码 初试牛刀:筛选绿苹果 public static List<Apple> filterGreenApples(List<Apple> inventory){List<Apple> result = ......

巨輪
今天
19
0
JeeSite 4 架构特点、安全方面、为什么好、工匠精神、不忘初心

1、底层架构 以 Spring Boot 2 为基础,Maven 多项目依赖,模块分项目,松耦合,方便模块升级、增减模块。 模块化的数据库自动升级程序,当模块升级代码需要更新数据库时,自动执行对应版本 ...

ThinkGem
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部