twobin博客样式—“蓝白之风”

 

自暑假以来，囫囵吞枣一般蒙头栽入前端自学中，且不说是否窥探其道，却不自觉中提高了对网页版面设计的要求，乃至挑剔。一个设计清爽美观的网页能让读者心旷神怡，甚至没有了阅读疲劳；而一个设计粗劣嘈杂的网页实在让读者为之揪心难受，何谈长时间阅读，不仅苦了眼睛，倦了身体，更是伤了精神。

于博客园中开博撰文后，不时为众多设计精彩的博客主题而流连忘返，且不说博文质量如何，单看那设计用心，清新自然的博客，便对博主的审美感观频添几分赞许，自然要驻留些时候细细拜读博主的随文，因此风格样式对于博客就好似于地段门面对于酒楼一般，重要非凡，虽说酒香不怕巷子深，博文甚佳者自然可不必拘泥于小节，本文借以告诫劣酒藏深巷者：既已开博，请用心相待！

本人未曾研习半点设计知识，一大遗憾，却仍然对本博客用心相待，几分实力便呈现几分设计，同时也希望能够提高读者的阅读感受，便为博客自定义一套风格样式，自己毫无设计功底，故不敢大肆宣谈用户体验，有班门弄斧之嫌。每每有博友望借鉴几分这“蓝白样式”，如今便呈了这份心意，样式开源并撰文记之。

初始化模板

选择官方模板“LessIsMore”作为本博客样式的初始化模板，由于LessIsMore模板框架简洁自然，可以更为灵活的对其进行自定义重载。该模版框架大致为简单的两栏布局，顶部为博客名称与个性签名，签名下方是博客导航栏，主面板分为左右两栏，左边栏为导航索引栏，右边栏为博文标题、摘要的内容区域，底部为博客页脚。

通过CSS定制页面风格

通过自定义CSS代码便可定制专属的页面风格，在博客中“管理”-“设置”-“通过CSS定制页面风格”的输入框中，输入自定义的CSS代码，同时勾选下方“禁用模板默认CSS”选项，则博客即会启用定制的页面风格。

顾名思义，下方的三个输入框：“博客侧边栏公告”、“页首HTML代码”、“页脚HTML代码”，即将相应的HTML代码输入各自框中，博客便可通过代码对特定部分进行框架改造。

如果单薄的HTML/CSS设计代码无法令你尽兴，那么建议：书写邮件一封向博客园管理员申请添加JavaScript代码权限，便可酣畅淋漓的为自己的博客增添交互行为了。

本博客整体风格为蓝白相间式，白色为底，蓝色浮之上，显得简洁自然，交互时由蓝色转为橙色，醒目专注却不突兀，在于提醒用户的操作。本人也是甚喜简单之风，故无奢华之范，简约而不简单。

博客头部

将博客头部定制为：凸显博客名称，弱化博客签名。签名可时刻改动，而博客名称却如品牌一般不轻易大删大改，因此凸显博客名称既表明了博客名称的重要性与稳固性，同时也希望读者能够对博客名称印象深刻，从而提升博客知名度，至少混个脸熟！

通过javascript在博客顶部创建头部框架：

利用CSS为博客头部定制样式：

博客导航栏

将博客导航条单独成栏，一方面是凸显导航栏的重要性，方便自身以及读者操作，另一方面也是使得整个博客页面更为饱满，而不只是单独的两栏设计。

通过CSS为博客导航栏定制样式：

博客左侧边栏

左侧边栏包含：公告、访客记录、相片、微博、个人简要信息、日历、随笔分类、随笔归档、关注前端博客、积分排名、最新评论、阅读排行、评论排行、推荐排行。

其中较为重要的部分，访客记录：可以清晰的查看博客目前的访问数、是了解博客热度的一大利器；微博：挂载微博挂件，不仅充实博客的个人信息，而且在一定程度上可以提升微博的粉丝数与关注度；关注前端博客：可以使读者了解博主的关注对象与关注内容，同时也便于自身查看所关注的博客。

通过CSS为博客导航栏定制样式：

博客右侧内容栏

右侧内容栏里一个页面包含10篇文章，每篇文章主要包含：文章标题、文章摘要、右侧小图片、以及文章发布信息、阅读评论数等。

一个页面中所包含的文章数，如果小于10篇，则显得页面文章数过少，内容单调，且右侧栏高度明显小于左侧栏，从而出现大部分留白，降低视觉效果；如果多于10篇，则会显得单页冗长，提高阅读疲劳，因此单页中设置为包含10篇文章为佳。

通过CSS为博客导航栏定制样式：

博客底部

由于很少有读者会去关心博客底部的内容，因此也不用在此部分大费周章，简单设置个人博客版权信息或博客名称即可。

通过CSS为博客导航栏定制样式：

博文内容页

一篇完整且有着良好排版的博文可能会包含元素：文章标题、段落标题、正文、注意事项、图片、代码、链接、表格、插件等，需要为每个元素定制样式，方可使得整篇博文在排版上令人赏心悦目，流连忘返。

其中，<h1>、<h2>、<h3>分别表示文章段落的一、二、三级标题，并以不同的背景颜色以及字体大小加以区分，注意事项通过黄色背景凸显，以起到提醒读者的作用，至于图片、代码、表格等样式设计就不加以赘述了。

通过CSS为博客导航栏定制样式：

评论区域/绿色通道/推荐

绿色通道主要包含：好文要顶、关注我、收藏该文、与我联系、分享至新浪微博、推荐一下，将读者阅读博文时的一些操作进行集成，提高读者操作的便捷性。

评论区域进行重新定制，以块状面板进行呈现，使得评论一目了然，便于博主与读者阅读。

通过CSS为博客导航栏定制样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
/*评论按钮*/
#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-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个月重构一次博客样式，以保持博客样式的新鲜活力。

计划：设计流式或响应式博客，以适应不同屏的阅读习惯，特别是提高手机上阅读博客的体验。

花费大量篇幅赘述博客样式重构其实并非本文的重点核心，唯一精髓尔：用心改善博客，提高阅读质量！望各博主与读者能够亲身实践，善待自己的博客，罢了。

 
 
分类: 前端技术

twobin博客样式的更多相关文章

  1. twobin博客样式—“蓝白之风”

    自暑假以来,囫囵吞枣一般蒙头栽入前端自学中,且不说是否窥探其道,却不自觉中提高了对网页版面设计的要求,乃至挑剔.一个设计清爽美观的网页能让读者心旷神怡,甚至没有了阅读疲劳:而一个设计粗劣嘈杂的网页实在 ...

  2. Vno博客样式分享

    不知不觉有一年多没有更新博客了,还是几位园友因为喜欢这套博客样式发了消息,否则我都快忘记自己还有一个博客了,哈哈. 言归正传,这套博客样式是当时闲来无事copy的iOS界喵神的博客Vno,确实很漂亮, ...

  3. 【转】CnBlogs自定义博客样式

    文章有一个好的排版,将能够增加阅读者对其内容的兴趣. 本文总结了如何美化博客园中文章的部分显示样式. 1.美化文章标题的显示样式 2.增添LaTex数学公式的显示 3.目录索引的显示 4.添加文章末尾 ...

  4. CnBlogs自定义博客样式

    弄了半个晚上的时间,总算马马虎虎搞好了博客的样式. 整个博客是蓝色的基调,比较激情,我喜欢. 比较郁闷的是,rightmenu 和 main都是position:absolute 布局的.要添加一个f ...

  5. Django博客开发-数据建模与样式设定

    开发流程介绍 之前Django的学习过程当中已经把基本Django开发学完了,现在以Django 的博客项目完成一遍课程的回顾和总结.同时来一次完整开发的Django体验. 一个产品从研究到编码我们要 ...

  6. 『给它加个壳』纯MarkDown博客阅读体验优化

    今天鼓捣了一天纯MarkDown书写的博客样式的美化,事实证明图表较多的MarkDown撰写的博文一样可以展现出非常漂亮的效果.为了让纯MarkDown书写的博客有一个干净舒服的阅读体验,我主要针对博 ...

  7. 博客还是搬到csdn吧~

    从csdn转到博客园是因为博客园开放了博客接口,方便发博客,再者博客样式也比较多,排版兼容性也较好. but, 博客园的链接在多个群里进行了宣传,当时大概有2000多的访问量,但是一个月过去了,现在还 ...

  8. 如何使用10个小时搭建出个人域名而又Geek的独立博客？

    1.安装准备软件 Node.js.Git.GitHub DeskTop(前两个必须安装,后者可选) 2.本地搭建hexo框架.配置主题.修改参数.实现本地测试预览 3.链接GitHub.实现在线预览 ...

  9. Sublime Text博客插件 --- iblog

    iblog是一款 sublime 博客插件,目前只支持cnblog. 项目地址:https://github.com/iskeeter/iblog 功能介绍 新建和更新cnblog的博客 支持mark ...

随机推荐

  1. 2014ACM/ICPC亚洲区域赛牡丹江站汇总

    球队内线我也总水平,这所学校得到了前所未有的8地方,因为只有两个少年队.因此,我们13并且可以被分配到的地方,因为13和非常大的数目.据领队谁oj在之上a谁去让更多的冠军.我和tyh,sxk,doub ...

  2. SSIS从理论到实战,再到应用(5)----流程控制之Foreach循环

    原文:SSIS从理论到实战,再到应用(5)----流程控制之Foreach循环 上期回顾: SSIS从理论到实战,再到应用(4)----流程控制之For循环 上一期讲了For循环,Foreach循环相 ...

  3. 异步编程和线程的使用（.NET 4.5 ）

    C#:异步编程和线程的使用(.NET 4.5 )   异步编程和线程处理是并发或并行编程非常重要的功能特征.为了实现异步编程,可使用线程也可以不用.将异步与线程同时讲,将有助于我们更好的理解它们的特征 ...

  4. 通俗易懂的语言描述JavaScript原型

    这是一个翻译.原文地址http://javascriptissexy.com/javascript-prototype-in-plain-detailed-language/# 原型(prototyp ...

  5. linux_redhat_线程后台运行方法

    建议看完1:后直接看2 screen 方式熟练些可靠. 次方法适用于redhat系统,unbunt* 系统用screen 命令 产看系统版本 cat /proc/version 首先项目制作的sh文件 ...

  6. 数据库 基于索引的SQL语句优化之降龙十八掌（转）

    一篇挺不错的关于SQL语句优化的文章,因不知原始出处,故未作引用说明! 1 前言      客服业务受到SQL语句的影响非常大,在规模比较大的局点,往往因为一个小的SQL语句不够优化,导致数据库性能急 ...

  7. NET 2015

    .NET 2015 英文原文:Understanding .NET 2015 Understanding 翻译为了解或理解,对于 .NET 来说,2015 年注定会更加精彩,所以标题就用了“精彩”这个 ...

  8. 泛型委托及委托中所涉及到匿名方法、Lambda表达式

    泛型委托及委托中所涉及到匿名方法.Lambda表达式 引言: 最初学习c#时,感觉委托.事件这块很难,其中在学习的过程中还写了一篇学习笔记:委托.事件学习笔记.今天重新温故委托.事件,并且把最近学习到 ...

  9. 配置phonegap Android开发环境

    phonegap的安装路途曲折,首先要基于多种程序,中途还要解决各种问题,下面是phonegap需要的程序 1.NodeJs 2.Phonegap 3.jdk,jre 4.Apache Ant 5.A ...

  10. AutoMapper 创建嵌套对象映射（原创）

    之前在做DTO转换时,用到AutoMapper.但DTO的层次太深了,无奈官方没针对嵌套类型提供好的解决方案,于是自己实现了一下: 思路:采用递归和反射很好的避免手工创建嵌套对象的映射. 第一个版本, ...