03 March, 2012

Cara merubah design font template blogspot


Weh, weh weh google emang baik banget yah!, dengan produknya yang menyangkut postingan kali ini, yaitu bagaimana caranya merubah web fonts di blogger - blogspot.

apa itu font??

font - tulisan letter, atau bentuk dari huruf-huruf di blog anda. Atau font biasa juga di pakai dalam tulisan teks dalam sebuah komputer. Biasa font standart yang biasa di pakai adalah Arial, Times New Roman, Helvetica, Calibri, Comic Sans MS, Trebuchets MS.

Nah buat kamu yang ingin merubah font kamu menjadi, yang unik atau beda dari biasanya kamu bisa memanfaatkan Google web Font. Tutorial kali ini berkaitan dengan itu, jadi di mohon duduk dengan tenag dan jangan berisik (he he he kaya di perpustakaan aja).

Untuk membuat tutorial ini berhasil baca pelan-pelan dari atas sampai bawah, jangan sampai ada yang terlewat. Take slow don't be hurry.. oke ini dia..

Pertama-tama buka http://www.google.com/webfonts

KLIK Start Choosing fonts.

Nah pilih dech salah satu font yang nada minati dari semua daftar font.

Misalnya saya memilih Prosto One (atau pilih sesuai dengan pilihan kamu sendiri.
Jika sudah KLIK Quick-use.




Sudah .. good..

Nah ada 3 caranya yang pertama yaitu :

1. Choose the styles you want:

Saran sebaiknya gunakan normal 400 (dengan tanda centang), untuk memunculkan teks ini, walauoun memakan tempat untuk lama loading, cuma tenang tidak telalu lama, jadi tidak masalah.

2. Choose the character sets you want:

Dilewatkan saja tidak terlalu masalah, ikuti pengaturan yang sudah ada dari Google Web Fonts

3. Add this code to your website:

Nah tibalah pada bagian yang paling seru, menambahkan kode ke dalam html blogspot anda.

  • Login ke dasbor blogger
  • KLIK Template
  • Edit HTML --- Lanjutkan
  • Beri tanda centang pada Expand Template Widget
  • Letakkan kode link herf pada Standart tepat di bawah kode  <head> template kamu. Dan Simpan

Jika terjadi error pesan : Galat saat mengurai XML, baris 2713, kolom 5: The element type "link" must be terminated by the matching end-tag "".
Jangan panik karena kode tersebut membutuhkan penutup link.
Tambahkan kode "/" "garis miring" pada akhir kode.

Kira-kira jadi seperti ini akhiran kodenya.

Kode awal :
<link href='http://fonts.googleapis.com/css?family=Prosto+One' rel='stylesheet' type='text/css'> (tanpa penutup "/")
menjadi
<link href='http://fonts.googleapis.com/css?family=Prosto+One' rel='stylesheet' type='text/css' /> (dengan penutup "/")

sudah, Simpan template.

Selanjutnya cari kode

</head>

  • dan copy paste kode Javascript tepat di atas kode </head>.
  • dan SIMPAN template
  • Dan  terakhir, ubah pengaturan font css anda menjadi

font-family: 'Prosto One', cursive;

Perhatikan kode ini di letakkan di css template, pada bagian pengaturan font di template css kamu, biasanya ada pada

.body {font-family: 'Prosto One', cursive;}

Dan simpan template. Atau juga bisa dilihat cara yang di anjurkan oleh google di sini (https://developers.google.com/webfonts/docs/getting_started?hl=id-ID)

Oke seep, jadi beda sekarang penampilan font kamu, selamat mencoba.

Salam...

0 komentar:

Post a Comment


Copyright © 2016 Photoshop blog dan Blogger