Kamis, 06 Oktober 2011

Penggunaan Google Font API di Blogger

font_api Hal ini sebenarnya sudah pernah saya jelaskan sebelumnya pada artikel Tutorial Penggunaan Google Fonts, namun kebetulan ada yang bertanya mengenai font yang saya gunakan di blog ini jadi tidak ada salahnya saya tulis kembali tutorial ini. Font yang saya gunakan di blog ini adalah Droid Sans, bagi yang belum mengerti silahkan baca kembali postingan saya yang lalu mengenai google fonts. Jika sobat ingin menggunakan font yang lain, silahkan kunjungi langsung Google Web Fonts.

 

Pada halaman depan, silahkan sobat sorting saja berdasarkan Popularity.

shorting popularity

 

Setelah itu sobat bisa melihat font yang paling banyak digunakan termasuk 'Droid Sans' yang juga saya gunakan di blog ini, pilih font yang sobat suka dan klik Add to Collection.

add to collection

 

Jika ingin melihat bentuk tulisan dalam format Paragraph atau Headline, sobat bs klik Review pada tab button yang ada dibagian kanan bawah.

review

 

Kemudian untuk tahap terakhir, silahkan klik tab button Use pada bagian kanan bawah. Sobat akan mendapatkan kode untuk font yang sebelumnya sudah sobat pilih.

kode script

 

Jangan lupa untuk menambahkan tanda [ / ] di akhir kode sehingga menjadi seperti berikut :

 

Tahap selanjutnya memasukkan kode tersebut ke dalam template blogger, silahkan login ke blogger.

  1. Klik Rancangan
  2. Kemudian klik Edit HTML
  3. Tambahkan kode tersebut sebelum kode , sehingga menjadi seperti :

  4. Cari kode css untuk body, contohnya seperti berikut :
    body {
    width: 980px;
    background: #FFF;
    font-size: 13px;
    font-family: 'Droid Sans', verdana, arial;
    text-align: left;
    color: #000;
    margin: 0 auto;
    padding: 0;
    }
  5. Perhatikan huruf yang saya tebalkan, itulah kode css yang harus sobat tambahkan.

Kode css tersebut sengaja saya letakkan dibagian body, sehingga font seluruh isi blog akan berubah menjadi Droid Sans. Jika sobat menemukan kode font : verdana, arial, trebuchet ms dan sebagainya dibagian css yang lain silahkan hapus saja, misal seperti ini :

 

.post {
text-align: left;
background: #FFF;
font-family: arial, verdana;
border: 1px solid #CCC;
margin-bottom: 10px;
padding: 10px 10px 0;
}

 

Baiklah selamat mencoba, semoga bermanfaat !

Penggunaan Google Font API di Blogger Rating: 4.5 Diposkan Oleh: dragon
Terima kasih sudah berkomentar