博客帖子添加调整字体大小功能-Blogger.com

博客帖子添加调整字体大小功能-Blogger.com

   十二月 03, 2011       MGT@blogger

---

    每当我拿自己的博客字体大小与别的博客比较多时候总感觉自己博客字体小些，但是变大的话又感觉整个页面就不怎么和谐了，今天找到了一个方法可以调整帖子文字大小的方法，而是只针对帖子文字进行调整,且调整时不必重新加载网页，很是方便。
方法如下：
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 &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>
3.查找HTML代码中所有的：
<data:post.body/>
将它们全部替换为以下代码：
<span name='zoom'><data:post.body/></span>
这样，就可以将被 name='zoom' 的span tag包住的那些�容，赋予字体缩放的功能。
4.在你想要提供功能的地方加入以下代码，不过感觉添加在第三步替换后代码的上面会比较和谐：
<b:if cond='data:blog.pageType == "item"'> 
<div style='text-align:right'><b>调整字体大小：</b>
<a href="javascript:doZoom(16)">大</a>|
<a href="javascript:doZoom(14)">中</a>|
<a href="javascript:doZoom(12)">小</a>
</div></b:if>
其中的位置（left、center、right）和文字大小（12、14、16...）可以自己调整（单位是px）。