2. 程式人生 > 實用技巧 >部落格園美化去除預設左側的通知欄、正文全屏、隱藏底部第三方、添加回到頂部按鈕

部落格園美化去除預設左側的通知欄、正文全屏、隱藏底部第三方、添加回到頂部按鈕

阿新 • • 發佈：2020-09-23

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>

相關推薦

部落格園美化去除預設左側的通知欄、正文全屏、隱藏底部第三方、添加回到頂部按鈕

1.關於 新增同款Github角標需要申請開通JS許可權 貼入 頁面定製CSS程式碼 我的面板選擇： SimpleMemory

部落格園美化介面

首先進入設定，在設定中勾選禁用模板預設css， 然後就可以把對應的程式碼複製上去了

部落格園美化日記

搞了一整天，沒做多好，以後再做吧。 首頁佈局還可以，開啟一篇文章就亂了，心累。

部落格園裝飾樣式 部落格園美化樣式

部落格園美化樣式一條龍服務 部落格園作為自己總結知識、見證自己技術成長的技術家園，就像自己的房間一樣，想收拾的乾淨，舒服，與眾不同

部落格園美化

設定部落格面板為：SimpleMemory 新增美化css （css程式碼） #google_ad_c1, #google_ad_c2 {display:none;}

我的部落格園美化

部落格園後臺 - 設定 時區&語言與地區&部落格面板 頁面定製 CSS 程式碼 /*新增側邊欄目錄*/

部落格園美化——全面

準備工作： 在設計部落格前，需申請JS程式碼許可權，例如下圖 進入部落格編輯網頁：https://i.cnblogs.com/settings

部落格園美化工程

底部新增小魚 在部落格園頁尾新增程式碼 <!-- 底部加了小魚<・)))><<~ -->

隨筆-部落格園美化

豬寶店美化程式碼 背景調整 #頁面定製CSS程式碼中： body { color:#000000; background:url(https://w.wallhaven.cc/full/l3/wallhaven-l392mr.jpg) fixed;

部落格園美化：JS實現頁面複製內容時自動新增版權資訊

在頁尾HTML中新增以下程式碼： <scripttype=\"text/javascript\"> var selfLogin = false; var follow = $(\'#profile_block\').find(\'#p_b_follow\');

部落格園美化：新增live2d看板娘

將下列程式碼複製貼上到頁尾HTML： <!-- live2D --> <link rel=\"stylesheet\" type=\"text/css\" href=\"https://blog-static.cnblogs.com/files/zhangshuhao1116/waifu1.css\"/>

部落格園美化：新增雪花特效

一、將以下程式碼複製貼上到頁首 HTML 程式碼： <!--雪花--> <div id=\"midground\" class=\"wall\"></div>

部落格園美化：新增滑鼠點選特效

將以下程式碼複製貼上到頁尾 HTML 程式碼 : <!-- 滑鼠點選特效 --> var a_idx = 0;

部落格園美化——左下角插入懸浮音樂外掛

部落格園美化——在左下角增加音樂外掛 首先在部落格園後臺設定的頁尾程式碼中加入以下程式碼並儲存

部落格園美化 | 自定義js<01>-新增文章markdown連結一鍵複製按鈕

1、進入部落格園系統設定 2、在【部落格側邊欄公告(支援HTML程式碼)】的程式碼框中貼上以下程式碼

部落格園美化 | part03-新增目錄

方法1 全部程式碼 // 生成目錄索引列表 function GenerateContentList() { var mainContent = $(\'#cnblogs_post_body\');

部落格園美化面板

部落格園美化面板 主模版 模版教程地址 https://www.dbnuo.com/Cnblogs-Theme-SimpleMemory/docs/v2/#/

部落格園美化[SimpleMemory主題+tctip外掛]

美化前置條件 SimpleMemory主題 官網地址：https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2/#/Docs/GettingStarted/install

部落格園美化[SimpleMemory主題+tctip外掛] _

https://www.cnblogs.com/SkystarX/p/15785795.html 美化前置條件 SimpleMemory主題 官網地址：https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2/#/Docs/GettingStarted/install

部落格園介面美化

1. 選擇一款部落格面板 Simplelified 2. 申請js 3. 在頁面定製 CSS 程式碼新增下面程式碼