Langsung ke konten utama

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.
Label:

Komentar

  1. Awaldi Rahman13 Januari 2016 pukul 03.11

    Hmmm bisa dicoba lain waktu nih untuk mengganti jenis font blog.
    Terima kasih infonya sudah dibagi, Mas.

    BalasHapus
  2. Wahab Saputra13 Januari 2016 pukul 05.42

    Simpel juga ya mas...gak pake ribet

    BalasHapus
    Balasan
    1. Andi Mariadi13 Januari 2016 pukul 11.49

      Iya mas... Cukup simple kok mas
      Karena kita cuma ngambil url font gak upload sana upload sini ... :)

      Hapus
  3. Qaedi14 Januari 2016 pukul 19.12

    udah ane coba mas , caranya :)

    BalasHapus
    Balasan
    1. Andi Mariadi14 Januari 2016 pukul 20.29

      Terima kasih mas didie sudah membaca tutorial mengganti font pada blogger.
      Semoga fontnya ada yang sesuai ya mas didie :)

      Hapus

Posting Komentar

Komentar dan Kritik kawan diperlukan agar dapat membangun pemula belajar kedepannya. Terima Kasih

Postingan populer dari blog ini

Tutorial Lengkap Membuat Short Link Sendiri Dengan PHP Mysql

Hallo kawan, berjumpa lagi nih sama toturial www.pemulabelajar.com. Kali ini kita akan membahas cara membuat short link sendiri . Pernah dong kawan menjumpai namanya short link, contoh sederhananya saja goo.gl . goo.gl akan membuat url site kita menjadi lebih pendek misalnya saja : http://www.pemulabelajar.com bisa menjadi goo.gl/Jiahs . Begitu juga tutorial kita membuat short link kali ini. Karena membuat short link kita sekarang menggunakan PHP Mysql maka kawan disarankan untuk membuat hosting untuk website yang akan dijadikan website short link kita sendiri, kawan bisa menggunakan layanan gratis seperti 000webhosting.com atapun idhostinger.com (recomended) selain gratis, pembuatan databasenya juga termasuk mudah dan juga tutorialnya sangat banyak digoogle kalau ada waktu saya akan membuatkan tutorial membuat hosting gratis untuk kawan. Membuat Short Link Saya anggap saja kawan sudah membuat hosting disalah satu tempat hosting diatas. Maka langkah a...
28 komentar
Baca selengkapnya

Belajar Power Design - Cara Membuat Project Menjadi Gambar

Cara Membuat Project Menjadi Gambar - Artikel ini akan membahas sedikit tentang Power Design dan Bagaimana merubah project power design menjadi sebuah gambar . Masalah ini sering dialami oleh pemula khususnya saya yang bingung bagaimana merubah sebuah project power design menjadi berupa gambar agar mudah dimuat ke sebuah karya tulis. Baca juga : Membuat Teks Rotasi Dengan Photoshop Apa itu Power Design ? Power design adalah sebuah paket program desain tools yang digunakan untuk membuat Visualisasi, dokumentasi dan mendesain suatu sistem perangkat lunak. Paket ini meliputi Process analyst Model (PAM), Data architect tools, Aplication modeler tools, dan Metawork tools. Power Design ini juga sering digunakan menjadi software untuk membuat Diagram Flow Diagram atau DFD . Bagaimana Merubah Project Menjadi Gambar ? Untuk merubah sebuah project pada power design menjadi sebuah gambar cukup mudah. Secara singkatnya kawan cukup memilih semua object yang akan dijadikan sebuah gambar, s...
Posting Komentar
Baca selengkapnya

Belajar Web - Membuat Website Responsive CSS

Sebelum kita meneruskan tutorial selanjutnya yaitu Belajar Membuat Website Responsive baiknya kita pelajari terlebuh dahulu apa aja yang akan kita bahas. Karena yang akan kita bahas selanjutnya adalah responsive web, maka diwajibkan mengerti fungsi script css yang ada di Belajar Desajn Website di html / php toturial sebelumnya. Apa itu float ? Apa itu width ? Apa itu height ? Apa itu clear: both ? Responsive ini memakai @media(max-width) atau @media(min-width) yang memiliki arti lebar maximal style dan lebar minimal yang kita masukkan di dalam @media tersebut. Sebelum memperlajari responsive menu sebaiknya lita pelajari dulu float, clear dan lain-lain. Karena @media tersebut hanya mengganti script css dari css global. Apa itu css global ? Nanti anda penjelasannya masing-masing. Apakah anda sudah ngerti dengan coding css diatas ? Jika belum, ada baiknya anda harus pelajari dulu scriptnya di toturial sebelumnya. Cara memperbaiki jika terjadi error atau kesalahan penulidan pada d...
Posting Komentar
Baca selengkapnya