博皮是基于模板 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 计算的话, 应该不会影响广告的收入吧 :) 如果园子要求博主有义务必须在博客下方显示博客园的广告的话, 请说一下, 我会把移除广告部分的代码删除的.

写在最后

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

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

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

秒客网

共享一下我的博客皮肤