Homepage
About Me
Leave Words
Table of ContentsChat Room
Photo Album
Web LiveMusic Box

CSS精彩实例(一)——自定义字体大小

从今天开始,我将陆续介绍一些CSS特效实例,都是我从Dynamic Drive网站上精心挑选出的比较实用、有意思的经典CSS代码,希望能给大家的Blog增添更酷的Hacks,有什么错误之处,尽请指出。

好了,现在就言归正传吧。
自定义字体大小,其实已经有很多人的Blogger上就有了,Kaie's Blog上就介绍过如何调整字体大小,但那只是预先设定好的几种字体大小,不能随心所意的调整,而我这个就是两个按钮,一个增大字体,一个减小字体,十分方便,具体效果可以看我的测试Blog

实现方法
1:备份模板,展开Widget
2:在<head></head>间添加下列代码,以引用脚本文件(其中的脚本文件建议自己保存并上传到自己的网络硬盘里)
<script src='http://bryant0315.googlepages.com/textsizer.js' type='text/javascript'/>3:找到你希望放置这个Hack的地方,比如我是将它放在文章标签的下面 ,找到这段代码
<p class='post-footer-line post-footer-line-2'><span class='post-labels'>
..........
</p>
在后面添加下列代码
<a href="javascript:ts('body',1)">+ Larger Font</a> <a
href="javascript:ts('body',-1)">+ Smaller Font</a>
4:保存模版
注意:这里的'body'是要改变整个网页的字体大小。

现在就可以点击"+ Larger Font"增大字体,点击"+ Smaller Font"减小字体。
其实你还可以把那两个链接换成图标,就像这样。

怎么样,这个Hack很实用吧,自己试试看吧!

1 评论:

Little m 说...

傻傻的说...
试了一下好像不行

不知道为什么

总说是说script err:(

相关文章