Cara Merubah Jenis Font Pada Judul Blog

Bagi sahabat blogger yang merasa tampilan blognya kurang menarik dikarenakan gaya atau style pada judul postingan terlihat membosankan maka kali saya akan memberitahukan bagaimana cara agar dapat mengganti jenis font pada judul blog sahabat.

penerbit imtiyaz animated-fonts

Ikuti toturial berikut ini:

1. Buka Edit HTML/Template Blogger. 
 
2. Cari elemen CSS yang ingin di ubah, letaknya antara <b:skin><![CDATA[ dan ]]></b:skin> 
 
3. Setiap elemen CSS di template Blogger memiliki nama berbeda sesuai yang telah diberikan oleh pembuatnya, tapi secara umum, nama-nama itu hampir mirip dan memiliki deklarator umum yang sama: 
 
Misalnya: Untuk elemen judul posting, biasanya dituliskan dengan .post h3, .post h2, #post h3, #post h2, .h3, .h2, (h menyatakan header atau judul/title, berlaku pula untuk judul sidebar, dll), dan masih banyak lagi. Untuk isi posting biasanya dinyatakan dengan .post. Demikian dengan sidebar, ada banyak variasi namun dapat dipastikan semua mengandung kata yang sama: sidebar. 
 
3. Setelah menemukan element yang dicari, selanjutnya cari property font-family atau fontyang di belakangnya ada definisi font atau nama variable seperti contoh variable diatas. Ganti dengan jenis-jenis font baru pada bagian tersebut.

Contoh: 
 
.post h3 {font-family: Georgia, times, serif;...;}
 
Ganti bagian font yang berwarna merah dengan font-font lain.
atau biasanya juga ditampilkan dengan nama variable: 
 
.post h3 {font-family:  $postTitleFont;}
 
Ganti bagian font yang berwarna merah dengan font-font lain. 
 
4. Anda juga dapat menambahkan jenis font baru pada elemen yang belum memiliki aturan font-family. 
 
Misalnya. bagian comment blog saya belum memiliki aturan jenis font khusus, maka saya dapat menambahkan font-family/font di dalam aturan CSS-nya:

Sebelumnya: 
 
#comments {margin: 0px 0px 0px 0px; padding: 15px 20px 15px 20px; text-align: left; color: #4c4c4c; border: 1px solid #ccc;background:#fff;}

Sesudahnya:
 
#comments {margin: 0px 0px 0px 0px;padding: 15px 20px 15px 20px; text-align: left; color: #4c4c4c; font: "Times New Roman", Trebuchet, Serif; border: 1px solid #ccc; background:#fff;}

5. Untuk mengetahui jenis-jenis font, cek CSS Web Safe Fonts.

6. Jika telah selesai mengubah atau menambah font, save template 


Terima kasih telah berkunjung di blog Juned al~Bughisy.blogspot.com

12 komentar:

  1. makasi,,artikelnya bermanfaat sekali

    BalasHapus
  2. Gan, Join Balik dong di http://bayu-oversoul.blogspot.com/

    BalasHapus
  3. Oke gan... terima kasih udah join... :)

    BalasHapus
  4. Thanks gan infonya bermanfaat sekali
    Visit Balik dong di http://novaibnu.com/

    BalasHapus
    Balasan
    1. sama-sama gan oke tak kunjung balik

      Hapus
    2. halaman blognya tidak ditemukan gan

      https://lh5.googleusercontent.com/pyjBNaFu9HUjwkHR9QDXGMWwyvVh7YKZxCVWAp1GfXg=w514-h207-p-no

      Hapus
  5. Jenis font macam-macam jg gan, dicoba dlu gan di blogspot ane....

    Baca juga Info Komunitas Online Megapolitan => Infonitas.com

    BalasHapus
  6. Terimakasih banyak gan, sangat bermanfaat sekali tutorialnya..

    http://obatasliindonesia.com/pengobatan-glaukoma-paling-mujarab/

    BalasHapus
  7. makasih infonya sangat membantu.

    visit http://kitchen4news.blogspot.com

    BalasHapus
  8. makasih mas informasinya, pusing nih cari di html'nya ;-(

    BalasHapus
Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top