博客园自定义样式

 起因

周末休息两天, 今天新的一个上班周, 可能有点周末综合征, 星期一早上来到公司之后, 打开Eclipse却不想做什么, 那就看看技术帖子, 逛逛博客吧;

浏览了很多博客园上的帖子,发现很多博客主都定制了自己的博客样式, 也有很多就直接应用了博客园推荐的皮肤, 本人之前也是直接应用博客园的推荐的皮肤.

皮肤名称:darkgreentrip

用了一段时间之后感觉太没个性, 但是又懒没抽时间去自定制, 现在刚好,既然也没心思工作, 那就花点时间来打理打理博客吧, 毕竟这是自己记录技术的地方,装饰的好点,自己看着也舒服.

 

开始

 一, 选择自己喜欢的模板

对于CSS技术好的你, 可以完全自己写个新的模板, 这需要花些时间, 但是对于我只有上午的1个小时左右的时间来弄, 所以就应用了博客园提供的模板, 然后自定义了下自己的样式:

管理 - 设置 - 博客皮肤 - 选择darkgreentrip

我比较喜欢简单,干净的,所以这次就选择了SimpleMemory这款, 可以根据自己的爱好选择

 二, 自定义样式

这个可以通过浏览器来帮我们, Chrome, 火狐, IE都可以, 我这里用的是谷歌的Chrome

按下F12进入开发者模式,来查看HTML代码

 

可以清楚的看到页面的分层结构,他的CSS样式也可以在右侧详细的看到

 

 

 如果我们想要修改,可以现在里面试着添加修改, 符合自己的要求之后将它copy下来,paste到博客园的 设置 - 页面定制CSS代码 中,

copy

 paste

 

示例

标题


给标题设置背景色

 

调试发现标题是出于id为cnblogs_post_body的div中, 标题一的标签为h1, 标题二的标签为h2, 标题三的标签为h3, 标题四的标签为h4, 标题五的标签为h5, 将CSS添加到 页面定制CSS代码 框中 

 

显示结果为:

 类似的可以修改博客标题, 字体大小, 导航栏, 侧边栏等等.

 

 公告栏

公告栏也可以添加很多自己喜欢的样式,而且可以添加时钟, 访问人数, 访问地区, 个人介绍等等

我这边引用了 hone hone clock人体时钟 和 访问次数

 

就知道你喜欢 hone hone clock, 喜欢的朋友可以将以下代码贴进博客园的 博客侧边栏公告（支持HTML代码）（支持JS代码）中就可以了,当然你也可以修改下,

 1 <html>
 2 <div id="myTime">
 3  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="180" height="80" id="honehoneclock" align="middle">
 4  <param name="allowScriptAccess" value="always">
 5  <param name="movie" value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf">
 6  <param name="quality" value="high">
 7  <param name="bgcolor" value="#ffffff">
 8  <param name="wmode" value="transparent">
 9  <embed wmode="transparent" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_wh.swf" quality="high" bgcolor="#ffffff" width="180" height="80" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
10  </object>
11 </div>
12 </html>

 

a. 添加访问次数：

首先要在http://www.amazingcounters.com/index.php网站注册，它会自动生成相应代码，然后粘贴到公告框中即可，可对网站生成的HTML代码做适当修改，我的代码如下：

<div align="left">
<img border="0" src="http://cc.amazingcounters.com/counter.php?i=3153547&c=9460954" alt="Free Counters">
</div>

b. 访问来源位置： 

通过http://www.clustrmaps.com/zh/admin/action.php生成访问者地址分布图，然后将代码添加到公告框中即可，注意博客园默认只支持HTML代码，JS代码会忽略。

c. 动态时间

代码如下：

复制代码
<object id="honehoneclock" width="160" height="70" align="middle" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param value="always" name="allowScriptAccess">
<param value="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" name="movie">
<param value="high" name="quality">
<param value="#ffffff" name="bgcolor">
<param value="transparent" name="wmode">
<embed width="160" height="70" align="middle" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="always" name="honehoneclock" bgcolor="#ffffff" quality="high" src="http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf" wmode="transparent">
</object>
复制代码

第四行中http://chabudai.sakura.ne.jp/blogparts/honehoneclock/honehone_clock_tr.swf是时间Flash的网址，http://chabudai.sakura.ne.jp/blogparts/honehoneclock/下还有一些时间Flash，大家可选择。

 

d. 其他时间

当然网上还有很多时间的Flash代码，比如：

<embed width="180" height="180" align="middle" wmode="transparent" quality="high" src="http://images.cnblogs.com/cnblogs_com/csharp/clock.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash">

大家还可以添加更多模块，比如天气、广告什么的。如果你发现别人博客中的模块比较漂亮，那么那就研究下那部分的HTML源码吧（FireBug或审查元素）。当然，简洁也是一种美，适度最好了。

e. 页首\页脚Html代码

这两个控制框就是在你当前页面的最上方页眉或最下方页脚添加一些内容，也比较简单，大家可以试一试。

文章适合入门级，个性化要和已选模板色调一致，最后希望大牛们制作更多好看的模板吧。

f. 文章目录

对于一片很长的博文来说，建立一个目录索引，是很方便阅读的，网上介绍的文章也很多，这里我介绍一个样式相对比较好的，可以去看看(点我)，我自己也是在用这个。

 

 

posted @ 2017-04-10 14:42  明志健致远  阅读(8252)  评论(8)  编辑  收藏  举报