Mengontrol Font Size Blog Anda dengan Javascript
Sebenarnya hampir semua browser memiliki fitur untuk mengontrol huruf pada halaman web yang Anda kunjungi, yakni dengan menekan tombol Ctrl bersamaan dengan + (untuk memperbesar) atau - (untuk memperkecil). Namun ada satu cara lain yakni menambahkan semacam fungsi “dynamic font size” pada situs Anda dengan menggunakan javascript.
Berikut ini adalah script yang dapat digunakan untuk memudahkan pengunjung untuk mengontrol font size (baca: ukuran huruf) dari tulisan pada setiap halaman di blog Anda. Ini akan sangat berguna bagi pembaca yang kesulitan dengan huruf yang kecil, dan membolehkan orang tersebut untuk memperbesar ukuran huruf dari tulisan Anda, sehingga lebih memudahkan mereka untuk membaca.
<script type="text/javascript">
var min=8; var max=18;
function perbesarHuruf() {
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
}
else {
var s = 12; }
if(s!=max) { s += 1; }
p[i].style.fontSize = s+"px" }
}
function perkecilHuruf() {
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize) {
var s = parseInt(p[i].style.fontSize.replace("px",""));
}
else { var s = 12; }
if(s!=min) { s -= 1; }
p[i].style.fontSize = s+"px" }
}
</script>
Script di atas akan mengganti ukuran huruf dari tulisan yang berada dalam paragraf (tag <p>). Jika menginginkan menggukan tag yang lain, Anda dapat mengganti bagian getElementsByTagName(’p’);.
Tentunya script ini hanya bekerja pada halaman dengan pixel sized fonts (huruf yang berukuran pixel(px)) dibandingkan dengan relative sized fonts (huruf yang berukuran relatif seperti: “em” dan “%”). Selain itu, jika script tidak menemukan ukuran huruf dari sebuah paragraf, maka akan digunakan ukuran standar, yakni 12px.
Cara Penggunaan
Masukkan script di atas pada halaman blog Anda (apakah dengan mengetikkannya pada tag <head> atau dengan menggunkan file .js eksternal dan mengimportnya). Untuk pemanggilan fungsi perbesarHuruf dan perkecilHuruf Anda dapat menggunakan kode HTML berikut:
<a href="javascript:perbesarHuruf();">A</a> <a href="javascript:perkecilHuruf();">a</a>
tips: Anda dapat mengganti teks A | a dengan tanda lain, ataupun menggantinya dengan gambar dengan menggunakan tag <img>.
Sebagai contoh, Anda dapat menggunkan “font navigator” pada halaman ini, yang berada di bawah judul tulisan ini.
Bagaimana, cukup mudah bukan? Apakah Anda juga akan mengaplikasikan hal yang sama pada blog Anda?

