博客园美化去除默认左侧的通知栏、正文全屏、隐藏底部第三方、添加回到顶部按钮

1.关于

添加同款Github角标需要申请开通JS权限
贴入 页面定制CSS代码
我的皮肤选择： SimpleMemory

2. 整体布局

/* 整体布局

	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica
      Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
 */
body {

	background: #e6ecf0; 
/*
     font-size: 15px;
*/
}

#top_nav
{
  display: none;
}

#navList li {
    margin:0px 20px;
    float:left;
list-style-type:none;
   
}

#blog_post_info 
{
   display:none;
}



#home {
  max-width: auto;
  padding: 0px;
  background: transparent;
  box-shadow: none;
  margin-top: 0;
  width: auto;
}

#main {
  margin-top: 15px;
}

#mainContent .forFlow {
  padding-right: 0px;
}

2.非阅读区域去掉白色背景

/* 非阅读区域去掉白色背景 */
.newsItem,
.catListEssay,
.catListLink,
.catListNoteBook,
.catListTag,
.catListPostCategory,
.catListPostArchive,
.catListImageCategory,
.catListArticleArchive,
.catListView,
.catListFeedback,
.mySearch,
.catListComment,
.catListBlogRank,
.catList,
.catListArticleCategory {
  background-color: transparent;
}

3.隐藏系统标题

/* 隐藏系统标题 */
#blogTitle {
  display: none;
}

4.顶部通告条

/* 顶部通告条 */
.c-notice {
  padding: 10px 0;
  background: tan;
  font-size: 0.9em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.23);
  font-size: 15px;
  display: none;
}

.c-notice > div {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}

.c-notice a {
  color: blue;
}

5.头像社交

/* 头像和社交 */
.c-portrait {
  text-align: center;
  padding: 50px 0;
  background: #39424b;
  color: #fff;
  margin-bottom: -40px;
  
  display: none;
}

/* 头像 */
.c-portrait > img {
  display: inline-block;
  height: 80px;
  border-radius: 50%;
}

6.标题和签名

/* 标题和签名 */
.c-portrait h1 {
  font-size: 25px;
  font-weight: bold;
  margin: 5px 0;
}

.c-portrait h1 a {
  color: #fff;
}

.c-portrait h2 {
  font-size: 16px;
  margin: 7px 0 10px;
  color: #ccc;
}

7.导航栏

/* **********************
 * 导航栏
 * **********************/

#navigator {
  padding: 0 10px;
  border-bottom: 2px solid #ccc;
}

#stats_article_count {
  display: none;
}

8.侧边栏

/* **********************
 * 侧边栏
 * **********************/
#sideBar {
  width: 0px;
  margin-top: 0;
}

#sideBar a {
  color: inherit;
display: none;
}

/* 隐藏侧边公告标题 */
.newsItem .catListTitle {
  display: none;
}

/* 增加列表项间距 */
.sidebar-block li {
  margin-bottom: 5px;
}

9. 文章列表

/* **********************
 * 文章列表
 * **********************/

/* 文章列表 */
#topics .postTitle {
  font-size: 28px;
  margin: 35px 0 30px;
  padding-left: 0;
}

#mainContent .day {
  padding: 15px 20px;
  background: #fff;
}

#mainContent .day .postTitle a {
  display: inline-block;
}

10.文章详情

/* **********************
 * 文章详情
 * **********************/

pre {
  margin-bottom: 1.35em;
}

pre code {
  padding: 10px 16px !important;
}

.post {
  background: #fff;
  padding: 0 60px 60px;
  box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

/* 文章标题 */
.postTitle {
  border-left: 8px solid #21759b;
  margin-bottom: 5px;
  font-weight: bold;
  line-height: 1;
  box-sizing: border-box;
}

.postTitle a:hover {
  margin-left: 0;
}

/* 去除首行缩进 */
.postBody p,
.postCon p {
  text-indent: 0;
}

/* 重写引用块样式 */
.postBody blockquote {
  min-height: auto;
  border-top: none;
  border-bottom: none;
  border-right: none;
  padding: 0 0 0 1em;
}

/* 增加底部留白 */
#cnblogs_post_body {
  padding-bottom: 5px;
}

/* 防止图片溢出 */
#cnblogs_post_body img {
  max-width: 100%;
}

/* 文章底部信息 */
.postDesc {
  margin-top: 0;
}

11. 评论

/* **********************
 * 评论
 * **********************/

#comment_form_container .comment_textarea {
  width: 100%;
}

.comment_vote {
  padding-right: 2px;
  font-size: 14px;
  margin-top: 10px;
}

.comment_vote a.comment_digg {
  color: #f80;
}

.feedbackItem {
  margin: 20px 0 25px;
  background: #fff;
  padding: 10px 15px;
}

.feedbackCon {
  font-size: 13px;
  border-bottom: 0;
  padding: 10px 5px 0 5px;
  text-align: justify;
}

12.文章评价

/* **********************
 * 文章评价
 * **********************/
#div_digg {
  position: fixed;
  right: 30px;
  bottom: 50px;
  background: #fff;
  padding: 20px 20px 15px;
  border-radius: 5px;
  border: 1px solid #888;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3);
  display: none !important;
}

13.隐藏广告

/* **********************
 * 隐藏广告
 * **********************/

#ad_t2,
#opt_under_post,
.c_ad_block,
#under_post_news,
#under_post_kb {
  display: none !important;
}

14.适配手机

/* **********************
 * 适配手机
 * **********************/

@media (max-width: 767px) {
  #home {
    padding-left: 0;
    padding-right: 0;
  }
  #div_digg {
    width: auto;
    padding: 0;
    right: -25px;
    bottom: 3px;
    box-shadow: none;
  }
  #div_digg .buryit {
    display: none;
  }
  #mainContent .forFlow {
    padding-right: 0;
  }
  #mainContent .post {
    padding: 0 20px;
  }

  #sideBar,
  #blog-comments-placeholder {
    padding: 0 0px;
  }
}

15.添加拷贝按钮

15.1 CSS代码

/*添加拷贝按钮*/
.cnblogs-markdown pre {
  position: relative;
}
.cnblogs-markdown pre > span {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 2px;
  padding: 0 10px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  cursor: pointer;
}
.cnblogs-markdown pre > .copyed {
  background: #67c23a;
}

15.2 页脚Html代码

<!-- Markdown 代码复制按钮 -->
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/wuliytTaotao/cp.js"></script>

16.代码高亮

/*-----------------------------------------------------代码高亮-------------------------------------------------------*/
.cnblogs-markdown pre {
	white-space: pre!important
}

.cnblogs-markdown .hljs {
	display: block!important;
	overflow-x: auto!important;
	padding: 1em!important;
	background: #282c34!important;
	border: 1px solid #fff!important;
	border-radius: 5px!important;
	font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace!important;
	font-size: 15px!important
}

.hljs,.hljs-subst,.hljs-tag {
	color: #f8f8f2!important
}

.hljs-emphasis,.hljs-strong {
	color: #a8a8a2!important
}

.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-quote {
	color: #ae81ff!important
}

.hljs-meta,.hljs-regexp {
	color: #fd971f!important
}

.hljs-built_in,.hljs-builtin-name,.hljs-code,.hljs-section,.hljs-selector-class,.hljs-title {
	color: #a6e22e!important
}

.hljs-strong {
	font-weight: 700
}

.hljs-emphasis {
	font-style: italic!important
}

.hljs-attr,.hljs-name,.hljs-selector-tag,.hljs-symbol {
	color: #f74449!important
}

.hljs-attribute,.hljs-keyword {
	color: #66d9ef!important
}

.hljs-class .hljs-title,.hljs-params {
	color: #f8f8f2!important
}

.hljs-addition,.hljs-selector-attr,.hljs-selector-id,.hljs-selector-pseudo,.hljs-string,.hljs-template-variable,.hljs-type,.hljs-variable {
	color: #e6db74!important
}

.hljs-comment,.hljs-deletion {
	color: #999!important
}

/* ---------------------------- 代码高亮结束-------------------------------------------*/

17.添加返回顶部按钮

17.1 CSS代码

/*添加返回顶部按钮*/
#back-to-top {
    background-color: #00CD00;
    bottom: 0;
    box-shadow: 0 0 6px #00CD00;
    color: #444444;
    padding: 10px 10px;
    position: fixed;
    right: 50px;
    cursor: pointer;
}

17.2 页脚html代码

<!--返回顶部-->
<span id="back-to-top"><a href="#top">TOP</a></span>

18. 完整CSS代码


/* 整体布局

	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica
      Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
 */
body {

	background: #e6ecf0; 
/*
     font-size: 15px;
*/
}

#top_nav
{
  display: none;
}

#navList li {
    margin:0px 20px;
    float:left;
list-style-type:none;
   
}

#blog_post_info 
{
   display:none;
}



#home {
  max-width: auto;
  padding: 0px;
  background: transparent;
  box-shadow: none;
  margin-top: 0;
  width: auto;
}

#main {
  margin-top: 15px;
}

#mainContent .forFlow {
  padding-right: 0px;
}

/* 非阅读区域去掉白色背景 */
.newsItem,
.catListEssay,
.catListLink,
.catListNoteBook,
.catListTag,
.catListPostCategory,
.catListPostArchive,
.catListImageCategory,
.catListArticleArchive,
.catListView,
.catListFeedback,
.mySearch,
.catListComment,
.catListBlogRank,
.catList,
.catListArticleCategory {
  background-color: transparent;
}

/* **********************
 * 博客页首
 * **********************/

/* 隐藏系统标题 */
#blogTitle {
  display: none;
}

/* 顶部通告条 */
.c-notice {
  padding: 10px 0;
  background: tan;
  font-size: 0.9em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.23);
  font-size: 15px;
  display: none;
}

.c-notice > div {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}

.c-notice a {
  color: blue;
}

/* 头像和社交 */
.c-portrait {
  text-align: center;
  padding: 50px 0;
  background: #39424b;
  color: #fff;
  margin-bottom: -40px;
  
  display: none;
}

/* 头像 */
.c-portrait > img {
  display: inline-block;
  height: 80px;
  border-radius: 50%;
}

/* 标题和签名 */
.c-portrait h1 {
  font-size: 25px;
  font-weight: bold;
  margin: 5px 0;
}

.c-portrait h1 a {
  color: #fff;
}

.c-portrait h2 {
  font-size: 16px;
  margin: 7px 0 10px;
  color: #ccc;
}

/* **********************
 * 导航栏
 * **********************/

#navigator {
  padding: 0 10px;
  border-bottom: 2px solid #ccc;
}

#stats_article_count {
  display: none;
}

/* **********************
 * 侧边栏
 * **********************/
#sideBar {
  width: 0px;
  margin-top: 0;
}

#sideBar a {
  color: inherit;
display: none;
}

/* 隐藏侧边公告标题 */
.newsItem .catListTitle {
  display: none;
}

/* 增加列表项间距 */
.sidebar-block li {
  margin-bottom: 5px;
}

/* **********************
 * 文章列表
 * **********************/

/* 文章列表 */
#topics .postTitle {
  font-size: 28px;
  margin: 35px 0 30px;
  padding-left: 0;
}

#mainContent .day {
  padding: 15px 20px;
  background: #fff;
}

#mainContent .day .postTitle a {
  display: inline-block;
}

/* **********************
 * 文章详情
 * **********************/

pre {
  margin-bottom: 1.35em;
}

pre code {
  padding: 10px 16px !important;
}

.post {
  background: #fff;
  padding: 0 60px 60px;
  box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}

/* 文章标题 */
.postTitle {
  border-left: 8px solid #21759b;
  margin-bottom: 5px;
  font-weight: bold;
  line-height: 1;
  box-sizing: border-box;
}

.postTitle a:hover {
  margin-left: 0;
}

/* 去除首行缩进 */
.postBody p,
.postCon p {
  text-indent: 0;
}

/* 重写引用块样式 */
.postBody blockquote {
  min-height: auto;
  border-top: none;
  border-bottom: none;
  border-right: none;
  padding: 0 0 0 1em;
}

/* 增加底部留白 */
#cnblogs_post_body {
  padding-bottom: 5px;
}

/* 防止图片溢出 */
#cnblogs_post_body img {
  max-width: 100%;
}

/* 文章底部信息 */
.postDesc {
  margin-top: 0;
}

/* **********************
 * 评论
 * **********************/

#comment_form_container .comment_textarea {
  width: 100%;
}

.comment_vote {
  padding-right: 2px;
  font-size: 14px;
  margin-top: 10px;
}

.comment_vote a.comment_digg {
  color: #f80;
}

.feedbackItem {
  margin: 20px 0 25px;
  background: #fff;
  padding: 10px 15px;
}

.feedbackCon {
  font-size: 13px;
  border-bottom: 0;
  padding: 10px 5px 0 5px;
  text-align: justify;
}

/* **********************
 * 文章评价
 * **********************/
#div_digg {
  position: fixed;
  right: 30px;
  bottom: 50px;
  background: #fff;
  padding: 20px 20px 15px;
  border-radius: 5px;
  border: 1px solid #888;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3);
  display: none !important;
}


/* **********************
 * 隐藏广告
 * **********************/

#ad_t2,
#opt_under_post,
.c_ad_block,
#under_post_news,
#under_post_kb {
  display: none !important;
}






/* **********************
 * 适配手机
 * **********************/

@media (max-width: 767px) {
  #home {
    padding-left: 0;
    padding-right: 0;
  }
  #div_digg {
    width: auto;
    padding: 0;
    right: -25px;
    bottom: 3px;
    box-shadow: none;
  }
  #div_digg .buryit {
    display: none;
  }
  #mainContent .forFlow {
    padding-right: 0;
  }
  #mainContent .post {
    padding: 0 20px;
  }

  #sideBar,
  #blog-comments-placeholder {
    padding: 0 0px;
  }
}



/*添加拷贝按钮*/
.cnblogs-markdown pre {
  position: relative;
}
.cnblogs-markdown pre > span {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 2px;
  padding: 0 10px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  cursor: pointer;
}
.cnblogs-markdown pre > .copyed {
  background: #67c23a;
}



/*-----------------------------------------------------代码高亮-------------------------------------------------------*/



.cnblogs-markdown pre {
	white-space: pre!important
}

.cnblogs-markdown .hljs {
	display: block!important;
	overflow-x: auto!important;
	padding: 1em!important;
	background: #282c34!important;
	border: 1px solid #fff!important;
	border-radius: 5px!important;
	font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace!important;
	font-size: 15px!important
}

.hljs,.hljs-subst,.hljs-tag {
	color: #f8f8f2!important
}

.hljs-emphasis,.hljs-strong {
	color: #a8a8a2!important
}

.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-quote {
	color: #ae81ff!important
}

.hljs-meta,.hljs-regexp {
	color: #fd971f!important
}

.hljs-built_in,.hljs-builtin-name,.hljs-code,.hljs-section,.hljs-selector-class,.hljs-title {
	color: #a6e22e!important
}

.hljs-strong {
	font-weight: 700
}

.hljs-emphasis {
	font-style: italic!important
}

.hljs-attr,.hljs-name,.hljs-selector-tag,.hljs-symbol {
	color: #f74449!important
}

.hljs-attribute,.hljs-keyword {
	color: #66d9ef!important
}

.hljs-class .hljs-title,.hljs-params {
	color: #f8f8f2!important
}

.hljs-addition,.hljs-selector-attr,.hljs-selector-id,.hljs-selector-pseudo,.hljs-string,.hljs-template-variable,.hljs-type,.hljs-variable {
	color: #e6db74!important
}

.hljs-comment,.hljs-deletion {
	color: #999!important
}




/* ---------------------------- 代码高亮结束-------------------------------------------*/



/*添加返回顶部按钮*/
#back-to-top {
    background-color: #00CD00;
    bottom: 0;
    box-shadow: 0 0 6px #00CD00;
    color: #444444;
    padding: 10px 10px;
    position: fixed;
    right: 50px;
    cursor: pointer;
}

19. 完整页脚 HTML 代码

<!-- Markdown 代码复制按钮 -->
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/wuliytTaotao/cp.js"></script>

<!--返回顶部-->
<span id="back-to-top"><a href="#top">TOP</a></span>

20.标题栏（列表）底色

<!--此处自定义标题背景色-->
#cnblogs_post_body h1 {
    background: #265B8A;
    border-radius: 6px 6px 6px 6px;
    color: #FFFFFF;
    font-family: FZShuTi；
    font-size: 23px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 12px 0 8px 5px;
    text-shadow: 2px 2px 3px #222222;
    text-align:left;
    margin-bottom: 20px;
}
#cnblogs_post_body h2 {
background-color: #008FC6;
    border-radius: 3px;
    text-align:left;
    color: white;
    text-shadow: 1px 1px 2px #222222;
    padding-left: 15px;
    margin-bottom: 12px;
}
#cnblogs_post_body h3 {
background-color: #51C332;
    border-radius: 3px;
    text-align:left;
    color: white;
    text-shadow: 1px 1px 2px #222222;
    padding: 5px 15px;
    margin-bottom: 10px;
    width:50%
}
#cnblogs_post_body h4 {
    background-color: #5bc0de;
    border-radius: 3px;
    text-align:left;
    color: white;
    text-shadow: 1px 1px 2px #222222;
    padding: 5px 15px;
    margin-bottom: 10px;
    width:25%
}
code {
    padding: 1px 3px;
    margin: 0 3px;
    background: #ddd;
    border: 1px solid #ccc;
    font-family: Menlo,Monaco,Andale Mono,lucida console,Courier New,monospace;
    word-wrap: break-word;
    font-size: 14px;
}
#cnblogs_post_body table {
    text-align: left;
    width: 100%;
    border: 1px solid #dedede;
    margin: 15px 0;
    border-collapse: collapse;
}
#cnblogs_post_body table thead tr {
    background: #f8f8f8;
}
#cnblogs_post_body table tbody tr:hover {
    background: #efefef;
}

posted @ 2020-09-23 13:52 mohist 阅读(332) 评论(0) 收藏举报

刷新页面返回顶部

mohist

博客园美化去除默认左侧的通知栏、正文全屏、隐藏底部第三方、添加回到顶部按钮

1.关于

2. 整体布局

2.非阅读区域去掉白色背景

3.隐藏系统标题

4.顶部通告条

5.头像社交

6.标题和签名

7.导航栏

8.侧边栏

9. 文章列表

10.文章详情

11. 评论

12.文章评价

13.隐藏广告

14.适配手机

15.添加拷贝按钮

16.代码高亮

17.添加返回顶部按钮

18. 完整CSS代码

19. 完整 页脚 HTML 代码

20.标题栏（列表）底色

公告

19. 完整页脚 HTML 代码