susi hariyanti

Welcome

Komunitas Blogger Universitas Sriwijaya

Cara mengganti style font judul posting di Blogger menggunakan Google Web Font

Kategori: Welcome
Diposting oleh susiblog pada Kamis, 05 April 2012
[338 Dibaca] [1 Komentar]Post to TwitterPost to Facebook

Cara mengganti style font judul posting di Blogger menggunakan Google Web Font

Telah dibaca 1,649 kali

Jika punya blog di Blogger yang menggunakan template default, kita bisa menggunakan Template Designer untuk mengubah style font header. Tetapi fitur ini tidak bisa digunakan jika kita menggunakan custom template.

Lantas, bisakah kita mengganti style font header kalau menggunakan custom template? Bisa. Silahkan simak tutorial tentang cara mengganti style font judul posting di Blogger menggunakan Google web font ini.

Caranya begini:

  • Bukalah Google Web Font, lalu pilih font mana yang disukai.
  • Bila kita mengarahkan kursor pada salah satu font tersebut akan muncul teks "Click here to embed…." . Misalnya saja kita pilih jenis font Indie Flower.

FastStoneEditor Cara mengganti style font judul posting di Blogger menggunakan Google Web Font

  • Klik saja font tersebut, lalu akan muncul jendela baru. Klik lagi tab Use this font.

FastStoneEditor Cara mengganti style font judul posting di Blogger menggunakan Google Web Font

Perhatikan dua baris kode dalam kotak screenshot di atas. Baris kode pertama seperti ini: <link href=’http://fonts.googleapis.com/css?family=namafont‘ rel=’stylesheet’ type=’text/css’>

Baris kode kedua h1 { font-family: ‘xxxx’,xxxxx; } , dimana ‘xxxx’ adalah nama font yang kita pilih dan xxxxx adalah nama font bawaan template CSS-nya. Sebenarnya ini hanyalah contoh kode yang akan kita terapkan di blog jika ingin mengubah style font h1 tag.

Sekarang cara memasukkan kode ke blog kita begini.

  • Masuk ke akun Blogger, ke Dashboard > Design > Edit HTML > centang Expand widget templates.
  • Copy kode pertama tadi, kemudian paste-kan sebelum kode ini <b:skin><![CDATA[/* . Jangan lupa tambahkan slash (/) pada akhir baris. Jadinya begini <link href=’http://fonts.googleapis.com/css?family=namafont‘ rel=’stylesheet’ type=’text/css’/> . Jika lupa menambah tanda slash nanti akan muncul notifikasi error.

FastStoneEditor Cara mengganti style font judul posting di Blogger menggunakan Google Web Font

  • Berikutnya cari kode ini h2.postTitle { . Ini adalah kode h2 tag untuk judul posting. Ketikkan nama font yang tadi telah dipilih di urutan pertama pada baris font-family. Jadi penulisannya seperti ini font-family: ‘Indie Flower’ , arial, serif;. Lihat screenshot di bawah.

FastStoneEditor Cara mengganti style font judul posting di Blogger menggunakan Google Web Font

  • Jangan lupa klik Save.
  • Cobalah buka blog Anda.

Cara seperti ini bisa diterapkan untuk mengganti style font h1 tag, atau h2, h3, dan seterusnya. Kita hanya perlu menyesuaikan style dan ukurannya saja.

Selamat mencoba.

Artikel yang terkait:

  1. Cara mengganti favicon Blogger
  2. Belajar Dasar SEO 6 : Membuat tag heading judul blog berbeda dengan tag heading judul artikel
  3. Mengatasi error Xmlrpc saat posting menggunakan Windows Liver Writer
  4. Memecah artikel posting menjadi beberapa halaman dengan GT Tabs
  5. Cara membuat dan menggunakan circle di Google Plus
  6. Memasang meta description otomatis di setiap artikel posting di blogspot
  7. Menggunakan Filezilla untuk mengelola blog WordPress (1) : Cara menggunakan Filezilla
  8. Mengatasi error 1907: ‘Could not register font’ saat instalasi Microsoft Office 2010
  9. Navigasi Google+ : Lebih cepat menggunakan shortcut
  10. Membuat iklan Google Adsense sendiri


PDF | DOC | DOCX


Komentar:

14 Mei 2012 pukul 02:56 WIB
Dede Rukmana mengatakan...
Terima kasih mbak, segera saya praktekan smile


Kirim Komentar Anda:

Nama Anda (wajib diisi) E-Mail (tidak dipublikasikan) http:// Website, Blog, Facebook, dll (wajib diisi)


<-- isi kode di atas (wajib diisi)

grinLOLcheesesmilewinksmirkrolleyesconfused
surprisedbig surprisetongue laughtongue rolleyetongue winkraspberryblank starelong face
ohhgrrrgulpoh ohdownerred facesickshut eye
hmmmmadangryzipperkissshockcool smilecool smirk
cool grincool hmmcool madcool cheesevampiresnakeexcaimquestion

widgets