博客园强迫癌晚期者的福音——自定义博客园主题
本博客适用于那些对于有些强迫症重症患者，如我，或者对审美有较高追求的人。
如果对于博客园提供的主题模版均不是很满意可以自己手动调控，比如可以随意更改自己喜欢的样式，更改格局，公告栏添加个人额外信息、访问统计插件，导航栏设置自己想要的logo、将选项和随笔分类链接关联，也可以自定义导航栏选项的相关链接地址。如我的博客DaisyWang88。
改建博客园主题之前，我们必须知道以下几点：
1.博客园后台有个"上传文件"(开通博客可访问)的功能，文件上传默认的地址为https://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='https://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>
