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


  本博客適用於那些對於有些強迫症重症患者,如我,或者對審美有較高追求的人。
  如果對於博客園提供的主題模版均不是很滿意可以自己手動調控,比如可以隨意更改自己喜歡的樣式,更改格局,公告欄添加個人額外信息、訪問統計插件,導航欄設置自己想要的logo、將選項和隨筆分類鏈接關聯,也可以自定義導航欄選項的相關鏈接地址。如我的博客DaisyWang88
  改建博客園主題之前,我們必須知道以下幾點:
   1.博客園后台有個"上傳文件"(開通博客可訪問)的功能,文件上傳默認的地址為http://files.cnblogs.com/files/DaisyWang,DaisyWang是自己的博客地址名。可以上傳一個圖片,然后在上傳文件列表里點擊文件名,就可以在新窗口顯示圖片url就是圖片的連接地址。
  2.博客園后台的"設置"按鈕(開通博客后才能訪問)提供頁面CSS代碼、公告欄、頁首、頁腳的代碼上傳功能,貼入相關代碼並保存,就可以看到自己主頁的變化。
  3.如果想要上傳js代碼需要發郵件給博客園contact@cnblogs.com申請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代碼,因此先要發郵件contact@cnblogs.com給博客園申請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:1126484584@qq.com" title="email">1126484584@qq.com</a></p>
<p class="para">博客:<a href="DaisyWang88.github.io" title="DaisyWang's blog" target="_blank">DaisyWang88.github.io</a></p>

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM