博客园自定义样式

时间 2019-11-08

标签博客自定义样式繁體版

原文原文链接

原由

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

浏览了不少博客园上的帖子,发现不少博客主都定制了本身的博客样式, 也有不少就直接应用了博客园推荐的皮肤, 本人以前也是直接应用博客园的推荐的皮肤.html

皮肤名称:darkgreentrip面试

用了一段时间以后感受太没个性, 可是又懒没抽时间去自定制, 如今恰好,既然也没心思工做, 那就花点时间来打理打理博客吧, 毕竟这是本身记录技术的地方,装饰的好点,本身看着也舒服.浏览器

开始

一, 选择本身喜欢的模板

对于CSS技术好的你, 能够彻底本身写个新的模板, 这须要花些时间, 可是对于我只有上午的1个小时左右的时间来弄, 因此就应用了博客园提供的模板, 而后自定义了下本身的样式:app

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

我比较喜欢简单,干净的,因此此次就选择了SimpleMemory这款, 能够根据本身的爱好选择字体

二, 自定义样式

这个能够经过浏览器来帮咱们, Chrome, 火狐, IE均可以, 我这里用的是谷歌的Chrome网站

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

能够清楚的看到页面的分层结构,他的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. 文章目录

对于一片很长的博文来讲，创建一个目录索引，是很方便阅读的，网上介绍的文章也不少，这里我介绍一个样式相对比较好的，能够去看看(点我)，我本身也是在用这个。