Make Blog Beautiful

想做一个文艺而专业的编程技术博客 :)

博客定位

编程大观园，正如其名，探索和汇萃各种编程思想、技术、技能、技巧，并融入自己对编程开发、产品研发的思考和探索。

分类与标签

好的博客分类能让访客迅速找到自己感兴趣的内容。

分类主要有两种形式：主题式分类和标签式分类。主题式分类是纵向的，重量级的，有用且感兴趣的、围绕对博客的定位而形成的博文宏观结构；标签式分类是横向的，轻量级的，灵活的，围绕博文所涉及的点而铺开。比如“编程技术、编程语言”可以作为一个主题大类，而相关的博文有含代码和观点论述的；那么“程序”就可以作为一个标签。标签的选择通常是“两字，常用，细化”为佳。

好的主题分类能让博客一目了然，好的标签则是对博文的很好的索引。

页面布局

页面布局主要是横向导航，侧边栏导航。侧边栏究竟放在左边还是右边呢？如果想直接浏览和专注于内容，内容放在左边似乎更符合习惯；不过也没有绝对的论断。重点是突出博文内容。比如 BOOK 的模板就做得更好，将内容以书页的形式展示出来，很令人舒适，只是侧边栏做得太 plain 了，因而没有采用。

页面美化

首先，依个人喜好选定一个模板，比如我选择的夏日芝兰，比较文艺而且清新简洁；

接着，可以在其基础上进行页面美化。美化只需要基本的CSS知识，通常是字体、边框、颜色、对齐、间距， Plus 一点点设计的知识。如果是Chrome 浏览器，右键选择“审查元素”，查看源代码，找到对应的元素进行样式调整，OK后记录下来；这样会形成一个文档，复制到 “博客后台管理-设置-页面CSS” 的文本区域即可。

定制CSS：

#blogTitle h2 {
  margin-left: 49px;
  margin-top: 5px;
  font-family: 华文行楷;
  font-size: 16px;
}

#navigator {
  margin-top: 16px;
  font-size: 15px;
}

.dayTitle {
  display:none;
}

#sideBar {
  padding: 0px 10px 10px 15px;
  border-top: 3px outset #FAF7EF;
  border-left: 3px outset #FAF7EF;
  bborder-bottom: 3px outset #FAF7EF;
  margin: 0 0 0 10px;
  border-radius: 10px;
}

#blog-news,#calendar,#sidebar_search,#sidebar_toptags, 
.catListPostCategory, #sidebar_categories.catListPostArchive 
.catListImageCategory, #recent_comments_wrap, #sidebar_topviewedposts 
#sidebar_topcommentedposts, topfeedback_posts_wrap, #sidebar_topdiggedposts{
  margin: 0 5px 5px 0;
}

.day,.entrylist {
  padding: 20px 10px 0 15px;
  border: 3px solid #FAF7EF;
  margin: 0 0 0 -10px;
  border-radius: 10px;
}

.catListTitle {
  margin: 15px 0 5px 0;
  text-align:left;
}

#post_detail, #comment_form, #comment_form_container, #blog-comments-placeholder, #under_post_kb, #under_post_news, #HistoryToday {
  padding: 15px;
  margin-left: -10px;
}

#post_detail, #comment_form {
   border: 3px outset #FAF7EF; 
   border-radius: 15px;
}

#post_detail {
   background-color: #F6EAFC;
}

#under_post_news, #under_post_kb, #HistoryToday {
}

.entrylistDescription {
  margin-bottom: 20px;
  padding-right: 0px;
}

.entrylistPosttitle {
  border-bottom: none;
}

.entrylistTitle, .PostListTitle, .thumbTitle {
  border-bottom: 1px dotted #6466b3;
}

#Header1_HeaderTitle {
  font-family: 隶书;
  font-size: 32pt;
  margin: 5px 0 30px 0;
}

#ad_t2, #likecs_c1, #likecs_c2 {
  display:none;
}

#HistoryToday .c_ad_block {
  display:none;
}

#under_post_news #under_post_kb, #HistoryToday {
    margin-bottom: 50px;
}

#under_post_news b, #under_post_kb b, #HistoryToday b {
   font-size: 14px;
   margin-bottom: 30px;
}

#under_post_news a, #under_post_kb a, #HistoryToday a {
   font-size: 13px;
   line-height:24px;
}

#under_post_news a:hover, #under_post_kb a:hover, #HistoryToday a:hover {
   color: red;
}

pre {
   margin-left: 25px;
   margin-right: 30px;
}

/* Markdown CSS */

.cnblogs-markdown {
  font-size:13px;
  font-family: 微软雅黑，宋体；
}

.cnblogs-markdown h2,h3 {
　margin-top: 20px;　
}

.cnblogs-markdown p,h4,h5,h6 {
  text-indent:2em!important;
}

.cnblogs-markdown li p {
  text-indent:0em!important;
}
.cnblogs-markdown li {
   margin-left: 45px;
   line-height: 15px; 
}

.cnblogs-markdown a:link { 
  text-decoration: none; 
}
.cnblogs-markdown a:hover {
  color: #DF3A01;
  font-size: 14px; 
  text-decoration: none;
}

.cnblogs-markdown blockquote, code {
   margin: 40px 25px 40px 25px;
   border-radius: 10px;
}

code.language-java {
  border-radius: 15px;
  background-color: #483D8B;
  font-color: #F8F8FF;
}

p img {
    width: 600px;  
    height: 600px;  
    border-radius: 10px;
    margin: 15px 20px 15px 0px;
}

#mycopyright {
   margin: 40px 5px 30px 0px;
}

.cnblogs-markdown #nav {
   margin-bottom: 30px;
}

p {
   margin: 20px 60px 20px 10px; 
}

ol {
   padding: 0px 0px 0px 20px;
}

video {
    margin: 20px 60px 20px 30px; 
    height: 480px;
}

#likecs_post_body ul {
    margin-left: 5px;
}

#likecs_post_body ol {
    margin-left: 5px;
    padding-left: 5px;
}

View Code