[Blogger Hack]blogger動態字型-轉載

字放大: 2X. 3X


文章右上角的 「字放大:2X.3X」
是參考abin tech note(動態調整文章字體大小)加的

1.在<head>前加入

<script type='text/javascript'>
function FontZoom(size)
{
var element = document.getElementsByTagName("div");
var components = new Array();
for(i = 0, j = 0; i < element.length; i++) {
attribute = element[i].getAttribute("id");
if(attribute == "main-wrapper") {
components[j] = element[i];
j++;
}
}
for (i = 0; i < components.length; i++)
components[i].style.fontSize = size+'px';
}
</script>


2.再將下列寫進你要放的位置(可放文章前 或 sidebar)

<div id='FontZooming'>
<a href='javascript:FontZoom(13)' title='小'>小</a>
<a href='javascript:FontZoom(16)' title='中'>中</a>
<a href='javascript:FontZoom(20)' title='大'>大</a>
</div>

FontZoom(X) X填進你想要的大小
title='Y' Y寫進動態show的字
小、中、大 是show在網頁上的字

我的網頁是寫在<div class='post-header-line-1'>裡面

<span class='FontZooming' style='float:right;margin-top:-18px;'>
<a href='javascript:FontZoom(13)' title='預設大小'>字放大:</a>
<a href='javascript:FontZoom(16)' title='大字型'><font size='2'>2X.</font></a>
<a href='javascript:FontZoom(20)' title='超大字型'>3X</a>
</span>


完工Photobucket

0 個回應:

張貼留言