博客美化之“黑白风”

最近看到了博主 twobin 的一篇美化博客的文章，看完之后手心直痒痒，也想动手对自己的博客开开刀。说干就干...

下面是手术时间。

准备工作

看完博文了解到要对头部、导航栏、左侧边栏、右侧博文列表、底部、博文内容部分及博文评论进行开刀。有了先前的博文做对照，简单多了。

初始化模板

选择博客园中的一个模板作为初始化模板，步骤：进入我的博客-->管理-->设置-->博客模板，在下拉框中找到“LessIsMore”并选择，如下图所示：

博客美化之“黑白风”

点击保存，接下来的所有步骤都在这个设置页进行。

优化头部

将模板的头部替换成自己编写的html。

在“页首Html代码”框中输入如下代码，请将代码中的信息改成自己的。

<script type="text/javascript" >
/*博客头部*/
$("body").html('<div class="head clearfix"><h1><a href="http://www.cnblogs.com/jaday/">jaday</a></h1><span >);
</script>

步骤如下图所示：

博客美化之“黑白风”

在“通过CSS代码定制代码页面风格”框中输入css样式，代码如下

 1 .head {
 2             height: 60px;
 3             line-height: 60px;
 4             padding-left: 200px;
 5             box-shadow: 0 2px 2px rgba(0,0,0,0.2);
 6             background: #232323;
 7         }
 8 
 9             .head h1 {
10                 float: left;
11                 height: 60px;
12                 font-weight: bold;
13                 font-size: 26px;
14                 text-align: center;
15             }
16 
17                 .head h1 a {
18                     background-color: #007ACC;
19                     border-radius: 3px;
20                     color: #fff;
21                     padding: 5px 15px;
22                 }
23 
24         #subtitle {
25             color: #fff;
26             font-size: 18px;
27             line-height: 60px;
28             margin-left: 50px;
29         }
30 
31         #header {
32             display: block;
33         }

View Code