Memasang Change Font This Blog di Blogger

Temen-temen bosan dengan tampilan huruf standar pada template yang dipakai? Nah, setelah sebelumnya saya menulis tentang cara memperbesar atau memperkecil huruf di blog, kini saya akan berikan satu lagi tutorial yang masih ada hubungannya dengan huruf, yaitu memasang change font di blog. Fungsi dari menu ini adalah untuk mengganti tampilan huruf yang ada di blog kita. Misalnya jika huruf yang kita pakai adalah Arial dengan memasang widget ini pengunjung dapat merubahnya dengan pilihan huruf yang ada di widget tersebut.

Untuk membuatnya sangat gampang, kita tidak perlu edit HTML, tinggal menambahkan kode javascript ini ke dalam widget. Oke, langsung saja pada cara-cara pembuatannya :

1. Pertama yang mesti dilakukan adalah login ke blogger.
2. Kemudian menuju Rancangan >> Tambah Gadget
3. Pilih HTML/Java Script
4. Lalu masukkan kode berikut ini ke dalam widget anda


1. <div class='widget-content'>  
2. <center><script>  
3. function go1(){  
4. if (document.selecter2.select2.options  
5. [document.selecter2.select2.selectedIndex].value != "none") {  
6. document.getElementById('main').style.fontSize  
7. =document.selecter2.select2.options  
8. [document.selecter2.select2.selectedIndex].value  
9. }  
10. }  
11.   
12. function go2(){  
13. if (document.selecter2.select3.options  
14. [document.selecter2.select3.selectedIndex].value != "none") {  
15. document.getElementById('main').style.fontFamily  
16. =document.selecter2.select3.options  
17. [document.selecter2.select3.selectedIndex].value  
18. }  
19. }  
20. </script>  
21. <form id="forma" name="selecter2" method="POST">  
22.   
23. <select onchange="go2()" style="font-family:verdana;font-size:8pt"  name="select3" size="1">  
24. <option value="Times New Roman" />Times New Roman  
25. <option value="Arial" />Arial  
26. <option selected value="Book Antiqua" />Book Antiqua  
27. <option value="Bookman Old Style" />Bookman Old Style  
28. <option value="Century Gothic" />Century Gothic  
29. <option value="Comic Sans Ms" />Comic Sans Ms  
30. <option value="Tahoma" />Tahoma  
31.   
32. <option selected value="Trebuchet Ms"//>Trebuchet Ms  
33. <option value="Verdana" />Verdana  
34. </select>  
35. <select onchange="go1()" style="font-family:verdana;font-size:8pt"  name="select2" size="1">  
36. <option value="8px" />8  
37. <option value="9px" />9  
38. <option value="10px" />10  
39. <option value="11px" />11  
40. <option selected value="12px" />12  
41. <option value="14px" />14  
42. <option value="16px" />16  
43. <option value="18px" />18  
44. </select></form><center></center></center>  
45. </div>  
5. Terakhir Simpan dan lihat hasilnya

Saya yakin temen-temen tidak ada yang kesulitan dalam membuatnya. Jika ada di antara temen-temen yang mempunyai cara yang lebih baru saya siap berbagi ilmu dengan anda. Selamat mencoba dan semoga bermanfaat.

Jangan lupa baca yang ini juga