Sunday, 25 May 2014

Cara Menambah Dan Mengganti Font di Blog

"Cara Menambah Dan Mengganti Jenis Font di Blog"


   Banyak blogger yang tidak merasa puas atau kurang puas 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?

   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/webfonts/ untuk memilih font yang anda inginkan.
  •     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 2 hal yang harus anda lakukan

  •         Pertama, pilih jenis ketebalan huruf yang diinginkan. Semakin banyak variasinya, maka akan semakin berat loading halaman anda nantinya


  •    Kedua, copy kode yang diberikan untuk dipasang di blog


 Menambahkan Font Pada Blog

  •     Jika sudah menyelesaikan tahapan di atas sekarang masuk ke akun blogger anda.
  •     Pilih menu Template > Edit HTML
  •     Cari kode  </b:skin> dan paste kode yang tadi anda copy dibawahnya
  •     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=Special+Elite' rel='stylesheet' type='text/css/'>

Atau Copas Disini Code font
  •     Simpan Template

   Cara Menggunakan Font

   Sekarang setelah selesai melakukan langkah langkah sebelumnya anda tinggal memakai font itu. Contohnya seperti di bawah ini :

#outer-wrapper {
  margin:0 auto;
  padding:0px;
  text-align:$startSide;
 font-family:"Special+Elite";
 font-size:13px;
margin:10px auto;
  }
#header { max-width: 450px; text-align: left; color:#fff;float: left; font-weight: 700; font-family: Special+Elite; }

   Untuk mengganti font Header, cari dan pastekan pada code h1, dan teks yg berwarna merah diatas bisa anda ganti dengan font teks yang anda pilih.

   Sekian tutorial saya semoga bisa bermanfaat untuk kita semua, dan mohon maaf bila ada kekurangan dalam penulisan yang kurang bisa dipahami..

"Terima Kasih"

2 comments:

Post a Comment