打造自己的博客园页面

刚接触博客园时,总有一种要定制打造自己博客页面的冲动,后来感觉原有的模板足够了(博客园提供了大量的模板),没有做这项工作。今天不太忙,稍微研究了下博客园的页面定制功能,记录如下。

首先,园子里大都是技术宅,大家分享知识,界面在一定程度上并不太重要。而且这里做Web前端的也大有人在,这里分享的知识只是入门级,大牛可跳过了,不喜勿喷吧。

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

1.标题和子标题显示在页面顶部(blogTitle)

这部分比较简单,大家可修改尝试。

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

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

要想设置CSS样式,我们需要知道博客页面中有哪些HTML标签、类,即要找到我们要修改的那部分页面对应的HTML标签是什么。这样便需要查看网页HTML源码,在Chrome浏览器中,在要修改的地方右击选择“审查元素”即可。这里为了方便,我在火狐浏览器下通过FireBug插件来查看源码,FireBug功能非常强大,这里有点大材小用了。

首先,对于页面顶部对应源码为:

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

#表示id选择器,其他更多样式设置大家可以学习下CSS知识了。

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

<h1 class="postTitle">
<a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/houkai/p/3392679.html">8.SVM用于多分类</a>
</h1>

设置标题的样式如下(CSS框中添加):

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

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

到这里,大家可以根据自己需要设置页面各个部分的样式了。

3.博客侧边栏公告(支持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或审查元素)。当然,简洁也是一种美,适度最好了。

4.页首\页脚Html代码

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DeveWork

为你的WordPress 博客文章页面增加多彩排版条

不知这个上面这个题目会不会让人产生误解,再说明一下,所谓排版条即是如下面的一个绿色的彩条(当然颜色可以自己设定)。有了这个排版条,能更加容易区分内容文字及总结文...

3849
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(52)-美化EasyUI皮肤和图标

我很久以前就想更新系统的皮肤功能,Easyui 自带的皮肤已经无法满足客户的审美。 ? 皮肤颜色来源于AdminLTE系统。我的颜色全部都这里取的。,所以一共取...

4045
来自专栏张戈的专栏

JS延时判断,改善中国博客联盟展示导航自动点击的灵敏度

说到 JS 延时点击,度娘给出的结果几乎都是 js 的延迟点击 Demo,即鼠标产生一个 mousehover 事件之后,延迟多少秒执行点击动作。 本文主要分享...

3124
来自专栏林德熙的博客

为何使用 DirectComposition 创建更加迷人的界面流畅丰富的动画组合不同的位图通过集成 DWM 节省内存兼容原有代码

本文主要翻译Why use DirectComposition,介绍 DirectComposition 的功能和优点。

1961
来自专栏从零开始学 Web 前端

从零开始学 Web 之 HTML(一)认识前端

前端对于网站来说,通常是指网页,网站的前台部分包括网站的表现层和结构层。因此前端技术一般分为前端设计和前端开发。

1163
来自专栏vue学习

25、商品详情页

(1)复制一份test.vue文件并重命名为goodsDetail作为我们的商品详情页面

5025
来自专栏游戏杂谈

IOS设计指南

以前整理过一份关于关于《IOS应用提交时所需要的ICON》,之后IPhone 6/Plus出来,又多了二种尺寸,近期看到国外的一家网站上整理出比较全的尺寸,以及...

1031
来自专栏HTML5学堂

移动端H5知识[系列] - 固定像素的实现方法

HTML5学堂:随着对移动端的探索,而今我们逐渐形成了“横向百分比,纵向rem”。日前看网易对移动端的操作,发现网易的lofter采用了固定像素进行制作。今天我...

5174
来自专栏葡萄城控件技术团队

Angular和Vue.js 深度对比

Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面。当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强...

6533
来自专栏HTML5学堂

metahandler.js——移动端适配各种屏幕无痛工具脚本

移动端H5知识[系列] - 固定像素的实现方法 HTML5学堂:随着对移动端的探索,而今我们逐渐形成了“横向百分比,纵向rem”。日前看网易对移动端的操作,发现...

55011

扫码关注云+社区

领取腾讯云代金券