Mengubah Font di blog sesuai Keinginan Pembaca

Setelah browsing dari dunia maya, akhirnya dapat juga cara untuk merubah font di blog kita, dan bagusnya lagi ( menurutku lho....) pembaca dapat merubah font sesuai keinginan mereka karena di sediakan beberapa pilihan. Saya juga telah mengimplementasikannya di blog ini. (lihat menu change font)

Langsung saja ya, bagaimana cara membuatnya:

1. log in ke blogspot anda
2. masuk ke bagian layout > Page element > Add a gadget
3. pilih gadget berjenis HTML/JavaScript
4. Isikan kode berikut:
   
   <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>
   
   
   


5. kemudian OK dan lihat hasilnya

Jika kode di atas tidak berfungsi dengan baik, lakukan langkah tambahan berikut:

1. masih di Layout, pilih Edit HTML
2. Cari tulisan .post {
   misalnya kodenya seperti di bawah ini (mungkin ada beberapa template yang berbeda, hapuslah yang bertulis font-type:....., font-size:......):
   
   .post {
   margin:.5em 0 1.5em;
   border-bottom:1px dotted #cccccc;
   padding-bottom:1.5em;
   font-type:arial, verdana;
   font-size:12px;
   }
   
   hapus yang di cetak merah, tetapi sebelum itu backup dahulu template anda untuk menghindari hal- hal yang tidak di inginkan.

semoga berhasil.



.

Artikel Terkait