创建自己的博客页面

当我第一次接触博客园时，我总是有一种想要定制自己的博客页面的冲动。后来觉得原来的模板已经足够了（博客园提供了大量模板），所以就没有做这个工作。。我今天不太忙。我对博客园的页面定制功能做了一点研究。记录如下。

首先，大多数园丁都是技术极客。大家共享知识，界面在某种程度上并不是很重要。而且这里有很多从事Web前端的人。这里分享的知识只是入门级的。专家可以跳过它。如果你不喜欢它，就不要批评它。

博客园为用户提供了大量的博客模板可供选择，并允许用户基于这些模板进行一定的定制。当然，这种定制是有限的，主要包括以下几个方面：通过CSS代码定制代码页样式、博客侧边栏公告、页眉页脚Html代码以及标题和副标题。打开博客首页“管理”-“设置”即可看到。

1。标题和副标题显示在页面顶部（blogTitle）

这部分比较简单，大家可以修改一下试试。

2。通过CSS代码自定义代码页样式

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

要设置CSS样式，我们需要知道博客页面中有哪些HTML标签和类，也就是说，我们需要找出我们要修改的页面部分对应哪些HTML标签。这样就需要查看网页的HTML源代码。在 Chrome 浏览器中，右键单击要修改的区域，然后选择“检查元素”。这里为了方便，我使用FireBug插件在火狐浏览器下查看源代码。 FireBug很强大，但在这里有点大材小用了。

首先页面上方对应的源码是：

<div id="blogTitle">
<div 类="标题"><a id="Header1_HeaderTitle" class="headermaintitle" href="http://www.sxzhongrui.com/houkai/" >侯凯a>
div>
<div class="副标题">记录我的成长~div>
div>

如您所见，我的页面顶部由 blogTitle 块控制。不同的模板可能会有所不同，所以每个人都要按照自己的喜好。我想修改页面顶部的颜色，只需在CSS代码框中添加

即可

#blogTitle{
    背景颜色:#0FF;
}

#代表id选择器。更多样式设置可以学习CSS知识。

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

<h1 类=“帖子标题”>
<a id="cb_post_title_url"类="postTitle2"href="http://www.sxzhongrui.com/houkai/p/3 392679 .html">8.用于多分类的SVM a>
h1>

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

.postTitle{
    背景颜色:#FF9;
    字体大小：18px;边距底部：3px；
}

。是类选择器。这时你会发现所有文章的标题都变成了你刚才设置的样式，因为文章的标题都在class=postTitle的标签内。

此时，您可以根据自己的需要设置页面各部分的样式。

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

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

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

a添加访问次数：

首先，您需要在 http://www.sxzhongrui.com/index.php 网站注册。它会自动生成相应的代码，然后将其粘贴到公告框中。您可以对网站生成的HTML代码进行适当的调整。修改后，我的代码如下：

<div 对齐=“左”>
<img border="0" src="http://www.sxzhongrui.com/counter.php?i=3153547&c=9460954" alt="免费柜台">
div>

b。访问来源位置：
通过http://www.sxzhongrui.com/zh/admin/action.php 生成访客地址分布图，然后将代码添加到公告框，请注意博客Park默认只支持HTML代码，JS代码将被忽略。

c。动态时间，代码如下：

<对象id =“honehoneclock”宽度 =“160”高度 =“70”对齐 =“中” 代码库="http://www.sxzhongrui.com/pub/shockwave/cabs/flash/www.sxzhongrui.com#version=8,0,0,0" classid="clsid : d27cdb6e-ae6d-11cf-96b8-444553540000">
<参数值 =“始终”名称 =“allowScriptAccess”>
<参数值 =“http://www.sxzhongrui.com/blogparts/honehoneclock/honehone_clock_tr.swf”名称 =“电影”>  
<参数 值=“高”名称=“质量”>
<参数值="#ffffff"名称="bgcolor">
<参数值=“透明”名称=“wmode”><嵌入宽度 =“160”高度 =“70”对齐 =“中间”插件页面="http:// www.sxzhongrui.com/go/getflashplayer" type="application/x-shockwave-flash"allowscriptaccess="always"名称="honehoneclock"  bgcolor“=”#ffffff“质量=”高“ src=”http://www.sxzhongrui.com/blogparts/honehone_clock_tr.swf“ wmode=“透明”>
物体>

第四行，http://www.sxzhongrui.com/blogparts/honehoneclock/honehone_clock_tr.swf是时间Flash的URL，http://www.sxzhongrui.com/blogparts/honehoneclock /。有一些Flash的时间，大家可以选择。

d。其他时间（右图）

当然网上有很多Flash代码，例如：

<嵌入宽度 =“180”高度 =“180”对齐 =“中间”wmode=“透明”质量=“高”src=“http://www.sxzhongrui.com/cnblogs_com/csharp/clock.swf”插件页面=“http://www” .www.sxzhongrui.com/go/getflashplayer" 类型="application/x-shockwave-flash">