自定义美化博客园

举报
lxw1844912514 发表于 2022/03/27 00:53:18 2022/03/27
【摘要】 目录 美化博客内容美化签名美化推荐及反对屏蔽广告美化博客侧边栏公告增加打赏功能:添加目录/制定功能:页首自动生成目录功能:程序演示效果GIF图录制:Typora 高效编写,并快捷同步到博客园 设置页面禁止复制功能: 其他美化功能(推荐博客):   正文   最近发现,好多...

 

正文

  最近发现,好多排名靠前的技术博客,首先是排版特别美观,然后博客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 οncοntextmenu="return false;" onselectstart="return false">
前面一句是禁止右键的,后面一句是禁止复制的。
 
3、在js中添加如下两行语句:
//禁止页面选择以及鼠标右键
document.οncοntextmenu=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

文章来源: blog.csdn.net,作者:lxw1844912514,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/lxw1844912514/article/details/100028680

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。