共享一下我的博客皮肤

         博皮是基于模板 SimpleBlue 做的修改, 改动前后看上去差别还是挺大的, 但当然不能跟专业的网页美工做的效果相比, 我不是做美工的...只了解一些 html 和 CSS 而已, 让各位见笑了:) 如果你也喜欢我的博皮, 可以把你的博客也修改称这样. 修改方法在 管理->设置-> 通过CSS定制页面风格, 不过最好先将你的博客模板设置成 SimpleBlue, 因为每个模板 div 的的名字可能不一样. 然后打开我博客的 CSS, 将 CSS 粘贴到你设置界面的 "通过CSS定制页面风格" 文本框中.

博客的背景图片

        改动的部分还挺多的, 比如博客背景图片, 设置背景图片还需要更改博客的头部 div , 比如将它的背景设为 none, 这样突出整个 body 的背景. 如果你不是很喜欢这个背景, 可以选择另外的图片, 但宽度最好是700px, 不然你还需要调整背景的绝对定位大小. 修改背景方法如下, 找到如下的代码:

#topBackground{
	background: url(http://pic002.cnblogs.com/images/2011/70278/2011052216374836.jpg) no-repeat center top;
	top: 0;
	height: 400px;
	position: fixed;
	width: 100%;
	z-index:-1;
}
#footer{
	bottom: 0px;
	height: 200px;
	position: fixed;
	width: 100%;
	background: url(http://pic002.cnblogs.com/images/2011/70278/2011052216374836.jpg) no-repeat center bottom;
	z-index: -1000;
	color: transparent;
	display:block !important;
}

        更改 background 中图片的 url 属性即可.

博客的主题图片

        博客右上角表示博客的主题, 比如我的主题是.NET, 当然你也可以换成其它的图片, 找到如下代码, 更改其中 background 的 url 属性. 博客背景图片和博客主题图片均考虑了小屏幕尺寸笔记本的阅读, 当屏幕宽度变成 800px 的时候也不会影响美观.

/*导航条*/
div#navigator {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0;
	height: 80px;
	border: none;
	width: 300px;
	background: url(http://pic002.cnblogs.com/images/2011/70278/2011051911433598.png) no-repeat center bottom;
}

主页模块的修改

        关于博客, 我觉得应该突出显示博客内容, 因此我将左边的 siderbar 背景设置为 none 了, 并将背景色设置为 transparent了. 如果你不喜欢, 可以找到如下代码, 将其删除:

div#sideBar{
	border:none !important;
	background-color:transparent !important;
}

        不知道为什么, 原来我有些博客默认的首页, 有些博客上方显示博客发表日期, 有些则不显示, 为了格式的统一, 我用 CSS 将它们统一都不显示, 如果你需要显示博客发表日期, 请找到以下代码, 并删除它们:

/*不显示随笔发布日期*/
.dayTitle {
display:none;
}

博客小功能样式的修改

1. 提交评论的按钮

        原来博客下面提交评论的按钮比较普通, 我将其稍微修改了一下, 格式与 "绿色通道" 里 "好文要顶" 的样式差不多.

/*提交按钮*/
#btn_comment_submit{
	width:55px;height:25px;border:none;
	background-color:#2DAEBF;
	-webkit-border-radius: 10px;color:white;
	font-weight: bold;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
	font-size: 10pt;
}

2. "推荐" 和 "反对" 按钮

        另外我还很 "无耻" 的隐藏了评论按钮的 "反对"按钮, 自己辛辛苦苦大半天写的博客被人"反对", 其他人都 "推荐", 就那么个别人是真的反对, 还是恶作剧点了反对, 心里多少会有点不舒服的. 对内容不满可以写评论, 一声不响得点个反对算什么. 当然对于真的想点 "反对" 的园友们肯定还是有办法点 "反对" 的...

3. 绿色通道

        对于绿色通道, 我只显示了其中的两个 —— "好文要顶" 和 "关注我", 其它两个 "收藏该文" 和 "与我联系" 可能点的人不多, 肯定没有前两个不在一个数量级上, 因此我隐藏了这两个按钮, 而且真的需要 "收藏该文" 和"与我联系"的话, 在博客里有其它链接可以实现这两个功能的.

4. 博客下方的广告

        关于博客下面的广告, 不知为什么我在后台配置里设置的不显示广告, 但其实在博客下面还是显示广告. 然后我用 JQuery(开始用的JS, 但发现各个浏览器对JS的处理效果不同) 将广告从 DOM 树中移掉了, 但我测试之后发现其实广告是先显示之后才被移掉的, 如果广告是按 IP 计算的话, 应该不会影响广告的收入吧 :) 如果园子要求博主有义务必须在博客下方显示博客园的广告的话, 请说一下, 我会把移除广告部分的代码删除的.

推荐使用 Windows Live Writer

        经常看到一些园友的博客, 内容貌似还挺好的, 但就是排版不太好, 比如段落间距太大或者字体这么大那边小, 插入的图片很大且留白部分十分多等等等等, 毫无疑问这样会影响读者的阅读体验的. 推荐大家使用 Windows Live Writer 写博客, 只需要轻松设置几个步骤就可以将你博客园的帐号绑定到 Windows Live Writer 中, 然后你就可以用它来写博客并发表了.

        代码高亮部分, 我安装的是 SyntaxHighlighter, 你只需要下载这个插件, 在 Windows Live Writer 中加入这个插件就可以使博客里的代码支持高亮了. 注意使用这个插件, 需要在后台设置里将默认编辑器设置为 TinyMCE. 除了这个代码插件, 当然你在 WLW 里的 "添加插件" 里还会发现其它支持代码高亮的插件的, 比如 Paste from Visual Studio. 请大家不要乱安装插件哦! 先看一下这个插件用的人多不多, 因为 WLW 貌似并不是很安全的, 在程序中如果引用 WLW 的某个 dll, 是可以获取这个 dll 里的账户名和账户密码的! 当然我至今还没发现有这种流氓插件...

写在最后

        如果您对博客皮肤有什么看法或意见, 欢迎交流讨论.

        一个令别人第一眼看上去舒服的博客是有必要的, 但更重要的是博客的内容 :)

本文链接: http://www.cnblogs.com/technology/archive/2011/05/22/2053802.html