Jumat, 15 Oktober 2010
Variasi Blogger Font With Google Font API and Kernest Font API
Bismillah... Sebelumnya saya ucapkan terima kasih kepada semua sahabat blogger yang masih setia dengan tutorial yang saya berikan. Untuk Postingan kali ini saya akan menjelaskan cara menambah jenis huruf / font baru di blogger. Setelah sebelumnya saya telah menjelaskan cara menambah variasi Huruf/font dengan SIFR GENERATOR. Selain itu tips kali ini juga sebagai jawaban dari pertanyaan MAS JOE si mpunya blog BERANDA KATA yang menanyakan cara menambah font baru untuk blog.
maaf, mau tanya tapi out of topic gan, bagaimana caranya menambahkan font baru pada blog? tq
Untuk menambah Font/Huruf baru atau istilah lainnya menambah variasi huruf di blog, kita bisa menggunakan banyak cara, diantaranya yaitu :
1. Menggunakan SIFR GENERATOR
2. Menggunakan Fasilitas GOOGLE FONT API
3. Menggunakan KERNEST FONT API
Untuk yang menggunakan SIFR GENERATOR, kalian bisa membacanya DISINI. sedangkan untuk yang No.2 dan 3 silahkan kalian baca dibawah ini :
** GOOGLE FONT API
- Kunjungi google/webfonts
- Pilih Huruf/font yang disukai
- KLIK pada huruf/font yang kalian pilih
- Kemudian Kalian KLIK GET THE CODE
- Silahkan kalian COPY kodenya
** KERNEST FONT API
- Silahkan Kunjungi KERNEST.com
- Untuk kernest, kalian harus membuat acount dulu dengan cara mendaftar
- Klik Sign In di pojok kanan atas
- Klik Register
- Isi Email dan Password
- Tekan ENTER
- Setelah Membuat Account Kalian Tinggal Pilih Fontnya
- Jika Belum muncul/Tidak Muncul KLIK salah satu menu, ex: Popular / Latest
- Scroll halaman kebawah dan lihatlah Huruf2 indah menanti anda
- Copy Kode yang ada di bawah setiap Huruf.
== PEMASANGAN PADA TEMPLATE BLOG
Setelah kita mendapat kode dari Google dan Kernest, Sekarang kita tinggal memasangnya pada Template kita.
Untuk Kode GOOGLE contohnya seperti ini :
Sedangkan untuk KERNEST ketika kita COPY PASTE kodenya seperti ini :
Berarti NAMA HURUF nya adalah 'Lobster'
Kalian ambil kode css nya saja, kode dibawah adalah keterangan pemakaian. sehingga yang kita ambil kodenya seperti ini :
Klo yang ini NAMA HURUF nya adalah 'monika'Untuk Kode GOOGLE contohnya seperti ini :
Sedangkan untuk KERNEST ketika kita COPY PASTE kodenya seperti ini :
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>
Berarti NAMA HURUF nya adalah 'Lobster'
<link href="http://kernest.com/fonts/monika.css" media="screen" rel="stylesheet" type="text/css" /><!--//
HOW TO USE THESE FONTS FROM KERNEST
1. Paste this embed code into your website
2. Add the fonts to your CSS tags. Example:
p {
font-family: 'Monika';
line-height: 140%;
text-rendering: optimizeLegibility;
}
3. Add this link in your website's footer
<a href="http://kernest.com">Fonts by Kernest</a>
4. Refresh
-----------
-----------
//-->
Kalian ambil kode css nya saja, kode dibawah adalah keterangan pemakaian. sehingga yang kita ambil kodenya seperti ini :
<link href="http://kernest.com/fonts/monika.css" media="screen" rel="stylesheet" type="text/css" />
silahkan ikuti tahap-tahapnya berikut ini :
- Login ke Blogger kalian
- Pilih Rancangan ---> EDIT HTML
- Simpan/Paste Kode yang kalian COPY tadi dibawah kode <head>
- Jangan Lupa SIMPAN TEMPLATE
Untuk PEMAKAIANNYA kalian tinggal menambahkan Nama Huruf pada kode CSS template kalian, misalnya mau mengganti huruf Judul POST, kalian cari kodenya :
.post h3{
font-family:'NAMA HURUF','serif,arial;Jika kalian mau memvariasikan sebagian huruf dipostingan, gunakan saja kode berikut :
<div style="font-family: 'NAMAHURUF', serif;">TULISAN KALIAN</div>
Mudah kan..?
Bagi yang mau langsung pakai, bisa menggunakan Huruf dibawah ini :
<link href='http://kernest.com/fonts/chunk.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='http://kernest.com/fonts/promocyja.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'/>
<link href='http://kernest.com/fonts/grutch-shaded.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='http://kernest.com/fonts/monika.css' media='screen' rel='stylesheet' type='text/css'/>
Semoga Tips kali ini akan sangat bermanfaat untuk semuanya terutama untuk MAS JOE. Terima kasih.
No comments yet