Mengganti Font di Blogger

EclassBisnis.Blogspot.Com – Mengganti font di blogger bisa menjadi salah satu cara agar tampilan blog lebih stylish, sesuai tema, lebih personal, lebih unik, lebih fresh, lebih profesional, dll (tergantung selera agan aja). Nah karena inilah ane langsung praktek ilmu ganti font blogger, trus jadi deh artikel pertama ane disini (doain ea bisa jadi blogger hebat he he…..)

Cara yg dibahas disini menggunakan bantuan Google Web Font.

Wuih google maneng-google maneng (he he), memang Google bukan sekedar search engine nomor wahid di dunia ini tapi memang benar benar pendukung buat website. Banyak macam-macam aplikasi web yg diberikan google buat sobat mulai dari yg gratisan sampai dengan yg berbayar, seperti Gmail, Webmaster Tool, Picasa untuk penyimpanan gambar, Google Analytics untuk track pengunjung web, Google Web Font, Google Docs, Google drive, Google Plus sebagai jejaring, Adsense Google Affiliate untuk Mencari uang, dan terus berkembang lebih banyak lagi, baik secara kuantitas maupun kualitasnya.

Penggantian font dengan font CSS lain meskipun sederhana tampilannya, namun cukup aman dan cepat di load, karena mayoritas Browser dan Computer telah memiliki database font-font tersebut (disebut "Web Safe Fonts").

Apa itu CSS ?

CSS adalah singkatan dari Cascading Style-Sheet, sebuah pengembangan atas kodeHTML yang sudah ada sebelumnya. Dengan CSS, kita bisa menentukan sebuah struktur dasar halaman web secara lebih mudah dan cepat, serta irit size. CSS juga membantu kita untuk menyeragamkan seluruh halaman website dengan tampilan yang konsisten. Misalnya, kita mau seluruh font yang ada di website kita adalah font “Tahoma”, maka dengan bantuan CSS kita bisa bikin proses itu menjadi otomatis tanpa harus mengganti-ganti font secara manual di setiap halaman.

Dahulu kala, sebelum CSS menjadi standar untuk mendesain halaman web seperti sekarang, halaman web di desain menggunakan <table>. jadi dibuat dulu desainnya, dalam format .psd atau jpeg, lalu di slice atau di potong potong menjadi bagian – bagian terpisah. setelah itu dibuat table dengan ukuran yang sesuai, lalu desain tadi di “tempel” pada table sebagai image yang melekat pada tabel, atau sebagai background. Kelemahan dari cara seperti ini adalah, halaman web menjadi berat karena kolom – kolom penyusun table <tr> dan <td> diberi tambahan atribut image source. Side effect dari hal ini adalah halaman web menjadi padat dan tidak SEOfriendly.

CSS merupakan alternatif bahasa pemrograman web masa yang akan datang, dimana mempunyai banyak keuntungan, diantaranya :
– Ukuran file lebih kecil
– Load file lebih cepat
– Dapat berkolaborasi dengan JavaScript
– Pasangan setia XHTML
– Menghemat pekerjaan tentunya, dimana hanya membuat 1 halaman CSS.
– Mudah mengganti-ganti tampilan dengan hanya merubah file CSS nya saja.
– Dan banyak lagi yang lainnya.

Kelebihan penggunaan CSS :
1. halaman web menjadi tidak padat, hingga halaman web menjadi SEO friendly
2. anda dapat dengan mudah mengganti tampilan web dengan cukup mengganti nilai dan definisi pada pada satu file CSS saja.

Kekurangannya penggunaan CSS :
sayangnya susah untuk dimengerti dibandingkan dengan bahasa pemrograman lainnya contohnya: HTML, PHP, Java Script, dan lain-lain dan CSS ini memerlukan waktu yang sangatlah lama untuk bisa mahir untuk mempelajari CSS ini..

Jenis Font dalam CSS

Jenis font dalam CSS dinyatakan dengan properti font-family. sehingga dalam penulisannya, deskripsi CSS font-family dituliskan seperti contoh berikut:

p {font-family: "Times New Roman";....;}

atau diperpendek pake shorthand ( nulis font aja):

p {font: "Times New Roman";....;}

Ada 2 label jenis font:
a. Font family: Nama-nama utama (root name) font, seperti "times", "arial", courier", dll.
b. Generic family: Nama-nama font turunan, seperti "serif", "sans serif", "cursive", dll.

Penulisan font-family dalam CSS umumnya terdiri dari font-family dan generic family. Keduanya dituliskan berurutan dengan tujuan bila sebuah font tidak tersedia dalam database suatu browser, maka browser akan merujuk pada jenis font lain yg telah dituliskan di belakangnya (cara ini disarankan). Contoh:

p {font-family: "Times New Roman",Georgia,Serif;...;}

Note: liat tanda kutip pada Times New Roman. Tanda kutip dipake pada nama font yg memiliki jarak spasi kosong (white space).

Font di Template Blogger

Font di dalam template Blogger itu diatur dengan model CSS, sehingga jika harus mengubah jenis font, maka harus diubah pula CSS-nya. Umumnya ada dua cara yang dipakai untuk membuat perubahan font pada template Blogger:

1. Menuliskan variabel CSS font untuk bagian-bagian (elements) tertentu, seperti judul blog, deskripsi blog, judul posting, footer posting, footer, judul sidebar, dan seterusnya. Kemudian menuliskan variabel tersebut pada font-family masing-masing elemen. Variabel terletak di bagian atas CSS, umumnya setelah/dekat <b:skin><![CDATA[. Berikut Contoh variabel-variabel-nya :

.......................<Variable name="dateHeaderFont" description="Date Header Font"
type="font"
default="normal bold 117% Arial, sans-serif" value="italic normal 80% Arial, sans-serif"
>
<Variable name="postTitleFont" description="Post Title Font"
type="font"
default="normal bold 180% Georgia, Times, serif" value="normal bold 142% Trebuchet, Trebuchet MS, Arial, sans-serif"
>.......................

Ambil contoh, jika ane pengin untuk menyatakan jenis font yg dipakai dalam judul posting (header posting), ane memakai nama variabel (name=) postTitleFont sebagai perwakilan jenis font pada properti font family nama blog yang telah dituliskan pada variabel. Nama variabel yg digunakan sebagai deklarator dituliskan dengan diawali tanda $:

.post h3 {font-family: $postTitleFont;}

2. Menuliskan langsung jenis Font pada properti-nya (font-family atau font). Contoh: .post h3 {font-family: "Georgia, times, serif;...;}

Langsung TKP gan …..

Langkah 1 :

• Pilih dahulu font yg pengin dijadiin sebagai font untuk blog sobat di Google Web Font.
  
  Klik Pop out untuk melihat contoh font. Kalo dah yakin klik Quick use.

Langkah 2 :

• Dari form yg ditampilkan setelah klik Qick use, liat point 1 dan point 2, centang/ klik semua Family font yg sobat pilih mulai dari normal, bold dan italic, seperti contoh font yg ane pilih yaitu "Lekton". Lalu scroll ke bawah point 3. Selanjutnya copy kode font yg tampil di menu standard, dimana link ini dinamai dengan stylesheet URL
  
  Selanjutnya masuk ke menu edit HTML template sobat, dan letakkan kode tadi tepat dibawah kode ini <head>
  
  Lalu letakkan dan tambahkan Slash (/)sebelum tanda akhir penutup (>) supaya nanti ketika sobat mencoba save template tidak error, liat contoh berikut :
  
  Sebelum : <link href='http://fonts.googleapis.com/css?family=Lekton:400,700,400italic' rel='stylesheet' type='text/css'>
  
  Sesudah : <link href='http://fonts.googleapis.com/css?family=Lekton:400,700,400italic' rel='stylesheet' type='text/css'/>

Langkah 3 :

• Agar bisa diterapkan pada postingan atau artikel blog, maka copylah/ salinlah kode CSS yang diberikan Google Web Font, scroll ke bawah liat point 4,
   
  Lalu cari kode :
  
  body {
  
  pada template sobat. Untuk mempermudah pencarian, klik Ctrl+F pada form template. Sehingga muncul kotak pencarian/ search dan langsung ketikan “ body { “ (tanpa tanda kutip). Trus cari font-family di bawah kode tadi. Ketemu ? dan ganti deh dengan jenis font yg agan salin barusan (dalam contoh ini ‘Lekton’, sans-serif; ). Selesai dan selamat mencoba ! Langsung PRAKTEK akan menjawab 90% kebingungan Anda. So, just duit.
  
• Bila agan pengin elemen-elemen tertentu memiliki font-font khusus/ beda, maka cara cepatnya klik Ctrl+F pastekan (ketikan ke kolom search/cari) font-family: lalu tekan Enter. Sehingga semua varian font-family akan terseleksi. Biasanya letaknya antara <b:skin><![CDATA[ dan ]]></b:skin> .
  
  Tiap elemen CSS di template Blogger mempunyai nama berbeda, tapi secara umum, ada kemiripan dan memiliki deklarator umum yg 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.
  
  Setelah menemukan elemen yang dicari, selanjutnya cari properti font-family atau font yg di belakangnya ada definisi font atau nama variabel seperti contoh variabel 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 variabel:
  
  .post h3 {font-family:  $postTitleFont;}
  
  Ganti bagian font yang berwarna merah dengan font-font lain.
  

Gimana gampang kan ?………… masih mau lanjut ? ……………

Bentuk Dasar StyleSheet URL

1. Bentuk Dasar Stylesheet URL. Masih inget dengan "stylesheet URL" kan ? (panganan opo maneh iki…… )

Stylesheet URL pasti diawali dengan URL dasar API Google Fonts :

https//fonts.googleapis.com/css

Lalu tambahkan parameter = URL Family, dilanjut dengan jenis font family-nya (Times new roman, Tangerine, Inconsolata, dll), trus terakhir jenis style-nya (italic, bold, bold italic).
Contoh  : kita pengin pake/ memanggil Inconsolata font, maka bentuk stylesheet URL-nya ,

http://fonts.googleapis.com/css?family=Inconsolata

Untuk memanggil/ menggunakan beberapa nama-nama font, pisahkan nama-nama font dengan garis tegak (|).
Contoh : pengin pake fonts Tangerine, Inconsolata, and Droid Sans, maka stylesheet URL-nya menjadi,

https//fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

NB : Replace/ ganti ruang spasi pada nama-nama fonts dengan karakter  plus (+), seperti contoh diatas Droid Sans menjadi Droid+Sans. Jangan terlalu banyak font karena itu membuat browser merender lebih banyak font sehingga web/ blog jadi lambat loading.

Google Font API menyediakan versi regular font yg diminta secara default. Untuk meminta style lain (bold, italic, bold italic, ukuran style-nya) atau gaya lain, tambahkan tanda titik dua (:) setelah nama font, diikuti dengan jenis style-nya/ daftar gaya-nya yg dipisahkan dengan koma (,).

http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans.

Jenis style fonts bisa disingkat dengan satu karakter,

Style	Spesifiers
Italic	italic atau i
Bold	bold atau b atau 700
Bold italic	bolditalic atau bi

Contoh, memanggil/ pake Cantarell italic dan Droid Serif bold, Anda bisa menggunakan salah satu URL berikut:
http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold
http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b
http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700

2. Specifying script subsets. (waduh tambah mumet endasku …..)

Beberapa font di database Google Web Font mendukung beberapa script (seperti Latin dan Cyrillic). Karena itu untuk menentukan script mana yg dipake/ dipanggil, maka perlu ditambahkan ke parameter/ URL Family. Contoh, memanggil script subsets Cyrillic dari jenis font Philosopher, maka URL yg dipake :
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic

Kalo untuk memanggil latin dan cyrillic dari jenis font Philosopher,
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic

Continue Reading →