自定義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代碼】。