博客美化小结

今天决定将自己的博客美化下，看到 twobin 的博客的博文： twobin博客样式—“蓝白之风” 感觉非常好看，于是决定仿照他的方案进行修改，过程记录如下：

步骤一：进入博客→管理→设置

找到 "博客模板" 选择模板 LessIsMore 作为博客的初始模板

步骤二：取消禁用默认CSS项

步骤三：找到 "页首HTML代码" 添加代码如下，当然把代码中和自己博客相关的地址和用语替换掉。

<script type="text/javascript" >
/*博客头部*/
$("body").html('<div class="head clearfix"><h1><a href="http://www.cnblogs.com/xm_cpppp/">MarkLi’<span id="blog">blog</span></a></h1><span id="subtitle"> 学不止步　|  技术我们做朋友吧！　</span></div>');
</script>

步骤四：找到 "页面定制CSS" 根据 twobin博客样式—“蓝白之风” 中介绍的CSS代码发现大体框架的样式有了，但是有很多细节没有达到效果，经过调试和修改，最终样式如下

* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
border-bottom: 4px solid #1F7B9B;
font-size: 15px;
padding: 0;
margin: 0;
font-family: "微软雅黑","宋体",Arial;
background: #D8D8D8;
min-width: 1200px;
}

a {
color: #1F7B9B;
text-decoration: none;
}
a:visited, a:hover {
color: #FF7227;
text-decoration: underline;
}
h3 {
background-color: #1F7B9B;
color: white;
padding: 10px 10px;
margin: 10px 0px;
font-size: 16px;
font-weight: bold;
text-align: center;
}

#home {
opacity: 0.95;
filter: alpha(opacity=95);
margin: 15px auto;
width: 1200px;
overflow: auto;
}


.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;
}




#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;
}
.forFlow {
margin: 0 16px 0 16px;
}
/*公告*/
#profile_block {
    margin-top:0px;
    line-height:24px;
    text-align:left;
}
.newsItem .catListTitle {
    display: none;
}
.mySearch .catListTitle{
    display: none;
}




#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;
}













/*主面板*/
#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;
}





/*尾部*/
#footer {   
    height:24px;
    line-height: 24px;
    text-align:center;  
    color:#1f7b9b;
    font-size:16px;
}


/* 附加 */
.postDesc {
margin: 0 30px;
margin-bottom: 2px;
padding: 8px 0px;
font-size: 12px;
color: #AAA;
background: white;
text-align: right;
}
#green_channel {
text: align:right;
background: #1F7B9B;
padding-left: 20px;
font-weight: normal;
font-size: 15px;
width: 880px;
border: none;
color: white;
padding: 20px;
border-radius: 4px;
}

.feedbackItem {
font-size: 14px;
line-height: 24px;
margin: 10px 0;
padding: 20px;
background: #F2F2F2;
box-shadow: 0 0 5px #AAA;
}

View Code

步骤五：保存设置，打开你的的博客看看效果吧(*^__^*) 嘻嘻……

后续1：让你的博文标题好看不止一点！（2014-02-23）

今天看到别人的博文，突然眼前一亮，一看那标题怎么看的那么舒服！有图为证。于是心里萌生了将这个效果加到自己博客的想法，并将步骤记录下来以供大家参考

步骤一：使用chrome强大的F12查看其css样式：

步骤二：果然不出所料，这个样式可以拿来直接用的（拿来主义还是可以有的- -）

于是将代码添加到自己博客园的样式，正式前面提到的“页首HTML代码”这个选项里。

步骤三：了解css的人一看就知道这个样式是针对 h1 标题的，我想一般写博客的时候用到最多的是2及标题结构，即一个最大的题目，然后内容要点一一列出，所以果断复制粘贴然后把 h1 改成 h2 ，下面是我加入的css代码：

/*博文中的标题css*/
#cnblogs_post_body h1 {
background: #2B6695;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: white;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 17px;
font-weight: bold;
height: 25px;
line-height: 25px;
margin: 15px 0 !important;
padding: 5px 0 5px 20px;
text-shadow: 2px 2px 3px #222;
}
#cnblogs_post_body h2 {
background: #2B6695;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: white;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 16px;
font-weight: bold;
height: 20px;
line-height: 20px;
margin: 15px 0 !important;
padding: 5px 0 5px 20px;
text-shadow: 2px 2px 3px #222;
}

View Code

步骤三：保存设置，大功告成！赶紧试着新建了个随笔看看效果,我kao，果然好看,大家还不赶紧试试~