回到首页
订阅Luke瞎折腾
找资源前务必先看这里!!
Blogger技巧
免费空间推荐
Luke的网络收藏夹
Luke的网络硬盘
控制台
新建日志

2009/04/16

让Blogger的读者根据自身习惯调整帖子文字大小

字体大小:| |
一直觉得“Luke瞎折腾”帖子的文字实在太小不方便阅读(尤其是在没有使用雅黑字体的电脑上),尝试过在模板中将帖子的字体硬性变大,可是调整后又觉得和整个Blogger的模板不搭配,所以最终还是不得已改了回来:(

今天在看一些台湾同胞的Blogger时发现某些Blogger提供了让读者自己调整Blogger帖子文字大小的功能,这种调整不同于用浏览器提供的[CTRL + 鼠标滚轮 或“+/-”]来调整全部的页面属性,而是只针对帖子文字进行调整,且调整时不必重新加载网页,很是方便,倒是给了我一个不错的解决方案。GG了下,在Kaie's Blog找到了实现的方法,分享之:

1.控制台-布局-修改HTML,保存一下现有模板以备不测勾选“扩展窗口小部件模板”

2.查找以下内容:
]]></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 < 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 < zooms.length; i++) {
zooms[i].style.fontSize = size+'px';
}
}
</script>


注:在添加以上代码前,请务必将以上代码中红色的“<”换成“&lt;”,Tsung-Kai Chen是这样解释具体原因的:
由於Blogger在parse template語法有無錯誤時,他會檢查是否存在相對應的左括: <及右括: >,若不存在便會跟你說你的template語法沒有正確的close,導致儲存失敗。不幸的是,你若將Javascript嵌入template檔中,並且又很巧的,用到compare operator,例如:「小於:<」,如此一來他便會產生上述所提的,少了相對應的右括: >,而導語法錯誤啦! 因此,大家若要將底下這段javascript嵌入template中的話,記得將裡頭的<置換成&lt;

3.查找HTML代码中所有的:
<data:post.body/>

将它们全部替换为以下代码:
<span name='zoom'><data:post.body/></span>

这样,就可以将被 name='zoom' 的span tag包住的那些內容,赋予字体缩放的功能。

4.在你想要提供功能的地方(可以在“布局”中加入“HTML小工具”)加入以下代码:
<div style='text-align:right'>
<a href="javascript:doZoom(16)">大</a>|
<a href="javascript:doZoom(14)">中</a>|
<a href="javascript:doZoom(12)">小</a>
</div>


其中的位置(left、center、right)和文字大小(12、14、16...)可以自己调整(单位是px)。



-------------------------------------------------------------------------------------
以上图片和文字均为原创,转载请注明转自Luke瞎折腾


收藏本文
相关文章:

6 评论:

逍遥天涯 说... 回复此评论

对啦,我的博客链接地址改成tite.net.ru了,麻烦把链接改一下哈。麻烦了~

Luke 说... 回复此评论

@逍遥天涯链接搞定:)

Robin Chan 说... 回复此评论

怎么样在每个帖子上都有调整的显示呢?我怎么弄好像只是在首页有个小工具一样。

Luke 说... 回复此评论

@Robin Chan我是放在这段代码后面的:
<div class='post-header-line-1'/>
你可以参考下,但由于模板不同,可能不正确,自己多试试吧,祝你成功。

Robin 说... 回复此评论

嗯的确是模板不同,我试了很多次还是不成功,呵呵不去试了。今天512我也把博客弄灰了,呵呵

Luke 说... 回复此评论

@Robin看到了,大家一起祈祷吧~

发表评论

有问题请留言,Luke帮你解决。问了方便回答,请尽量不要匿名。