【转】博客园界面自定义

　　博客园提供给用户大量的博客模板供选择，并在这些模板的基础上，允许用户进行一定的定制。当然，这种定制是有限的，主要包括以下几个方面：通过CSS代码定制代码页面风格、博客侧边栏公告、页首\页脚Html代码以及标题和子标题。博客主页中打开“管理”-“设置”即可见。

1.标题和子标题显示在页面顶部（blogTitle）

2.通过CSS代码定制代码页面风格

　　通过CSS修改页面风格部分是定制个人界面的关键。CSS层叠样式表，它可以通过选择器来设置HTML页面中标签、类、id及伪元素的属性。

要想设置CSS样式，我们需要知道博客页面中有哪些HTML标签、类，即要找到我们要修改的那部分页面对应的HTML标签是什么。这样便需要查看网页HTML源码，在Chrome浏览器中，在要修改的地方右击选择“审查元素”即可。

首先，对于页面顶部对应源码为：

<div id="blogTitle">
<div class="title">
<a id="Header1_HeaderTitle" class="headermaintitle" href="http://www.cnblogs.com/houkai/">云山之巅</a>
</div>
<div class="subtitle">自学是你超越他人使自己变重要的一种能力！</div>
</div>

　　可知，我的页面顶部受块blogTitle控制，不同的模板可能不同，大家要按自己的来。我想修改页面顶部的颜色，只需在CSS代码框中添加

#blogTitle{
    background-color:#0FF;
}

　　再进一步，我想让设置下每篇文章的标题样式，让标题更突出。找到标题对应源码：

<h1 class="postTitle">
<a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/houkai/p/3392679.html">Spark之UDAF</a>
</h1>

　　设置标题的样式如下（CSS框中添加）：

.postTitle{
    background-color:#FF9;
    font-size:18px;
    margin-bottom:3px;
}

3.博客侧边栏公告（支持HTML代码）

　　博客园允许博主修改侧边栏中公告部分的内容，所以我们会看到各种各样的公告形式：

　　我们可以通过侧边栏公告代码框，向公告中添加一些模块，比如自己编写的一些个人介绍、当前时间、访问人数等等。

1.1添加访问次数：

　　首先要在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>

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

1.3动态时间，代码如下：

<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>

4.页首\页脚Html代码

　　这两个控制框就是在你当前页面的最上方页眉或最下方页脚添加一些内容。