Rabu, 13 Januari 2016

Cara Merubah Font / Tulisan Pada Blogger atau Website

Saat berkunjung pada sebuah website ataupun blog apakah kawan pernah melihat font atau bentuk font / tulisan setiap blog akan berbeda-beda, ada yang standar (Arial) ada juga yang miring kiri, miring kanan. Terdapat banyak pilihan font untuk kita tinggal kita bisa-bisa saja memilih yang mana bagus dilihat oleh pengunjung dan yang mana membuat pengunjung susah membaca.


Ada sebuah alasan kenapa saya menulis artikel tentang Tutorial Merubah Font / Tulisan Pada Blogger atau Website. Ya, karena kawan pasti tidak mau jika kita sudah berjam-jam menulis sebuah artikel misalnya tentang PHP ataupun tentang HTML tapi pengunjung enggan membacanya karena jenis font kawan susah untuk dibaca. Jika pengunjung anak muda yang tidak mengalami masalah mata maka font apa saja bisa dilihat, tapi bagaimana jika orang yang mengalami masalah mata ?

Merubah Jenis Font di Blog atau Website

Nah dari masalah diatas itulah maka disini kita akan berlajar mengenai Tutorial Merubah Font / Tulisan Pada Blogger atau Website, mari kita langsung saja praktekan.

1. Link Font

Pada tutorial ini kita akan menggunakan font yang sudah disediakan oleh Google Font. Buka https://www.google.com/fonts/. Setelah kawan membuka alamat tersebut maka kawan akan disuguhkan sebuah contoh tulisan yang dibuat oleh font tersebut.

2. Pilih Font

Jika kawan sudah menentukan font mana yang akan kawan pakai untuk website kawan maka langkah selanjutnya adalah dengan mengklik tombol Quick-Use. Lihat Gambar

3. Pilih Ketebalan

Jika kawan sudah mengklik Quick-use maka kawan akan menjumpai sebuah pilihan menentukan ketebalan font yang kawan pakai nanti. Disini saya akan memakai ketebalan normal saja. Lihat Gambar

4. Salin Link Font

Jika kawan sudah menentukan ketebalan tulisan sekarang kawan geser kebawah maka akan mendapati sebuah link untuk font tersebut. Lihat gambar

5. Letakkan Link

Setelah mendapatkan link seperti gambar diatas maka langkah selanjutnya adalah kawan letakkan link css tersebut diatas kode <b:skin>. Kenapa harus diatas <b:skin> ? Supaya nanti jika akan merubah kode font lain bisa memudahkan kita menghapus link css tersebut. Saya anggap kawan sudah meletakkannya. Next -
Tips: Setelah meletakkan kode tersebut jangan lupa untuk menaruh / (garis miring) sebelum tanda >. Lihat contoh (tanda merah)
Sebelum
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

Setelah meletakkan kode tersebut maka akan menjadi seperti dibawah ini.
Sesudah
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css' />

6. Edit kode CSS body

Selanjutnya kawan hanya tinggal merubah font-family di body seperti yang diinstruksikan pada website tadi (baca: https://www.google.com/fonts/ ). Kawan bisa melihat gambar dibawah ini.

Setelah menyalin kode diatas langkah kawan tinggal masukkan kode yang terdapat diwebsite kedalam body { ..... } yang terdapat di <b:skin>. Kawan bisa melihat contoh seperti dibawah ini.
kode body
body {
    font-family: 'Lato', sans-serif;
}

Simpan template kawan dan coba lihat blog kawan apakah sudah berubah atau belum. Jika belum berubah mungkin ada kesalah step-step diatas atau jika masih kesulitan bisa bertanya pada kolom komentar dibawah.
Untuk website caranya hampir sama karena kita hanya mendapatkan link css tersebut dan meletakkannya didalam tag <head> dan menaruh kode css seperti pada tahap nomor 6.

Terima kasih telah membaca sebuah artikel Cara Merubah Font / Tulisan Pada Blogger atau Website. Baca lebih banyak lagi artikel tentang PHP atau tentang HTML pada website ini. Dan jangan lupa untuk berbagi yang ada dibawah judul artikel ini. Jika masih ada kesulitan tentang penerapan PHP pada website bisa menggunakan komentar dibawah. Salam.