让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瞎折腾！

收藏本文