自定义美化博客园
正文
最近发现,好多排名靠前的技术博客,首先是排版特别美观,然后博客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——在编辑器内,如果双击或上下文点击发生在子元素上,该值的最高级祖先元素将被选中。
前面一句是禁止右键的,后面一句是禁止复制的。
document.oncontextmenu=function(){return false;};
document.onselectstart=function(){return false;};
其他美化功能(推荐博客):
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
赞赏码
非学,无以致疑;非问,无以广识