Tutorial Tukar Font Dalam Blog Tanpa Install

Tuesday, September 27, 2011

Tutorial tukar font dalam blog tanpa install. Mungkin font yang sedia ada kurang menarik. Jadi, bolehlah kita tukar jenis font ikut pilihan kita sendiri. Caranya mudah je. Ikut tutorial mudah yang saya kongsikan di bawah ini.

1.Pilih font di web Google font API
nak pilih font click sini

[dalam ni ada banyak font tapi limited tak sampai beribu pun. Kau orang boleh pilih mana suka]
Contoh font yang  macam ni


2.Log in blogger>>Dashboard>>Theme>>Edit HTML>>Cari code <head>
*untuk memudahkan pencarian tekan cltrl+F serentak, kemudian masukkan code <head> dalam box pencarian tadi.

3.Copy code dibawah (klik sini untuk copy code)
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"/>

4.Paste di bawah code <head> tadi
*pastikan code Font+Name kau orang tukar nama font yang korang dah pilih tadi [yang saya bulatkan dalam gambar kat atas tu adalah contoh nama font]

5.copy code ni
font-family: 'Font+Name', arial, serif;
paste pada part yang korang nak tukar font

Page Text
cari code
body {

paste code
font-family: 'Font+Name', arial, serif;
selepas codebody {

contoh code yang dah siap
body {font-family: 'Font+Name', arial, serif; 

Tajuk Post entry
cari code
.post h3 {

dan paste di bawah code .post h3{
contoh

.post h3 { font-family: 'Font+Name', arial, serif;

Sidebar
cari code
.sidebar h2 {
paste kat bawah code .sidebar h2{
contoh
.sidebar h2 { font-family: 'Font+Name', arial, serif;

untuk part lain pun sama jugak. Cari code dan paste selepas tanda { dan pastikan tiada code font selain code font-family tu ye.

*jangan lupa code Font+Name perlu tukar kepada name font
font arial dan serif tu tak kisah nak letak font apa sebab tu 2nd and 3rd font yang akan appear kalau first font yang kau orang pilih tu PC tak dapat baca.

Kemudian preview. Kalau dah jadi dah puas hati,boleh save. Kalau masih tak puas hati atau tak jadi, re-check steps atau silap nama font atau coding. Selamat mencuba!

17 comments

  1. yeay! memang nak cari tutor ni.thanks!

    ReplyDelete
  2. Thanks kak fizah..mmg izzati nak cari tuto ni.. !!
    sayanglah kak fizah ! <3

    ReplyDelete
  3. tutorial yang sgt berguna..cayang kamu..muaahhhxxx...

    ReplyDelete
  4. xjadi pn..huhu
    sy da kopipes kod2 tu, step by step tp xjd...tolong sy ye.. :(

    ReplyDelete
  5. kenapa aina buat tak menjadi erh ? aina buat kat post title .. Tolonggg !

    ReplyDelete
  6. @Aina Johari Tempat aku..menjadi tapi..tak sesuai la..dengan blog aku..
    mari lah ..tengaok blog aku

    ReplyDelete
  7. Kenapa saya buat tak jadi ye? 'Font+Name' tu tanda tambah tu mmg kena ada ke macam mana. :/ rasa frust sangat...

    ReplyDelete
  8. yeah jumpa tutorial mudah ;)
    will cuba lepas ni. tq share fiza :)

    ReplyDelete

Segala komen-komen yang telah disiarkan adalah tanggungjawab sepenuhnya ke atas penulis itu sendiri. Pemilik blog tidak akan bertanggungjawab jika berlaku sebarang permasalahan berkaitan dengan komen yang disiarkan. Mana-mana komen yang berbentuk iklan, mengandungi link/url, mengandungi kata-kata maki hamun, soalan yang jawapannya terang lagi bersuluh ada dalam entri, atau tidak menyenangkan tidak akan disiarkan. Begitu juga dengan unknown profile. Harap Maklum.

Sekian Terima kasih.