自訂css樣式美化部落格園

自訂css樣式美化部落格園

首先說明，我選用的部落格皮膚是MTClean，以下樣式在其他皮膚下有些並不適用。 針對MTClean皮膚的美化

/* 設定tongqingliu頂部間距*/h1 {    margin-top: 20px;}/* 設定tongqingliu方框及背景*/#top {    color: #333;    margin-left: 50px;    margin-right: 50px;    border-radius: 10px;    background-color: royalblue;    border-top:0px;    padding-bottom: 35px;    text-align: center;}/* 設定tongqingliu字型及大小*/#top a, #top a:link, #top a:visited, #top a:active, #top a:hover {    font-family: "Comic Sans MS";    font-size: larger;    color: whitesmoke;}/* 設定保持學習的態度 */#tagline {    margin-top: 20px;    font-size: large;    color:white;}/* 導航及以文字所在方框的位置 */#leftmenu {    margin-top: 100px;}/* 導航，統計資訊 */#leftmenu h3 {    font-family: palatino,georgia,times new roman,serif;    color: whitesmoke;    background-color: royalblue;    font-size: 1.5em;    font-weight: normal;    padding: 3px;    margin-top: 0;    line-height: 1.5;    letter-spacing: .1em;    text-transform: uppercase;}/* 首頁，聯絡，管理，隨筆，文章，評論 */#leftmenu ul {    font-size: 14px;}/* 置頂隨筆及以下所在方框 */#main {    margin-top: 50px;}/* 置頂隨筆， 日期  */p.date {    color: black;    font-family: Palatino,georgia,times new roman,serif;    font-size: 1em;    font-weight: bold;    padding-top: 15px;    padding-bottom: 10px;    display: none;}/* 設定首頁目錄 */div.post h2 a:link {    font-family: Palatino,Georgia,Verdana,arir,Sans-Serif;    font-size: 18pt;    font-weight: bold;    color: whitesmoke;    background-color: green;    line-height: 40px;    text-decoration: none;}div.post h2 a:visited {    font-family: Palatino,Georgia,Verdana,arir,Sans-Serif;    font-size: 18pt;    font-weight: bold;    line-height: 40px;    color: whitesmoke;    background-color: green;    text-decoration: none;}div.post h2 {    font-family: palatino,georgia,verdana,arial,sans-serif;    font-size: 18pt;    /* color: #606060; */    font-weight: bold;    /* background: #fff; */    line-height: 40px;    margin-top: 28px;    background-color: green;    text-decoration: none;}

美化部落格內容

/* 設定部落格本文一二三級標題格式 *//* 一級標題 */#cnblogs_post_body h1 {    font-size: 28px;    font-weight: bold;    line-height: 1.5;    color: black;    margin: 10px 0;}/* 二級標題 */#cnblogs_post_body h2 {    font-size: 24px;    font-weight: bold;    line-height: 1.5;    color: whitesmoke;    background-color: royalblue;    margin: 10px 0;}/* 三級標題 */#cnblogs_post_body h3 {    font-size: 20px;    font-weight: bold;    line-height: 1.5;    color: whitesmoke;    background-color: dimgrey;}/*  本文 */#cnblogs_post_body p {    font-size: 12pt;}

美化簽名

/* 設定簽名格式 */#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;}

美化代碼

代碼使用Monokai樣式。

/*Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/*/pre {/*控制碼不換行*/    white-space: pre;    word-wrap: normal;}.cnblogs-markdown .hljs {    font-size: 16px!important;    font-family: consolas,monospace !important;    display: block;    overflow-x: auto;    padding: 0.5em;    background: #23241f !important;    color: #FFF;    white-space: pre;    word-break: normal;    padding: 10px 15px !important;}.hljs,.hljs-tag,.hljs-subst {  color: #f8f8f2;}.hljs-strong,.hljs-emphasis {  color: #a8a8a2;}.hljs-bullet,.hljs-quote,.hljs-number,.hljs-regexp,.hljs-literal,.hljs-link {  color: #ae81ff;}.hljs-code,.hljs-title,.hljs-section,.hljs-selector-class {  color: #a6e22e;}.hljs-strong {  font-weight: bold;}.hljs-emphasis {  font-style: italic;}.hljs-keyword,.hljs-selector-tag,.hljs-name,.hljs-attr {  color: #f92672;}.hljs-symbol,.hljs-attribute {  color: #66d9ef;}.hljs-params,.hljs-class .hljs-title {  color: #f8f8f2;}.hljs-string,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-selector-id,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-addition,.hljs-variable,.hljs-template-variable {  color: #e6db74;}.hljs-comment,.hljs-deletion,.hljs-meta {  color: #75715e;}

屏蔽廣告

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

以上樣式可以直接在【頁面定製CSS代碼】中使用。 美化部落格側邊欄公告

插入時鐘：
http://www.blogclock.cn/
插入訪客來源：
http://s11.flagcounter.com/more/Fe64/
插入總訪客數：
http://www.amazingcounters.com/
插入QQ通訊群組件：
https://connect.qq.com/intro/wpa

產生後的代碼放在【部落格側邊欄公告（支援HTML代碼）（支援JS代碼）】中。 增加打賞按鈕

<script src="http://static.tctip.com/tctip-1.0.0.min.js"></script>  <script>    new tctip({    top: '20%',    button: {      id: 9,      type: 'dashang',    },    list: [      {        type: 'alipay',        qrImg: 'https://files.cnblogs.com/files/liutongqing/zfb30.bmp'      }, {        type: 'wechat',        qrImg: 'https://files.cnblogs.com/files/liutongqing/wx30.bmp'      }    ]  }).init()  </script>

這裡參考了greedying大神的作品，github地址，感謝。

這段代碼應該放在【頁首Html代碼】。