2007年2月3日星期六

blogger 3.0:让你的博客文章字体随意变换大小

原作者不详,老早就在老外博客上看到了就是不知道怎么做的,台湾朋友Kaie Chen总算解答了我的疑问:)

此hack能够帮读者一键调整你博客文章的字体以便观看。查看具体样式请参考我博客的右边。

安装方法:首先把下面的代码加入你的xml模板里的</head>上边,]]<>/b:skin>下边:

<script type='text/javascript'>
function getElementsByName_iefix(tag, name) {
var elem = document.getElementsByTagName(tag);
var arr = new Array();
for(i = 0,iarr = 0; i &lt; elem.length; i++) {
att = elem[i].getAttribute("name");
if(att == name) {
arr[iarr] = elem[i];
iarr++;
}
}
return arr;
}

function doZoom(size)
{
var zooms = getElementsByName_iefix("span", "zoom")
for (var i = 0; i &lt; zooms.length; i++) {
zooms[i].style.fontSize = size+'px';
}
}
</script>


第二步,在你的模版xml代码里找到下面的代码:(可以复制全部代码都记事本上,然后搜索定位~)
<p><data:post.body/></p>

找到几个就全部替换几个成:
<span name='zoom'><p><data:post.body/></p></span>

第三步:添加一个新的页面元素,把下面代码加入进去即可:
<a href="javascript:doZoom(16)">大</a>
<a href="javascript:doZoom(14)">中</a>
<a href="javascript:doZoom(12)">小</a>


完工。

让第三步最终显现的样式好看的代码还有:
显示效果如图:

使用代码如下:
<a href="javascript:void(0)"><img alt="Font Size" src="http://chenkaie.googlepages.com/fontsize.gif"></a> <a href="javascript:doZoom(16)"><img alt="Large Font Size" src="http://chenkaie.googlepages.com/fontsize_l.gif"></a> <a href="javascript:doZoom(14)"><img alt="Large Font Size" src="http://chenkaie.googlepages.com/fontsize_m.gif"></a> <a href="javascript:doZoom(12)"><img alt="Large Font Size" src="http://chenkaie.googlepages.com/fontsize_s.gif"></a>
显示效果如图:

使用代码如下:
<span style="font-family: courier new; font-weight: bold;">【Font Size】</span> <a href="javascript:doZoom(11)" title="Small (11px)"><span style="font-size: 85%;"><span style="font-family: times new roman;">A</span></span></a> <a href="javascript:doZoom(13)" title="Original (13px)"><span style="font-family: times new roman;">A</span></a> <a href="javascript:doZoom(15)" title="Large (15px)"><span style="font-size: 130%;"><span style="font-family: times new roman;">A</span></span></a> <a href="javascript:doZoom(16)" title="Huge (16px)"><span style="font-size: 180%;">
<span style="font-family: times new roman;">A</span></span></a>

0 评论:

发表评论: ☆欢迎灌水☆言论自由☆交流快乐☆