博客園美化操作

之所以寫這篇文章的原因了主要就是博客園的默認樣式太單一，而且很多人都在用，就想與眾不同一樣，不做大多數

 

准備工作

想要美化自己的博客園默認界面，首先需要申請js權限

 

步入正題

當你的這一步做完之后就可以開始給博客化妝了

#########################################頁面標題樣式================================

#cnblogs_post_body
{
    color: black;      
    font: 0.875em/1.5em "微軟雅黑" , "PTSans" , "Arial" ,sans-serif;
    font-size: 15px;
}
#各個等級標題的顏色樣式
#cnblogs_post_body h1    {
    background: #2B6695;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
    font-size: 23px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h2    {
    background: #008eb7;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
    font-size: 20px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h3    {
    background: #399ab2;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
    font-size: 18px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h4{
    background: #2B6600;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial;
    font-size: 16px;
    font-weight: bold;
    height: 24px;
    width:50%;
    line-height: 23px;
    margin: 12px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #222222;
}

#頁面中a標簽鼠標位置
#cnblogs_post_body h2:a{
   color: rgb(235, 235, 235)
}
#cnblogs_post_body h2 a:hover{
   color: #FF00FF;
}
#頁面中標題位置
#cnblogs_post_body h1{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h1:hover{
   color: #FF00FF;
}
#cnblogs_post_body h2{
   color:rgb(235, 235, 235);
}
#cnblogs_post_body h2:hover{
   color: #FF00FF;
}
#cnblogs_post_body h3{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h3:hover{
   color: #FF00FF;
}
#cnblogs_post_body h4{
   color: rgb(235, 235, 235);
}
#cnblogs_post_body h4:hover{
   color:#FF00FF;
}

#####################去除廣告展示以及默認圖片#####################################
#blogTitle{
        display:none}

#ad_t2{
        display:none;
}

body{
        background:none;
        margin-top:-24px;
}

#under_post_news{
        display:none}

#under_post_kb{
        display:none}

#cnblogs_c1,#cnblogs_c2{
        display:none}

#tbCommentBody{
        resize:none}

.go_top {
        display: inline-block;
        position: fixed;
        right: 1%;
        bottom: 3%;
        width: 100px;
        height: 59px;
        background: url(https://files.cnblogs.com/files/zh605929205/2.gif) no-repeat center center;
        background-size: 111%;
        -moz-background-size: 111%;
        display: none;
}
#comment_nav{
        display:none}

.feedbackListSubtitle{
        background:#E1FFFF;
        -moz-border-radius: 3px;
        border-radius: 3px;
        padding: 3px;
        margin: 10px 0px;
        text-shadow: 2px 2px 3px #404040;
}

經過以上步驟基本上就差不多了，但是有一個地方，那就是側邊欄公告，我們可以讓他變得更美點，先看效果圖：↓

這些都可以自定制：總訪客，總點擊量，github以及時鍾，下邊就一步步解釋

插入時鍾
http://www.blogclock.cn        #訪問這個鏈接，然后一步步按照默認的操作，
一直點到最后他會給你生成一串代碼，你只需要把代碼拷貝出來，粘貼到下圖的位置就OK了

插入訪客數以及點擊量
http://www.amazingcounters.com/
第一步：選擇 Create Your Free Web Counter Now!
第二步：選擇你需要的樣式，繼續點擊下一步
第三步：有可能要你填寫相關的數據了
　　Your Name:用戶名（隨便寫）
　　Email Addredd:郵箱地址（隨便寫）
　　Password:密碼（兩次輸入要一致，推薦和郵箱一樣）
　　site name：因為我要監控的是博客園，所以寫博客園就好
　　site url：輸入你的博客地址（當訪問這個地址才會有流量產生）
　　starting count：開始計數（開始計數這個隨便寫，代表你的訪客從多少開始算起）
　　increment on：兩個選擇（點擊一次計數，登陸點擊計數）
第四步：會生成一個按鈕，點擊一下，會彈出新的頁面，將我畫出來的那段代碼復制到博客園js權限哪里就OK了

貢獻一段源碼

針對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;
}

增加打賞按鈕

<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://xxxxx'      }, {        type: 'wechat',        qrImg: 'https://xxxxxx'      }    ]
  }).init()
  </script>

插入時鍾： 
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/jackson0714/p/4833669.html

待續