Memasang Font Resizer

Kebanyakkan blogger jarang menggunakan font resizer tapi aku rasa widget ini memang sesuai untuk mereka yang menulis entri dengan tulisan yang terlalu kecil atau terlalu besar. Mungkin juga mereka juga tak tahu widget ini juga berfungsi pada blog.

Atas permintaan JRY aku tunaikan tutorial ini. Sebenarnya dia sudah menggunakan font resizer dari web Dynamic Drive, mungkin dia saja nak membandingkan kod aku dengan kod dia. Tapi aku rasa kod dia dari Dynamic Drive itu lebih sempurna dari apa yang aku tengah gunakan sekarang, aku hanya guna 2 saiz tulisan untuk 2 butang tulisan tapi dia guna 10 saiz tulisan untuk 2 butang tulisan. Tapi aku masih boleh bergaya dengan JRY kerana tutorial ini ada fungsi butang reset.

Sebenarnya nak guna keyboard pun boleh besarkan tulisan, tak percaya cuba tekan tab Ctrl + 0, Ctrl + + dan Ctrl + -. Cuma tak ramai yang tahu tentang trik itu, maka kamu boleh gunakan tutorial ini untuk memudahkan pembaca blog kamu membaca dengan lebih selesa. Sekali lagi aku boleh bergaya dengan JRY kerana tutorial ini hanya membesarkan tulisan dibahagian entri sahaja tanpa mengganggu tulisan yang berada dibahagian sidebar.

01. Layout > Edit Html.

02. Cari kod ini.

</head>

03. Tambahkan kod ini di atasnya.

&lt;script type=&#39;text/javascript&#39;&gt;

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(&quot;name&quot;);
if(att == name) {
arr[iarr] = elem[i];
iarr++;
}
}
return arr;
}

function doZoom(size)
{
var zooms = getElementsByName_iefix(&quot;span&quot;, &quot;zoom&quot;)
for (var i = 0; i &lt; zooms.length; i++) {
zooms[i].style.fontSize = size+&#39;px&#39;;
}
}

&lt;/script&gt;

Kamu mungkin ada masalah untuk save kod ini, sila encode dahulu kod < dan > di web centricle Telah diselesaikan.

04. Cari kod ini.

<data:post.body/>

Pemenggalan kod ini membolehkan tutorial ini berfungsi di dalam entri. Kamu juga boleh memenggal kod ini dimana-mana bahagian mengikut kehendak kamu.

05. Tambahkan kod menjadi sebegini.

<span name='zoom'>

<data:post.body/>

</span>

06. Pilih Save.

07. Pilih Layout > Page Element > Add a Gadget : Pilih HTML/JavaScript.

08. Tambahkan kod ini.

<div id="zoom" align="center">

<a href="javascript:doZoom(15)">

<img src="http://tinyurl.com/fontsizeplus"/>

</a>
<a href="javascript:doZoom(13)">

<img src="http://tinyurl.com/fontsizeorigin"/>

</a>
<a href="javascript:doZoom(11)">

<img src="http://tinyurl.com/fontsizeminus"/>

</a>

</div>

Tukarkan perkataan yang telah diboldkan mengikut kehendak kamu. Jika kamu menggunakan saiz tulisan 13px diblog kamu, setkan juga saiz font origin kepada 13 untuk dijadikan butang tulisan reset.

09. Pilih Save.