Memasang Pengatur Style Dan Ukuran Font

Memasang Pengatur Style dan Ukuran Font Pada Blog. Ketika membaca artikel atau postingan blog, masing-masing pengunjung mungkin mempunyai kebiasaan atau selera yang berbeda-beda terhadap style font (huruf) serta ukurannya. Ada sebagian pengunjung yang lebih cocok dengan huruf dengan ukuran yang lebih besar karena mungkin alasan penglihatan yang kurang. Sebagian yang lain mungkin lebih senang dengan ukuran yang lebih kecil karena mungkin tidak perlu sering-sering melakukan scroll.

Begitu juga dengan dengan style fontnya, ada sebagian pengunjung yang lebih menyukai style font “Roman” sementara pengunjung yang lain mungkin lebih menyukai font “Arial”. Sehubungan dengan hal tersebut, kita dapat memasang widget pengatur Ukuran dan Style Font yang dapat kita letakkan pada sidebar.

Dengan widget pengatur tersebut diharapkan akan dapat memberikan keleluasaan kepada pengunjung untuk memilih dan menetapkan ukuran maupun style font sendiri sesuai dengan selera dan kebiasaan masing-masing. Khusus untuk ukuran font, sebenarnya beberapa browser, seperti Firefox, SeaMonkey, Opera telah memberikan pilihan kepada user untuk menentukan ukuran font melaui menu [Tampilan]>>[Perbesaran] namun kurang praktis jika dibandingkan dengan widget yang akan kita pasang tersebut.

Memasang widget ini sangat simple dan mudah, kita hanya perlu menambahkan gadget kemudian copy paste kode yang akan saya berikan berikut ini.

Berikut langkah-langkah rinci untuk memasang widget pengatur style dan ukuran font dimaksud.

Pertama, login ke account blogger hingga masuk [Dasbor] >> [Tata Letak] >> [Tambah Gadget] >> [Tambahkan HTML/Javascript]
Kedua, copy paste kode berikut ini.

<center>
<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 selected 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 selected value="12px"/>12
<option value="14px"/>14
<option value="16px"/>16
<option value="18px"/>18
</select>
</form>
</center>

Ketiga, simpan perubahan
Keempat, selesai

Jika script pengatur font tersebut tidak berjalan dengan baik, lakukan pengeditan kode css post pada template blog, caranya sebagai berikut.

Pertama, Masuk Dasbor >> Tata Letak >> Edit HTML
Kedua, temukan kode css .post, seperti berikut ini.

.post {
margin:.3em 0 25px;
padding:0 13px;
border:1px dotted $borderColor;
font-family: Verdana;
border-width:1px 0;
}

Ketiga, hapus kode css “font-family” (yang bercetak tebal) di atas. Kode css tersebut bisa seperti “font-familiy : Arial” atau “font-family : Times New Roman”, dan lain-lain.

Keempat, simpan template
Kelima, selesai.

Contoh hasilnya, silakan dilihat pada sidebar sisi kanan blog Bisnis Internet.

Selamat Mencoba!!

(sumber : Trik-tips Blog)