博客園強迫癌晚期者的福音——自定義博客園主題

  本博客適用於那些對於有些強迫症重症患者，如我，或者對審美有較高追求的人。
  如果對於博客園提供的主題模版均不是很滿意可以自己手動調控，比如可以隨意更改自己喜歡的樣式，更改格局，公告欄添加個人額外信息、訪問統計插件，導航欄設置自己想要的logo、將選項和隨筆分類鏈接關聯，也可以自定義導航欄選項的相關鏈接地址。如我的博客DaisyWang88。
  改建博客園主題之前，我們必須知道以下幾點：
   1.博客園后台有個"上傳文件"(開通博客可訪問)的功能，文件上傳默認的地址為http://files.cnblogs.com/files/DaisyWang，DaisyWang是自己的博客地址名。可以上傳一個圖片，然后在上傳文件列表里點擊文件名，就可以在新窗口顯示圖片url就是圖片的連接地址。
  2.博客園后台的"設置"按鈕（開通博客后才能訪問）提供頁面CSS代碼、公告欄、頁首、頁腳的代碼上傳功能，貼入相關代碼並保存，就可以看到自己主頁的變化。
  3.如果想要上傳js代碼需要發郵件給博客園[e-mail]申請js權限。
  4.可在自己的博客主頁用瀏覽器如chrome的審查代碼定位元素，可查看元素id、class、標簽名CSS樣式等信息，並可以臨時修改並顯示樣式。如圖
  通過以上幾點的介紹，相信大家對怎么改建博客主題有一定的想法了。
  下面開始改建博客：

一、選定基礎模版

  我們一般在已有的模版基礎上修改，這樣會方便很多，不過也可以完全自己定義樣式，如果覺得足夠可以替換原來主題提供的樣式了，則可以在設置頁面里禁用模板默認CSS。
  這里我選擇的是東東的elf,因為個人比較喜歡左邊的日期欄樣式。

二、禁用一些控件。

  如導航欄里的[博客園] [新隨筆] [聯系] [訂閱]禁用。進入后台的[選項]去掉相應勾選按鈕。如圖

  這樣導航欄里就只剩[首頁] [管理]。（方便之后與隨筆分類關聯）。
  至於去掉的[博客園]是鏈接到博客園網站首頁的，如果平時不怎么逛就不需要,需要時可以直接百度進入，因此我這里禁用掉了。
  [新隨筆]可以直接通過http://i.cnblogs.com訪問到后台（前提是要開通自己的博客並登錄）。
  聯系可以直接將個人聯系方式以html的形式放進公告欄,如圖
        。

三、開始修改樣式。

  1.新建一個"cnblog.css"文件用來保存修改樣式代碼。
  2.使用chrome上面所說功能定位元素，可以找到元素id、class、標簽名及CSS樣式。可以直接調試修改樣式，並可以直接預覽修改后樣式效果，將自己滿意的效果的相關代碼保存在"cnblog.css"當中。直到所有自己不滿意的地方修改完成。
  3.將"cnblog.css"當中的CSS代碼粘貼到后台"設置"(開通博客並登錄就可訪問)里的CSS代碼框里，並save，如圖

  我的修改包括：隱藏一些模塊、修改導航欄樣式、內容區域的寬度、字體、鏈接的樣式和顏色、隨筆內容取區域的行高等。我的CSS代碼如下：

/*字體*/
body {
    font: 14px/1.5 '微軟雅黑',tahoma,arial,sans-serif;
}
/*首部背景*/
#header {
    background: #000;
}
#mainContent {
    width: auto;
    float: none;
    margin-right: 270px;
    font-size: 16px;
}
/*隱藏博客標題欄*/
#blogTitle{
	display:none;
}
#navigator {
    width: 100%;
    height: 60px;
    line-height: 60px;
    overflow: hidden;
}
#navList a {
    height: auto;
    font-family: '微軟雅黑';
    font-weight: normal;
}
#navList a :hover{
    text-decoration:none;
}
#navList a:hover:after {
   display:none;
}
#navList a:link {
    color: #bbb;
}
#main {
    width: auto;
    position: relative;
    padding-left: 10px;
}
#mainContent {
    width: auto;
    float: none;
    margin-right: 270px;
    font-size: 16px;
}
#mainContent .forFlow {
    float: none;
    width: auto;
}
.day {
    padding: 5px 20px 10px 20px;
}
.dayTitle {
    height: 55px;
    top: 0;
    padding-top: 10px;
    text-shadow: none;
    font-size: 80%;
    text-align: center;
    font-weight: normal;
    width: 64px;
    color: #666;
    line-height: 1.5em;
    clear: both;
    position: absolute;
    left: -80px;
    background: #fff;
    border-radius: 7px 7px 7px 7px;
    box-shadow: 1px 1px 2px #a7a8ad;
    text-indent: 9px;
}
.postTitle a:link{
	color:#2EB1E8;
	text-decoration: none;
}
.postTitle{
	border-bottom:1px solid  #e0e0e0;
	font-weight:normal;
	font-size:18px;
	font-family:'微軟雅黑';
	line-height:40px;
	width:100%;
	clear:both;
}
.postCon {
    font-size: 16px;
}
.c_b_p_desc {
    line-height: 23px;
}
.postDesc {
    padding-bottom: 5px;
}
.day:after {
    left: -8px;
}
#sideBar {
    position: absolute;
    right: 10px;
    top: 0;
}
#topics .postTitle a {
    line-height: 35px;
    font-size: 18px;
    font-weight: normal;
    text-shadow: none;
}
#topics .postTitle a {
   color:#2EB1E8;
    font-family: '微軟雅黑';
}
/*隨筆行高*/
.postBody {
    font-size: 16px;
    line-height: 1.6em;
}
#cnblogs_post_body {
    line-height: 2!important;
}
#cnblogs_post_body p, .postBody p{
    line-height: 2!important;
}
/*改變鏈接的顏色和無下划線*/
#cnblogs_post_body a {
    text-decoration: none;
    color: blue;
}

  這里有參考豪情的博客主題樣式，因為個人比較喜歡，有些代碼直接從chrome里復制過來可能會有重復。
  4.刷新主頁就可以看到修改后的樣式效果。

四、設置導航欄logo並關聯到首頁鏈接和選項關聯到隨筆分類

  1.這部分要用到js代碼，因此先要發郵件[e-mail]給博客園申請js權限。
  2.將自己選定的logo圖片上傳到文件上傳，點擊圖片名，圖片會從新頁面打開，可以得到圖片的url,如圖

  3.新建"cnblog.js"文件，寫插入圖片並關聯到[首頁]鏈接js的代碼。

  $(document).ready(function(){
     //"MyLinks1_MyHomeLink"是定位到的導航欄里"首頁"選項的id
     var home = document.getElementById("MyLinks1_MyHomeLink");
     home.innerHTML = "<img id='mylogo'src='http://files.cnblogs.com/files/DaisyWang/lazydog.bmp' alt='home'>";
  });

  4.進入博客后台添加隨筆分類

  進入[編輯分類]添加分類標簽

  這樣，新隨筆發布的時候，可以勾選對應標簽，將其分類。（在此之前必須保證勾選了"隨筆分類"控件）

  5.在首頁可以看到側邊欄可以看到"隨筆分類"控件及對應隨筆的篇數，點擊對應分類標簽，頁面跳轉到對應分類頁面。復制其URL保存，並標明對應標簽名

  如點擊"CSS"標簽跳轉到的頁面url是http://www.cnblogs.com/DaisyWang/category/827272.html。
  6.編寫將對應標簽對應到導航欄選項的js代碼。

 var node = document.getElementById("navList");
        var childNode = node.getElementsByTagName('li');
        childNode[5].style.display = "none";//隱藏會后一個選項"管理"

        var li_js = document.createElement("li");
        li_js.innerHTML = "<a href='http://www.cnblogs.com/DaisyWang/category/827271.html' class = 'menu'>JavaScript</a>";
        node.appendChild(li_js);

    var li_cs = document.createElement("li");
        li_cs.innerHTML = "<a href='http://www.cnblogs.com/DaisyWang/category/827272.html' class = 'menu'>CSS</a>";
        node.appendChild(li_cs);

    var li_html = document.createElement("li");
        li_html.innerHTML = "<a href='http://www.cnblogs.com/DaisyWang/category/827297.html' class ='menu'>html</a>";
        node.appendChild(li_html);
//添加ul子節點li,裝自定義的對應標簽選項
    var li_jq = document.createElement("li");
        li_jq.innerHTML = "<a href='http://www.cnblogs.com/DaisyWang/category/827316.html' class ='menu'>jQuery</a>";
        node.appendChild(li_jq);

     var  li_ws = document.createElement("li");
       li_ws.innerHTML = "<a href='http://www.cnblogs.com/DaisyWang/category/827300.html' class ='menu'>WebStorm</a>";
       node.appendChild(li_ws);
       
   var  li_other = document.createElement("li");
       li_other.innerHTML = "<a href='http://www.cnblogs.com/DaisyWang/category/827282.html' class ='menu'>其他</a>";
       node.appendChild(li_other);

  可以根據自己標簽的不同和個數，寫對應js代碼
  7.將以上代碼加入之前的$(document).ready(function(){}函數類並存入"cnblog.js"文件。
  8.上傳js代碼。有兩種方式：直接將代碼包含在<script></script>標簽里復制粘貼到"后台——設置"的頁腳代碼框里，並save；上傳"cnblog.js"到文件上傳，獲取文件url，在頁腳代碼框里添加<script src="{url}"></script>。

六、公告欄添加聯系信息、人形時鍾、站點訪問統計插件

  在"后台——設置"的"博客側邊欄公告"里添加如下代碼：

//
<!--側邊欄公告欄-->
<!--站點訪問量統計-->
<a href="http://info.flagcounter.com/09YB">
<img src="http://s09.flagcounter.com/count2/09YB/bg_FFFFFF/txt_000000/border_CCCCCC/columns_2/maxflags_6/viewers_0/labels_0/pageviews_0/flags_0/percent_0/" alt="Flag Counter" border="0">
</a>
<!--人形時鍾-->
	 <div id="myTime">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="160" height="70" id="honehoneclock" align="middle">
		<param name="allowScriptAccess" value="always">
		<param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf">
		<param name="quality" value="high">
		<param name="bgcolor" value="#ffffff">
		<param name="wmode" value="transparent">
		<embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" bgcolor="#ffffff" width="160" height="70" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
	</object>
</div>
<!--聯系方式及個人信息-->
<p class="para">關於我：<strong>一個逗逼的文藝女青年~</strong></p>
<p class="para">聯系我：<a href="mailto:[e-mail]" title="email">[e-mail]</a></p>
<p class="para">博客：<a href="DaisyWang88.github.io" title="DaisyWang's blog" target="_blank">DaisyWang88.github.io</a></p>

博客主頁改建完成~改建后效果DaisyWang88。