Beranda Tentang Kami

Saturday, May 9, 2009

Cara Mengganti Font Blog ala Go-Blog Media

Sepintas kelihatannya tidak ada perubahan apa2 di blog ini selain jumlah posting yang semakin bertambah. Tapi coba perhatikan sekali lagi...jika sebelumnya rekan2 pernah nyasar kesini pasti tahu perubahannya. Iya...betul Go-Blog Media kini tampil dengan format font yang baru. Font sebelumya adalah "Georgia, Serif" sekarang saya ganti menjadi "Verdana, Arial, Helvetica, sans-serif" . "Georgia, Serif" merupakan defauld font untuk elemen body dari template Minima yang saya gunakan.

Ide untuk mengganti font ini saya lakukan karena saya merasa font lama kurang enak untuk dibaca, tidak rapi dan tidak menyatu dengan background. Coba perhatikan perbedaan font lama dengan font baru berikut. Dan simak bagaimana cara saya melakukannya.

Font lamafont lama


Font baru
font baru

Terlihat jelas bahwa font baru memberi kesan tulisan lebih enak dibaca, lebih rapi dari sebelumnya dan bisa menyatu dengan background (menurut saya, entah menurut rekan2). Untuk melakukan perubahan font pada elemen body sangat mudah sekali. Berikut langkah-langkah yang saya lakukan:
  • Login ke Blogger.com
  • Tata Letak > Edit HTML
  • Cari variable bodyfont, berikut:

    <Variable name="bodyfont" description="Text Font"
    type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">


  • Ganti font yang saya beri warna orange diatas dengan font berikut Verdana,Arial, Helvetica, sans-serif, sehingga menjadi seperti ini:

    <Variable name="bodyfont" description="Text Font"
    type="font" default="normal normal 100% Verdana,Arial, Helvetica, sans-serif" value="normal normal 100% Verdana,Arial, Helvetica, sans-serif">


  • Apakah sudah selesai? belum, saya perlu merubah tipe font pada tag CSS body. Scrol ke bawah dan cari kode CSS berikut:

    body {
    background:#ececec url(http://i553.photobucket.com/albums/jj375/karista1552/bg__main886.gif) top center repeat-y;
    margin:0;
    color:$textcolor;
    font:x-small
    Georgia, Serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }


  • Ganti tipe font berwarna orange diatas dengan font yang sama pada langkah sebelumnya sehingga menjadi seperti ini:

    body {
    background:#ececec url(http://i553.photobucket.com/albums/jj375/karista1552/bg__main886.gif) top center repeat-y;
    margin:0;
    color:$textcolor;
    font:x-small
    Verdana,Arial, Helvetica, sans-serif;
    font-size/* */:/**/small;
    font-size: /**/small;
    text-align: center;
    }


  • Simpan template kemudian refresh blog. Selesai.
Selamat mencoba

NS: Kepada para master blogger yang sedang membaca artikel ini, mohon memaklumi jika ada lesalahan. Maklum saya masih newbie.:D

Artikel terkait yang mungkin anda sukai



1 comment:

  1. Mas.. gimana caranya buat menubar kayak diatas.. saya coba tapi koq gaggalll

    ReplyDelete