Google Web Fonts.
Klik pada butang seperti diatas untuk lihat contoh dan untuk gunakan font berkenaan.
Selepas klik butang contoh tulisan akan dibuka seperti berikut:
Klik butang Use this font untuk gunakan font yang dipilih seperti di atas. Selepas klik Use this font kod font dan kod CSS akan diberi seperti berikut. Highlight dan salin kod font yang diberi:
Contoh font Dancing Script yang dipilih di atas berukuran 20px:
| the quick brown fox jumps right over the lazy dog |
Contoh kod font yang diberi:
| <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'> |
Kod yang diberi adalah jenis Self closing HTML yang tidak ditutup - sila tutup dengan satu palang (/) sebelum > dihujung kod seperti berikut:
| <link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css' /> |
jika tidak ditutup amaran kesalahan akan diberi semasa kod dimasukkan dan di save.
Cara menggunakannya.
Kod yang disalin akan dimasukkan ke dalam kod template blog. Log masuk dalam Blogger pilih Design | Edit HTML dan tandakan kotak Expanda Widget Templates:
Telusur cari dalam kod template blog tag </head> dan masukkan kod font sebelum tag </head> seperti berikut dan klik SAVE TEMPLATE:
Cara menggunakan font dalam pos blog:
Taip atau salin kod warna merah berikut sebelum dan selepas tulisan yang ditaip dalam pos blog.
| <span style="font-family: Dancing Script; font-size: 16px;"> ..... taip tulisan di sini ..... </span> |
Contoh guna untuk satu perenggan font Dancing Script ukuran 16px;:
| <span style="font-family: Dancing Script; font-size: 16px;">What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span> |
Hasilnya seperti ini:
| What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. |
Sekian, selamat mencuba dan selamat berjaya.
Sebarang pautan balik dari blog anda adalah sangat-sangat dihargai. URL http://calipso-tutorialblogger.blogspot.com/.
Salam hormat dari
3 comments:
salam,
sy dah try,
tp still tak jd,
nape ye?
:)
soalan:1)kena paste font code tu pd setiap tag <head> yg ada kan?
2)perlu ade spacebar ke antara </head><head> dgn font code tu?
hrp sedia mmbantu~
tQ~
;)</head>
honey, sorry panduan ni belum lengkap sebenarnya ada dua tiga perkara tertinggal.
1. kod font yang dia bagi kena tutup dengan palang hujungnya sebelum ">".
2. kod yang nak guna dalam pos tu kena masukkan nama font yang digunakan pada font-family: Tangerine; misalnya kalau font Lobster kod tu jadi "font-family: Lobster;".
3. Saiz dia 28px; boleh pinda tengok kesesuaian bila dia keluar dalam pos blog.
kesilapan telah diperbetulkan...
@hanys
sorry hanys soalan awak tidak dijawab dengan tepat...
dalam kod template blog cuma ada SATU SAHAJA kod </head>. Gunakan Ctrl F untuk cari dia...
paste masukkan kod font tu sebelum </head>.
Post a Comment