Mas Sehat | Blog Tentang Kesehatan | Mas Sehat ~ Blog Tentang Kesehatan | www.mas-sehat.com

Cara Menambah dan Mengganti Font di Blog

Pasti banyak blogger yang memakai costum template/bukan template bawwan blogger dan tidak merasa nyaman dengan font yang formal dan ingin menggantinya dengan font yang lebih menarik. Sebenarnya ini sangat mudah jika template blog anda dilengkapi fungsi variabel untuk mengganti font. Lalu bagaimana jika template blog anda tidak dilengkapi dengan variabel itu?

cara menambah dan mengganti font di blog




Kebanyakan template hasil download tidak bisa diedit di perancang template. Jadi untuk mengganti fontnya, anda perlu melakukan hal-hal sederhana berikut:

MEMILIH JENIS FONT

  • Buka halaman http://www.google.com/fonts/#
  • Sebaiknya anda set dulu ukuran fontnya untuk melihat tampilan font tersebut dalam ukuran yang anda inginkan. Pilih ukuran huruf dalam drop down size.




  • Jika jumlah font terlalu banyak, anda bisa memperkecil opsi dengan melakukan filter pada jenis font. Lihat pada sidebar kiri ada serangkaian alat filter. Pilih type font, ketebalan, kemiringan, dan lebar huruf.
  • Jika anda sudah menemukan huruf-huruf yang anda sukai tinggal klik ADD TO COLLECTION pada bagian kanan bawah sampel huruf. Silahkan pilih lebih dari satu huruf jika diperlukan
Jika anda sudah selesai memilih huruf silahkan klik USE

  • Anda akan dialihkan ke halaman baru. Pada halaman baru ada 3 hal yang harus anda lakukan
  • Pertama, pilih jenis ketebalan huruf yang diinginkan. Semakin banyak variasinya, maka akan semakin berat loading halaman anda nantinya

  • Kedua, pilih language style yang diinginkan. Saran saya tidak usah mengubah bagian yang ini


  • Ketiga, copy kode yang diberikan untuk dipasang di blog

selesai.


sekarang kita bahas cara Mengganti Font Pada Blog
Jika sudah menyelesaikan tahapan di atas sekarang masuk ke akun blogger anda........
  • Pilih menu TEMPLATE lalu EDIT HTML
  • Cari kode  <![CDATA[/* dan paste kode yang tadi anda copy
  • Jangan lupa untuk menambahkan kode / sebelum penutup > pada kode tersebut. Hasilnya akan terlihat seperti contoh di bawah
<link href='http://fonts.googleapis.com/css?family=Cinzel+Decorative:400,700,900|Julius+Sans+One|Cherry+Swash:400,700' rel='stylesheet' type='text/css' />
  • Simpan Perubahan



Mengganti Semua Font
Misalnya, anda ingin mengganti semua font Arial dengan font baru bernama BenchNine....
  • Masuk ke menu TEMPLATE >> EDIT HTML
  • Centang Expand Template Widget
  • Copy semua kode yang muncul
  • Buka notepad dan paste kode yang dicopy tadi
  • Tekan Ctrl+H untuk membuka Tool Replace
  • Isi kolom Find What dengan Arial
  • Isi kolom Replace With dengan BenchNine
  • Klik tombol REPLACE ALL
  • Copy kode yang sudah berubah tadi.
  • Hapus semua kode pada blogger Edit HTML tadi dan gantikan dengan kode dari notepad
  • Simpan Perubahan

Mengganti Font Elemen Tertentu Saja

Di sini anda bisa menggunakan Edit HTML, atau Fitur ADD CSS pada Perancang Template
Kali ini saya akan menggunakan Add CSS saja. Jadi silahkan ikuti contoh berikut:
Setelah jendela Add CSS terbuka, silahkan pilih element yang ingin anda ganti.
Kali ini saya akan mengganti element h2 normal, h2 link, dan h2 link:hover pada postingan blog saya. Jadi inilah kode yang akan saya ketikkan pada kolom Add CSS...
.post h2 {font-family: BenchNine;}.post h2 a, .post h2 a:visited, .post h2 strong {font-family: BenchNine;}.post h2 strong, .post h2 a:hover {font-family: BenchNine;}
  • Simpan Template 

font-family: NamaFont; adalah kode yang perlu anda tambahkan pada elemen style apa saja yang ingin anda ganti font-nya. Bagian terpentingnya adalah mengetahui nama elemen yang ingin anda ganti. Kalau anda sama sekali belum tahu nama elementnya, maka anda harus masuk ke Edit HTML untuk menemukan nama elemen style yang mengendalikan suatu komponen pada template anda.

Oke selesai deh . sekian tips dari saya cara menambah dan mengganti font di blog semoga bermanfaat :)
Terima kasih telah membaca artikel tentang Cara Menambah dan Mengganti Font di Blog di blog Hana Mangat™ jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Artikel terbaru :

Mas Sehat | Blog Tentang Kesehatan | Mas Sehat ~ Blog Tentang Kesehatan | www.mas-sehat.com