自定义美化博客园

　　最近发现，好多排名靠前的技术博客，首先是排版特别美观，然后博客CSS布局也是自定义设置的，故在网上找了些例子，对自己博客进行了小小改动，将部分代码及链接分享给大家！

美化博客内容

 1 /* 设置博客正文一二三级标题格式 */
 2 /* 一级标题 */
 3 #cnblogs_post_body h1 {
 4     font-size: 28px;
 5     font-weight: bold;
 6     line-height: 1.5;
 7     color: black;
 8     margin: 10px 0;
 9 }
10 /* 二级标题 */
11 #cnblogs_post_body h2 {
12     font-size: 24px;
13     font-weight: bold;
14     line-height: 1.5;
15     color: whitesmoke;
16     background-color: royalblue;
17     margin: 10px 0;
18 }
19 /* 三级标题 */
20 #cnblogs_post_body h3 {
21     font-size: 20px;
22     font-weight: bold;
23     line-height: 1.5;
24     color: whitesmoke;
25     background-color: dimgrey;
26 }
27 /*  正文 */
28 #cnblogs_post_body p {
29     font-size: 12pt;
30 }

美化签名

/* 设置签名格式 */
#MySignature {
    display: none;
    background-color: #B2E866;
    border-radius: 10px;
    box-shadow: 1px 1px 1px #6B6B6B;
    padding: 10px;
    line-height: 1.5;
    text-shadow: 1px 1px 1px #FFF;
    font-size: 16px;
    font-family: 'Microsoft Yahei';
}

美化推荐及反对

设置推荐及反对按钮在页面右下角浮动显示，屏蔽反对按钮。

/* 推荐及反对 */
#div_digg {
    padding: 5px;
    position: fixed;
    z-index: 1000;
    bottom: 0px;
    right: 0;
    border: 0px solid #D9DBE1;
    background-color: #FFFFFF;
    opacity: 0.8;
    width: 46px;
    float: right;
    margin-bottom: 10px;
    margin-right: 10px;
    font-size: 12px;
    text-align: center;
    margin-top: 10px;
    border: 2px solid red;
}
/* ignore反对 */
.buryit {
    display: none;
}
/*推荐框 悬浮 */
#div_digg {
    position: fixed;
    bottom: 5px;
    width: 140px;
    right: 300px;
    border: 2px solid #edd7b2;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px 5px 5px 5px !important;
    box-shadow: 0 0 0 1px #ecd7b1, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

屏蔽广告

/* adblock */
#ad_t2 {
    display: none;
}
.c_ad_block {
    display: none;
}

美化博客侧边栏公告

插入时钟： 
http://www.blogclock.cn/ 
插入访客来源： 
http://s11.flagcounter.com/more/Fe64/ 
插入总访客数： 
http://www.amazingcounters.com/ 
插入QQ通讯组件： 
https://connect.qq.com/intro/wpa

生成后的代码放在【博客侧边栏公告（支持HTML代码）（支持JS代码）】中。

增加打赏功能：

请参考：http://www.cnblogs.com/greedying/p/6483222.html

添加目录/制定功能：

请参考：https://www.cnblogs.com/miangao/p/6846916.html

页首自动生成目录功能：

请参考：https://www.cnblogs.com/chinas/p/6088341.html

程序演示效果GIF图录制：

请参考：http://blog.bahraniapps.com/gifcam/#download

Typora 高效编写，并快捷同步到博客园

Typora 是一款跨平台（Windows/Mac/Linux）的功能强大的MarkDown编辑器，实用性非常高。

并使用博主自己开发的.NET Core开发的工具快速将博客同步到博客园。

请参考：https://www.cnblogs.com/stulzq/p/9043632.html

设置页面禁止复制功能：

  1、通过css的方式，添加CSS代码：

/* 禁止页面，选中 复制 */
html,body{
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
}

除了”none”还支持以下值:

auto——默认值，用户可以选中元素中的内容
text——用户可以选择元素中的文本
element——文本可选，但仅限元素的边界内(只有IE和FF支持)
all——在编辑器内，如果双击或上下文点击发生在子元素上，该值的最高级祖先元素将被选中。

2、通过在body标签中添加如下属性：
<body oncontextmenu="return false;" onselectstart="return false">
前面一句是禁止右键的，后面一句是禁止复制的。
 
3、在js中添加如下两行语句：
//禁止页面选择以及鼠标右键
document.oncontextmenu=function(){return false;}; 
document.onselectstart=function(){return false;};

其他美化功能（推荐博客）：

请参考：https://www.cnblogs.com/voidsky/p/5490220.html?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

　　　　https://blog.csdn.net/siwuxie095/article/details/80151468

              https://blog.csdn.net/qq_22186119/article/details/78369855

　　　　https://www.cnblogs.com/liuyishi/p/9190459.html#_label2

　　　　https://www.cnblogs.com/hafiz/p/7573464.html

　　　　https://www.cnblogs.com/shwee/p/9060226.html

 

【时间仓促，如有错误，欢迎指正！ ||   欢迎留下您的评语！  大家一起探讨、学习区块链!】

【转载请注明出处！http://www.cnblogs.com/X-knight/】 

 

posted @ 2018-06-09 16:01  勋爵|X-knight  阅读(3945)  评论(7)  编辑  收藏  举报