簡單的3步設置，讓你的博客園更漂亮！

昨天在發佈博客園的第一篇花了不少時間和精力編寫的博客後《模塊化利器: 一篇文章掌握RequireJS經常使用知識》，有博友問我的的博客風格是如何自定義的，今天特將月前整理博客時用到的一些方法總結以下，但願能對你設計本身的博客有一些幫助：）

第一步，上傳自定義的css

在瀏覽器中直接打開http://files.cnblogs.com/files/lyzg/cnblogs.css，而後按ctrl + s，便可將本人博客用到的自定義css下載下來。接着在博客的管理頁面，找到文件選項卡，上傳剛剛下載的文件：

上傳以後，記下該文件的url，如上圖中的紅框所示。注：上圖中的url爲本人博客的自定義css文件地址，你在後面設置的時候雖然也能夠用它，可是最好仍是不用，萬一未來我把這個文件刪了，你的博客就訪問不到這個css了。

第二步，設置頁面定製的css和頁首html

在博客管理頁面，找到設置選項卡：

在該選項卡下面，先修改標題，在標題文本前面先添加下面的一段html：

<span class="portrait"></span>

頁面效果以下：

這段html，在後面的步驟中用來設置頭像。

接着在博客皮膚配置處，選擇下面的皮膚，由於第一步上傳的css文件是在該皮膚下修改獲得的，部分css可能仍是得依賴該皮膚的原來的css文件：

接着在頁面定製css部分，粘貼下面的代碼：

div.post div.entry {
    font-family: Georgia, "Times New Roman", Times, sans-serif
}

div.post div.entry h1, div.post div.entry h2, div.post div.entry h3 {
    margin-top: 24px;
    margin-bottom: 12px;
}

div.post div.entry h1 {
    padding: 5px;
    color: white;
    background-color: gray;
}

div.post h2 {
    font-size: 22px;
    line-height: 100%;
}

div.post div.entry pre.code {
    font-family: Consolas border-style : dashed;
    border-left: solid 5px #6ce26c
}

div#information {
    background-color: #f8f8ee;
    border: solid 1px #e8e7d0;
    padding: 5px 10px 0px 10px;
    min-height: 10px;
    margin-top: -15px;
    margin-bottom: 30px;
    color: #666666
}

.cnblogs_code {
    border-left: #58CE60 5px solid !important;
}

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

頁面效果以下：

接着在頁首html區域，粘貼以下代碼：

<link href="http://files.cnblogs.com/files/lyzg/cnblogs.css" rel="stylesheet" />
<style type="text/css">
body {
    background: #98C17B url('http://images2015.cnblogs.com/blog/459873/201509/459873-20150919175458742-1697781612.jpg') no-repeat top center;
    background-size: 100% 100%;
    background-attachment: fixed;
}
input[type="button"].btn_my_zzk {
  width: 60px;
}

#home {
  border-top-right-radius: 0;
}
#blogTitle .title {
    position: relative;
    background: none;
}
.portrait {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    overflow: hidden;
    background: white url('http://pic.cnblogs.com/avatar/459873/20150917085709.png') no-repeat left center;
    background-size: contain;
   transition: all 0.8s;
   -moz-transition: all 0.8s; /* Firefox 4 */
   -webkit-transition: all 0.8s; /* Safari 和 Chrome */
   -o-transition: all 0.8s;
}

.headermaintitle:hover .portrait {
   -moz-transform:scale(1.2,1.2);
   -webkit-transform:scale(1.2,1.2);
   -o-transform:scale(1.2,1.2);
   transform:scale(1.2,1.2);
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background-color: #55895B;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #55895B;
}

::selection {
    color: white;
    background: #018ee8;
}
#topics a:hover {
    padding: 1px 3px 1px 3px;;
    text-decoration: none;
    color: #018ee8;
    border-radius: none;
    background-color: transparent;
}

.postTitle {
    padding-left: 0;
    background: none;
}

.subtitle {
    padding-left: 0;
}

#blogTitle {
   padding-bottom: 0;
}

#nav_q,#nav_ing,#nav_newpost {
   display:none !important;
}

#sideBar {
    border-top-width: 1px !important;
}

#navigator {
    margin-bottom: 0;
}

#sideBarMain {
    margin: 0;
    padding-right: 20px;
    padding-left: 5px;
}

.catListTitle {
    border-top-color: #CECECE;
    border-right-color: #CECECE;
    border-bottom-color: #CECECE;
}

#home {
   margin: 150px auto 50px auto;
   //width: 80%;
}

#green_channel {
    width: auto;
}

#tbCommentBody {
  width: 100%;
  display: block;
  box-sizing: border-box;
}
</style>

頁面效果以下：

須要注意的是這段代碼中，有3處須要改爲你本身博客相關的文件。第一處的文本是：

http://files.cnblogs.com/files/lyzg/cnblogs.css

你要在代碼中搜索該段文本，並替換爲第一步中你在本身博客中上傳的css。

第二處是：

http://images2015.cnblogs.com/blog/459873/201509/459873-20150919175458742-1697781612.jpg

這張圖片時博客的背景圖片，是我從百度上下下來的分辨率比較大的圖片，以便呈現出一個大圖的網頁背景。因爲博客管理頁面容許上傳的文件不包括圖片文件，因此這張圖片是插入在一篇草稿博客中的：

這篇博客不會發布，因此外面看不到，在裏面插入圖片文件，而後記下圖片文件的地址，就能夠在css中被引用了。若是你也想要這樣一個網頁背景大圖的話，能夠經過這個方式上傳一張本身喜歡的圖片，而後替換第二處所示的文本便可。

第三處是：

http://pic.cnblogs.com/avatar/459873/20150917085709.png

這個文件是頭像的url，你須要用本身圖像的url替換掉它。

第三步，設置頁腳html

找到頁腳html部分，粘貼進下面的代碼：

<div class="scrollBtn" id="scrollBtn">
  <ul class="clearfix"><li class="sB-goTop" id="goTop" style="display: list-item;">
      <a href="#top" title="回頂部"></a>
    </li>
  </ul>
</div>
<script language="javascript" type="text/javascript">
  //生成目錄索引列表
  function GenerateContentList() {
    var jquery_h3_list = $('#cnblogs_post_body h2');//若是你的章節標題不是h4,只須要將這裏的h4換掉便可
    if (jquery_h3_list.length > 0) {
      var content = '';
      content += '<div id="navCategory" style="background-color: #BDBDBD;padding:10px 5px;">';
      content += '<p style="font-size:18px;margin:0;line-height:30px;"><b>閱讀目錄</b></p>';
      content += '<ul>';
      for (var i = 0; i < jquery_h3_list.length; i++) {
        var go_to_top = '<div style="text-align: right;    text-align: right;height: 0;padding: 0;overflow: hidden;visibility: hidden;"><a name="_label' + i + '"></a></div>';
        $(jquery_h3_list[i]).before(go_to_top);
        var li_content = '<li><a href="#_label' + i + '">' + $(jquery_h3_list[i]).text() + '</a></li>';
        content += li_content;
      }
      content += '</ul>';
      content += '</div>';
      if ($('#cnblogs_post_body').length != 0) {
        $($('#cnblogs_post_body')[0]).prepend(content);
      }
    }
  }
  GenerateContentList();
</script>

<!-- JiaThis Button BEGIN -->
<script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?move=0" charset="utf-8"></script>
<!-- JiaThis Button END -->

這段js包含了返回頂部，分享組件以及博文頁面生成目錄的功能。須要注意的是這個生成目錄的功能，它的原理是去博文裏面尋找h2元素把它做爲每個目錄項，因此你在編輯博客的時候，大的標題必定是要用h2，小的標題應該用h3，不能混用，推薦使用live writter編輯博客，在編輯的時候，它的標題2和標題3在源代碼中顯示的就是h2和h3:

以上就是我當時自定義博客時用的全部方法了，有的細節沒有講太多，相信你在使用這些方法後，查看博客頁面的源代碼就能明白其中的原理了，固然有疑問的，仍是歡迎你在評論區與我交流。