Font Style Setting

Suatu saat saya ke warnet dekat rumah, kebetulan hari itu lagi naas, entah StarOne yang biasa saya gunakan untuk dial up internet lagi error, dku 5 nya yang tak nyambung atau handphone flexi yang jadi modem nya yang rusak.

Di warnet, seperti biasa setiap pagi saya buka internet, baca-baca berita penting di media indonesia atau sctv.co.id, habis itu baru buka blog. Ketika membuka blog (BLOG PROJECT), saya agak sedikit kaget, betul-betul hari itu naas lagi lagi menimpa. Blog yang sehari-harinya saya buat di laptop pribadi, ternyata di komputer lain justru terlihat aneh, huruf-hurufnya jadi besar-besar dan menyebabkan blog menjadi tidak balance dan tampak berantakan, tak tersusun rapi seperti di laptop saya. Saya coba-coba pindah tempat, di tempat lain malah bagus. Beberapa hari kemudian seorang kawan yang sempat membuka blog saya kirim sms, dia bilang di komputernya, blog saya hurufnya malah kecil-kecil sehingga sulit terbaca.

Karena penasaran coba-coba saya telusuri sendiri masalahnya, dan akhirnya saya ketemukan 2 problem utama pada css stylesheet nya yaitu:
1. Setting Posisi [suatu saat nanti akan dibahas secara detil]
2. Setting style font

Setelah masalahnya teratasi, tetap saja saya tak yakin, soalnya setting baik Posisi maupun Font pada Server Side kadang tidak match dengan setting pada computer client. Apalagi jika jenis browsernya berbeda, contohnya antara Internet explorer dengan Mozilla firefox. Jangan kaget ketika anda membuat blog anda di browser IE, malah berantakan saat dibuka di FireFox

FONT STYLE SETTING adalah solusi yang saya gunakan untuk mengatasinya. Dengan meletakkan FONT STYLE SETTING pada layout halaman, memberikan kemudian bagi pengunjung untuk mengatur sendiri ukuran huruf dari postingan tanpa mengubah setting pada server side, FONT STYLE SETTING ini hanya bersifat temporary karena di set pada Computer Client.

Jika anda juga tertarik untuk memanfaatkan fasilitas ini berikut ini adalah tag-tag htmlnya

Seperti biasa buka account anda di blogger.com, buka TATA LETAK > TAMBAH GADGET > TAMBAH JAVASCRIPT/HTML kemudian copy script berikut ini

<script>
function go1(){
if (document.selecter2.select2.options[document.selecter2.select2.selectedIndex].value != "none") {
document.getElementById('main').style.fontSize=document.selecter2.select2.options[document.selecter2.select2.selectedIndex].value

}
}

function go2(){
if (document.selecter2.select3.options[document.selecter2.select3.selectedIndex].value != "none") {
document.getElementById('main').style.fontFamily=document.selecter2.select3.options[document.selecter2.select3.selectedIndex].value

}
}
</script>
<form id="forma" name="selecter2" method="POST">
<select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1">
<option value="Times New Roman"/>Times New Roman
<option value="Arial"/>Arial
<option selected value="Book Antiqua"/>Book Antiqua
<option value="Bookman Old Style"/>Bookman Old Style
<option value="Century Gothic"/>Century Gothic
<option value="Comic Sans Ms"/>Comic Sans Ms
<option value="Tahoma"/>Tahoma
<option value="Trebuchet Ms"/>Trebuchet Ms
<option value="Verdana"/>Verdana
</select>
<select onchange="go1()" style="font-family:verdana;font-size:8pt" name="select2" size="1">
<option value="8px"/>8
<option value="9px"/>9
<option value="10px"/>10
<option value="11px"/>11
<option value="12px"/>12
<option value="14px"/>14
<option value="16px"/>16
</select>
</form>

Jika Anda tahu berapa ukuran default blog anda, bisa menyelipkan tag "selected" pada option select, begitu juga type huruf

misalnya
<option value="12px" selected/>12
<option value="Trebuchet Ms"/>Trebuchet Ms

kemudian Save
semoga berhasil

Related Posts by Categories