twobin博客样式—“蓝白之风”
自暑假以来，囫囵吞枣一般蒙头栽入前端自学中，且不说是否窥探其道，却不自觉中提高了对网页版面设计的要求，乃至挑剔。一个设计清爽美观的网页能让读者心旷神怡，甚至没有了阅读疲劳；而一个设计粗劣嘈杂的网页实在让读者为之揪心难受，何谈长时间阅读，不仅苦了眼睛，倦了身体，更是伤了精神。
自暑假以来，囫囵吞枣一般蒙头栽入前端自学中，且不说是否窥探其道，却不自觉中提高了对网页版面设计的要求，乃至挑剔。一个设计清爽美观的网页能让读者心旷神怡，甚至没有了阅读疲劳；而一个设计粗劣嘈杂的网页实在让读者为之揪心难受，何谈长时间阅读，不仅苦了眼睛，倦了身体，更是伤了精神。
于博客园中开博撰文后，不时为众多设计精彩的博客主题而流连忘返，且不说博文质量如何，单看那设计用心，清新自然的博客，便对博主的审美感观频添几分赞许，自然要驻留些时候细细拜读博主的随文，因此风格样式对于博客就好似于地段门面对于酒楼一般，重要非凡，虽说酒香不怕巷子深，博文甚佳者自然可不必拘泥于小节，本文借以告诫劣酒藏深巷者：既已开博，请用心相待！
本人未曾研习半点设计知识，一大遗憾，却仍然对本博客用心相待，几分实力便呈现几分设计，同时也希望能够提高读者的阅读感受，便为博客自定义一套风格样式，自己毫无设计功底，故不敢大肆宣谈用户体验，有班门弄斧之嫌。每每有博友望借鉴几分这“蓝白样式”，如今便呈了这份心意，样式开源并撰文记之。
初始化模板
选择官方模板“LessIsMore”作为本博客样式的初始化模板，由于LessIsMore模板框架简洁自然，可以更为灵活的对其进行自定义重载。该模版框架大致为简单的两栏布局，顶部为博客名称与个性签名，签名下方是博客导航栏，主面板分为左右两栏，左边栏为导航索引栏，右边栏为博文标题、摘要的内容区域，底部为博客页脚。
通过CSS定制页面风格
通过自定义CSS代码便可定制专属的页面风格，在博客中“管理”-“设置”-“通过CSS定制页面风格”的输入框中，输入自定义的CSS代码，同时勾选下方“禁用模板默认CSS”选项，则博客即会启用定制的页面风格。
顾名思义，下方的三个输入框：“博客侧边栏公告”、“页首HTML代码”、“页脚HTML代码”，即将相应的HTML代码输入各自框中，博客便可通过代码对特定部分进行框架改造。
如果单薄的HTML/CSS设计代码无法令你尽兴，那么建议：书写邮件一封向博客园管理员申请添加JavaScript代码权限，便可酣畅淋漓的为自己的博客增添交互行为了。
本博客整体风格为蓝白相间式，白色为底，蓝色浮之上，显得简洁自然，交互时由蓝色转为橙色，醒目专注却不突兀，在于提醒用户的操作。本人也是甚喜简单之风，故无奢华之范，简约而不简单。
博客头部
将博客头部定制为：凸显博客名称，弱化博客签名。签名可时刻改动，而博客名称却如品牌一般不轻易大删大改，因此凸显博客名称既表明了博客名称的重要性与稳固性，同时也希望读者能够对博客名称印象深刻，从而提升博客知名度，至少混个脸熟！
通过javascript在博客顶部创建头部框架：
<script type="text/javascript" >
/*博客头部*/
$("body").html('<div class="head clearfix"><h1><a href="http://www.cnblogs.com/twobin/">twobin’<span id="blog">blog</span></a></h1><span id="subtitle">努力学习前端技术 | 其实技术也可以是通俗易懂的！</span></div>');
</script>
利用CSS为博客头部定制样式：
.head{
height: 60px;
line-height:60px;
padding-left:200px;
box-shadow: 0 2px 2px rgba(0,0,0,0.2);
background: #fff;
}
.head h1{
float:left;
width:200px;
height: 60px;
font-weight:bold;
font-size:26px;
background-color: #1f7b9b;
text-align: center;
}
.head h1:hover {
float:left;
width:200px;
height: 60px;
font-weight:bold;
font-size:26px;
background-color: #ff7227;
text-align: center;
}
.head h1 a{
color: #fff;
outline:none;
-moz-outline:none;
text-decoration:none;
}
#blog{
font-weight:normal;
font-size:16px;
color: #fff;
}
#subtitle{
display:block;
float:right;
font-size:18px;
color:#999;
line-height:18px;
margin:20px 200px 0 0;
}
博客导航栏
将博客导航条单独成栏，一方面是凸显导航栏的重要性，方便自身以及读者操作，另一方面也是使得整个博客页面更为饱满，而不只是单独的两栏设计。
通过CSS为博客导航栏定制样式：
#header {
display: block;
}
/*导航栏*/
#navigator {
font-size:16px;
height:48px;
background:#fff;
text-align:center;
margin-top:20px;
border-radius: 4px;
box-shadow: 0px 0px 10px #1f7b9b;
border: 1px solid #1f7b9b;
}
#navList li {
margin:0;
line-height:48px;
display:inline-block;
float:left;
}
#navList li:hover {
background:#1f7b9b;
}
#navList li a {
padding:0 30px;
text-decoration:none;
line-height:48px;
border:0;
color:#1f7b9b;
font-weight:bold;
display:-moz-inline-box;
display:inline-block;
}
#navList li a:hover {
padding:0 30px;
text-decoration:none;
line-height:48px;
border:0;
color:#fff;
font-weight:bold;
display:-moz-inline-box;
display:inline-block;
}
.blogStats {
height:48px;
color:#1f7b9b;
line-height:48px;
}
博客左侧边栏
左侧边栏包含：公告、访客记录、相片、微博、个人简要信息、日历、随笔分类、随笔归档、关注前端博客、积分排名、最新评论、阅读排行、评论排行、推荐排行。
其中较为重要的部分，访客记录：可以清晰的查看博客目前的访问数、是了解博客热度的一大利器；微博：挂载微博挂件，不仅充实博客的个人信息，而且在一定程度上可以提升微博的粉丝数与关注度；关注前端博客：可以使读者了解博主的关注对象与关注内容，同时也便于自身查看所关注的博客。
通过CSS为博客左侧边栏定制样式：
#main {
margin: 30px 0 15px 0;
padding: 0;
}
/*左边栏*/
#sideBar {
background: #fff;
width: 205px;
padding: 25px 15px;
font-size: 12px;
border-radius: 4px;
box-shadow: 0px 0px 10px #1f7b9b;
border: 1px solid #1f7b9b;
}
#sideBarMain {
line-height:24px;
}
/*公告*/
#profile_block {
margin-top:0px;
line-height:24px;
text-align:left;
}
.newsItem .catListTitle {
display: none;
}
.mySearch .catListTitle{
display: none;
}
博客右侧内容栏
右侧内容栏里一个页面包含10篇文章，每篇文章主要包含：文章标题、文章摘要、右侧小图片、以及文章发布信息、阅读评论数等。
一个页面中所包含的文章数，如果小于10篇，则显得页面文章数过少，内容单调，且右侧栏高度明显小于左侧栏，从而出现大部分留白，降低视觉效果；如果多于10篇，则会显得单页冗长，提高阅读疲劳，因此单页中设置为包含10篇文章为佳。
通过CSS为博客右侧内容栏定制样式：
/*主面板*/
#mainContent {
margin-top:0px;
padding: 25px 15px;
background:#fff;
float:right;
width:920px;
border-radius: 4px;
box-shadow: 0px 0px 10px #1f7b9b;
border: 1px solid #1f7b9b;
}
/*每日文章列表*/
.day {
background:#fff;
padding:0;
margin:0 0 20px 0;
}
/*博客标题*/
.postTitle a {
color:#1f7b9b;
}
.postTitle a:hover {
color: #ff7227;
text-decoration: underline;
}
.postTitle {
padding-bottom:10px;
font-size:20px;
font-weight:bold;
color:#1f7b9b;
background:url('http://images.cnblogs.com/cnblogs_com/twobin/520730/o_br229512.link(en-us,MSDN.10).gif') no-repeat 0 3px;
padding-left:30px;
}
.dayTitle {
display:none;
}
/*摘要*/
.c_b_p_desc {
padding:10px;
line-height:24px;
color:#888;
}
.c_b_p_desc a {
color:#1f7b9b;
}
.c_b_p_desc a:hover {
text-decoration:none;
color:#ff7227;
border-bottom-width:1px;
border-bottom-style:dotted;
}
.c_b_p_desc_readmore {
margin-left: 20px;
}
.desc_img {
margin-left:10px;
border:solid 1px #fff;
box-shadow:0 0 10px #aaa;
}
博客底部
由于很少有读者会去关心博客底部的内容，因此也不用在此部分大费周章，简单设置个人博客版权信息或博客名称即可。
通过CSS为博客底部定制样式：
/*尾部*/
#footer {
height:24px;
line-height: 24px;
text-align:center;
color:#1f7b9b;
font-size:16px;
}
博文内容页
一篇完整且有着良好排版的博文可能会包含元素：文章标题、段落标题、正文、注意事项、图片、代码、链接、表格、插件等，需要为每个元素定制样式，方可使得整篇博文在排版上令人赏心悦目，流连忘返。
其中，<h1>、<h2>、<h3>分别表示文章段落的一、二、三级标题，并以不同的背景颜色以及字体大小加以区分，注意事项通过黄色背景凸显，以起到提醒读者的作用，至于图片、代码、表格等样式设计就不加以赘述了。
通过CSS为博客内容页定制样式：
.Abstract
{
padding: 15px;
border: dotted 2px #999;
color: #999;
font-family: 'Microsoft Yahei';
border-radius: 4px;
}
.First
{
margin: 10px 0;
font-family: 'Microsoft Yahei';
text-align: left;
padding: 6px 20px;
color: #fff;
background: #1f7b9b;
font-size: 20px;
border-radius: 4px;
clear: both;
}
.Second
{
margin: 10px 0;
font-family: 'Microsoft Yahei';
padding: 6px 20px;
background: #2ca8d3;
color: #fff;
font-size: 18px;
border-radius: 4px;
clear: both;
}
.Third
{
margin: 10px 0;
padding: 6px 20px;
font-family: 'Microsoft Yahei';
margin: 15px 0;
font-size: 16px;
color: fff;
background: #32c0f1;
color: #999;
border-radius: 4px;
clear: both;
}
.note
{
margin: 10px 0;
padding: 15px 40px 15px 40px;
background: #FCFAA9;
font-size: 15px;
font-family: 'Microsoft Yahei';
box-shadow: 0 0 8px #aaa;
clear: both;
}
.demo
{
text-align: left;
padding: 6px 20px;
overflow: auto;
border-radius: 4px;
background: orange;
color: #fff;
font-size: 16px;
clear: both;
}
.cnblogs_Highlighter
{
border: solid 1px #ccc;
clear: both;
}
.cnblogs_code
{
background: #EFFFF4;
border: solid 0px #939393;
font-size: 14px;
clear: both;
padding: 10px 20px;
}
.cnblogs_code pre
{
font-size: 14px;
}
.cnblogs_code span
{
font-family: Courier New;
font-size: 14px;
}
评论区域/绿色通道/推荐
绿色通道主要包含：好文要顶、关注我、收藏该文、与我联系、分享至新浪微博、推荐一下，将读者阅读博文时的一些操作进行集成，提高读者操作的便捷性。
评论区域进行重新定制，以块状面板进行呈现，使得评论一目了然，便于博主与读者阅读。
通过CSS为博客评论区域/绿色通道定制样式：
/*评论按钮*/
#btn_comment_submit {
border:none;
height:48px;
width:120px;
}
.comment_btn {
font-family:'Microsoft Yahei';
border-radius: 3px 3px 3px 3px;
height:48px;
width:120px;
font-size:18px;
cursor:pointer;
position:relative;
vertical-align:middle;
display:inline-block;
background:#1f7b9b;
color:#fff;
}
#btn_comment_submit:hover {
background:#ff7227;
}
/*评论标题*/
.feedback_area_title {
padding:10px;
font-size:24px;
font-weight:bold;
color:#1f7b9b;
border-bottom:solid 6px #1f7b9b;
}
.feedbackListSubtitle {
font-size:12px;
color:#888;
}
.feedbackListSubtitle a {
color:#888;
}
.comment_quote {
background:#FCFAAC;
padding:15px;
border:1px solid #CCC;
}
#commentform_title {
color:#1f7b9b;
background-image:none;
background-repeat:no-repeat;
margin-bottom:10px;
padding:10px 20px 10px 10px;
font-size:24px;
font-weight:bold;
border-bottom:solid 6px #1f7b9b;
}
/*评论框*/
#comment_form {
margin:10px 0;
padding:0;
}
.commentform {
margin:10px 0;
padding:10px 20px;
background:#fff;
}
/*评论输入域*/
#tbCommentBody {
font-family:'MIcrosoft Yahei';
margin-top:10px;
width:900px;
max-width:900px;
min-width:900px;
background:white;
color:#333;
border:2px solid #fff;
box-shadow:inset 0 0 8px #aaa;
padding:10px;
height:120px;
font-size:14px;
min-height:120px;
}
/*评论条目*/
.feedbackItem {
font-size:14px;
line-height:24px;
margin:10px 0;
padding:20px;
background:#F2F2F2;
box-shadow:0 0 5px #aaa;
}
.feedbackListSubtitle {
font-weight:normal;
}
/*顶一下*/
.diggnum {
font-size:28px;
color:#1f7b9b;
font-family:'Microsoft Yahei';
}
#div_digg .diggnum {
line-height:100px;
}
.diggit {
float:left;
width:128px;
height:128px;
background:url('//images0.cnblogs.com/blog/479892/201311/09133514-36eb19831f014a7ea6de13bc99e1d8ed.gif') no-repeat;
background-position:0 0;
text-align:center;
cursor:pointer;
}
.diggit:hover {
background-position:-128px 0;
}
/*隐藏踩一下*/
.buryit {
display:none;
}
.diggword {
display:none;
}
/*绿色通道*/
#green_channel {
text:align:right;
background:#1f7b9b;
padding-left:20px;
font-weight:normal;
font-size:15px;
width:880px;
border:none;
color:#fff;
padding:20px;
border-radius:4px;
}
/*最新评论*/
#myposts .PostList {
font-size:14px;
line-height:24px;
margin:10px 0;
padding:20px;
background:#F2F2F2;
box-shadow:0 0 5px #aaa;
}
#myposts .postTitl2 a {
color:#6DA47D;
}
/*清除浮动*/
.clear {
clear: both;
}
/*屏蔽广告*/
.c_ad_block {
display: none!important;
}
交互动作/插件
博客中利用JavaScript添加了一些交互动作和插件，用于提高博客的交互性，且有利于博主宣传、管理本博客。
交互动作：回到顶部交互，便于读者快速回至博客顶部，提高操作便捷性。
插件：新浪微博挂件、王子墨天气插件、百度分享插件、gostats统计插件、JSFiddle插件。
其中，新浪微博挂件：可在一定程度上提升微博的粉丝数与关注度，同时也可通过微博宣传博客，达到相互宣传的作用；王子墨天气插件：一款非常棒的基于jQuery的天气插件，简洁、美观、动态，在此推荐下，算是为其打打小广告；百度分享插件：可快速将博文分享至QQ空间、微博、人人、贴吧、豆瓣等知名社交空间，可以提升博文的流传度与阅读数；gostats统计插件：用于图片数字实时统计博客的访问数，且每周发送一封邮件描述本周博客详细的统计信息，轻便、美观，推荐之；JSFiddle插件：大力推荐！用过都说好！JSFiddle是一款在线前端编辑器，可以分屏同时编辑HTML/CSS/JS代码，能够实时同屏查看效果，最牛之处在于可通过URL链接分享至各个博文页面，并在页面中显示运行效果与源码，强大的难以名状。
后续计划
博客风格样式的设计并不会就此止步，无论设计多么精巧的样式都会有审美疲劳的一天，计划平均3-4个月重构一次博客样式，以保持博客样式的新鲜活力。
计划：设计流式或响应式博客，以适应不同屏的阅读习惯，特别是提高手机上阅读博客的体验。
花费大量篇幅赘述博客样式重构其实并非本文的重点核心，唯一精髓尔：用心改善博客，提高阅读质量！望各博主与读者能够亲身实践，善待自己的博客，罢了。
