Tutorial - Cara Mengganti Sebagian Font di Postingan Blog

Hello gaes.. Disini aku akan memberikan tips cara untuk mengubah sebagian Font di postingan blog.
'Lah udah banyak gan di Google !'

Yap emang udah banyak.. Tapi rata-rata mereka mengubah tampilan Font untuk seluruh postingan.. Bukan untuk kata atau kalimat tertentu dalam suatu postingan..

Sebenernya aku ingin nambah opsi font di bagian sini



Tapi aku cari-cari tutorialnya belum ketemu.. Mungkin kalo yang ada atau udah ketemu caranya bisa kasih tau hehe..

Nah yang mau aku bikin itu custom font kayak gini



Nah caranya gampang...
1. Pertama kamu tulis dulu semua tulisan yang mau kamu tulis di postinganmu.. Jangan terlalu terburu-buru ngedit-ngedit penampilan atau rata kiri rata kanan atau bold segala macem dah pokoknya tulis dulu..

Kenapa ? Nanti dijelasin dibawah..

2. Setelah kamu selesai menulis saatnya menentukan kalimat mana yang mau diubah Fontnya terus masuk ke mode HTML. Contohnya seperti gambar dibawah ini. Aku mau mengganti 'Ini Tulisan yang mau diubah'



3. Nah setelah masuk ke mode HTML muncul tampilan seperti berikut. Bagian yang dilingkari adalah Tulisan yang akan kita ubah




4. Di depan tulisan yang kita ubah diberikan tambahan
<font face='Font Pilihanmu'> Teks yang mau kamu ubah </font>

Contoh kita membuat tulisan tersebut menjadi Font Lucida Calligraphy


5. Nah saatnya kita cek lewat Preview apakah benar-benar berubah





Yay dan ternyata telah berhasil diubah...
Dan jangan kaget ketika kita kembali ke bagian editting HTML menemukan 'kodingan' kita seperti ini


Hal seperti ini bisa terjadi karena dari blogger ini sendiri meng-generate tulisan kita sesuai dengan style bawaannya. Nah ini juga bisa menjadi salah satu cara lainnya untuk mengubah font tertentu

<span style='font-family: Font Pilihanmu;'> Teks yang mau kamu ubah fontnya</span>

Q : 'Gan petik 1 atau 2 ga masalah tuh?'
A : 'Ga masalah kok gan..'

Q : 'Gan kalo mau banyak tulisannya gimana?'

Nah ini...sama seperti cara diatas kok
Contoh yaaa.. Inget tulis dulu semuanya :


Masuk ke HTML mode





Ini yang mau kita ubah yaa tinggal tambahin kayak tadi aja di mode HTML

1. Bisa pake <Font Face='Font Pilihanmu'> di awal tulisan yang mau kita ubah dan jangan lupa diakhiri dengan </font> di akhir tulisan yang mau kamu ubah


2. Bisa juga pake <span style='font-family: Font Pilihanmu;'>  yang diakhiri dengan </span> di akhir teks yang mau kamu ubah


Hasilnya?


Yay berhasil !!!


Q : 'Kalo misal mau beda beda fontnya gimana gan?'
Aga repot sih tapi masih sama kok
Contoh ya mau bikin baris pertama dan kedua pake font Lucida Calligraphy dan baris ketiga dan keempat pake font Bad Script


Nah tinggal diganti seperti ini



Kalo pake <font face juga sama


Intinya :
Kalo pake span :
<span style='font-family: Font1;'>teksmu</span>
<span style='font-family: Font2;'>teksmu selanjutnya</span>

Kalo pake font face :
<font face='Font1> teksmu </font>
<font face='Font2>teksmu selanjutnya </font>

Hasilnya seperti ini gan :





Penutup

Nah sekarang kita bahas kenapa harus tulis semua dulu baru ngedit-ngedit..
Alasannya :

1. Misal kita mau nambah tulisan lagi setelah ngehias-hias di HTMLnya



Nah saat kita masuk ke mode HTML
Dia rempong banget bloggernya otomatis nge span per kalimat




Emang sih otomatis tapi misal kalo kita mau tulisan selanjutnya pake font biasa kan repot malah harus ngehapus-hapus lagi...
Belum kalo misal mau balik ke biasa


Wolah tambah bingung toh apa itu inherit-inherit


Belom kalo ketambahan rata kanan kiri



Wolah apaan ini semua

Kan jadi mumet misal selanjutnya kita mau ngedit-ngedit tulisan.. Soalnya dari bloggernya nge-generate sendiri
Tiap baris dia kasih span span gitu padahal bisa dilihat sendiri cuma spasi enter doang kan yang <br /> itu doang dia kasih span buat font custom

Jadi cara terbaik adalah :
1. Tulis dulu semuanya
2. Baru mulai editting tulisanmu

Tujuannya biar ga pusing ntar pas liat HTML soalnya masih rapih dan pertama kali ngedit jadi lebih mudah

Selamat mencoba~


Previous
Next Post »