本博客適用於那些對於有些強迫症重症患者,如我,或者對審美有較高追求的人。
如果對於博客園提供的主題模版均不是很滿意可以自己手動調控,比如可以隨意更改自己喜歡的樣式,更改格局,公告欄添加個人額外信息、訪問統計插件,導航欄設置自己想要的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>