http://picasion.com

rss

Cari Sepatu Keren??

Menambah Font dari Google Custom Pada Blogger

Bertahun-tahun lamanya, Blogger dan Web-designer menggunakan font yang sederhana dalam menulis artikelnya. Mereka tidak punya pilihan untuk merubahnya kecuali hanya sedikit saja. Karena memang sangat mustahil untuk menggunakan font lain dalam web atau blog dalam sepuluh monitor dengan sepuluh font yang berbeda. Sehingga kita terjebak dengan font yang terbatas.
Sekarang mbah google telah loncing layanan baru mereka yakni Google web fonts dengan slogan 'Making the Web Beautiful!'. Layanan ini memungkinkan kita untuk menggunakan custom fonts di google untuk web/blog kita tanpa harus registrasi dulu atau sign up alias betul-betul gratis. Kabar gembira ini akan sangat membantu para webster/blogger untuk mempercantik tampilannya biar lebih stylish kalo bahasa kerennya. Tanpa banyak berteori ria, mari kita langsung ke TKP saja:

1. Silahkan Backup dulu template anda.
Setiap blogger tingkat dunia pun akan selalu menyarankan untuk membackup dulu template milik anda. Masuklah ke blog anda kemudian pilih Design (dulu layout) >> Edit HTML >> Download full template.

2. Pilihlah fonts yang anda sukai.
Silahkan klik kunjungi google font untuk memilih font yang anda sukai.

3. Silahkan Copy kode font nya.
Caranya anda tinggal klik 'Get the code'

4. Tambahkan/Pastekan kode pont pada tamplate blog anda.
Sesudah anda copy kode font tersebut, kemudian simpan/paste kan setelah/di bawah kode berikut:
<head>

Sebagai contoh saya pilih font Lobster yang mana kodenya sepert ini:
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

Catatan: Silahkan tambahkan garis miring ('/') sebelum tage ('>'). Kenapa demikian? karena blogger mengguakan kode XML sehingga blogger akan menolak kode tanpa garis miring itu di akhir sebelum ('>') maka akan terlihat seperti ini:
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>

Silahkan copy kode di atas kemudian pastekan tepat di bawah kode ini:
<head>

Kemudian langsung Save.

5. Tambahkan kode CSS untuk font di blog anda.
Langkah terakhir adalah anda harus menentukan dimana font itu diletakkan dan anda harus menambahkannya dengan menggunakan code CSS.
Jika anda ingin menggunakannya hanya dalam postingan saja maka gunakan kode berikut:
<div style="font-family: 'FontName', serif;">Your text</div>

Pada kode di atas silahkan ganti

Fontnamae: ganti dengan nama font yang anda pilih di google.
Yourtext: di teks yang anda inginkan.

Jika anda ingin font digunakan di :
Blog title
Post title
Post body
Sidebar fonts

Anda harus menambahkan kode CSSnya. Jangan khawatir, sangat mudah ko.
Begini, silahkan cari kode title cssnya:
.post h3

atau

.post-title h3

Silahkan Copy kode di bawah ini tepat di bawah kode di atas:

font-family: 'Your Font Name';
Akan tampil seperti ini.
.post-title h3
font-family: 'Your Font Name';

Berikut keterangan letak fontnya:

Title : h1
Post title : .post h3 or .post-title
Post font : .post-body
Sidebar : .sidebar h2

Sebagai contoh kita akan meletakkan font di di postingan, maka kodenya adalah post-body. Lihat contoh berikut:
font-family: 'google Font Name';

Kemudian kita simpan font nya seperti berikut:
.post-body {
font-family: 'Your Font Name';
}

Jika anda tidak menemukan kode tersebut maka carilah yang mirip dengan yang di atas. Setiap template memang berbeda-beda dalam kodenya.

Untuk melihat contohnya silahkan klik demo. Disana saya sudah mengganti font di header dan di post titlenya.

Selesai deh.. selamat mencoba.



.::Related Posts:

18 comments:

ANDI WONG on Monday, July 05, 2010 7:56:00 AM said... Reply

Pertamaax... wew... mantab gan.. bagus juga kalo title blog mempunyai font yang unik... ntar wa coba.. izin save ya.. :)

Unknown on Monday, July 05, 2010 4:12:00 PM said... Reply

Oke sob..

Blogger Indonesia on Monday, July 05, 2010 7:46:00 PM said... Reply

makasih infonya sob

Unknown on Monday, July 05, 2010 7:57:00 PM said... Reply

sama2 sob... thank for comment

joe on Saturday, October 16, 2010 9:34:00 AM said... Reply

kalau mau ganti font judul blognya gimana gan?

hamz on Saturday, October 16, 2010 1:32:00 PM said... Reply

@joe
Coba anda baca lagi bagian yang ini di artikel di atas:
Jika anda ingin font digunakan di :
Blog title
Post title
Post body
Sidebar fonts

regina on Monday, October 18, 2010 12:15:00 PM said... Reply

bro, ketika saya mencoba ada tulisannya seperti ini:

Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The reference to entity "subset" must end with the ';' delimiter.

maksudnya apa, mohon pencerahan!

Ajeng on Friday, October 22, 2010 9:56:00 AM said... Reply

salam kenal:)
mas, pas edit htmlnya bisa, tapi kalo mau make huruf itu kemana yah?
coz di posting gak ada, thx:)

hamz/pakdani on Sunday, October 24, 2010 5:10:00 PM said... Reply

@Kusumaties
ada sobat, tinggal klik aja di nomor 2. Pilihlah font yang anda sukai.
atau masuk ja di alamat ini
http://code.google.com/webfonts

hamz/pakdani on Sunday, October 24, 2010 5:17:00 PM said... Reply

@regina
mungkin ada salah penempatan kode sob..cek lg ya

Muhammad Chandra on Saturday, November 13, 2010 9:48:00 PM said... Reply

akhirnya ketemu juga tutorial ttng menambah font di blogspot !!

thanks ilmunya sob :D

Dedew on Thursday, December 16, 2010 11:23:00 AM said... Reply

teksnya jadi kecil. ngatur ukuran fontnya gmn ?

pakdani on Thursday, December 16, 2010 2:15:00 PM said... Reply

@Dedew
pngaturan ukuran font biasanya dari template bawaannya. jadi anda tinggal rubah angka ukurannya sesuai yang anda kehendaki

rajkumar on Saturday, March 05, 2011 11:34:00 AM said... Reply

makasih infonya kang.salam kenal..

cuteteddybear87 on Friday, March 25, 2011 3:37:00 PM said... Reply

aduh duh duh..aku udah nyoba tp kok gak berhasil ya..puyeng dengan kode kodenya...:(

Cek Info on Wednesday, September 14, 2011 11:25:00 PM said... Reply

berhasil mas :D
makasi

blogger lamongan on Monday, December 24, 2012 1:45:00 PM said... Reply

thanks ya gan lihat blohg ane sudah clink

CaraMenjadiAgenPulsa on Monday, February 04, 2013 9:58:00 PM said... Reply

Makasih artikelnya bermanfaat..
Oh ya Gan saya ada tips cara dapat 1 juta lebih baclink utuk meningkatkan visitor, kalo agan berminat bisa agan lihat di

Tips mendapat 1juta Baclink Gratis untuk Blogger

trims, ditunggu kunjungannya.


Post a Comment

Silahkan tulis komentar sebagai umpan balik dari artikel ini. Tidak diperkenankan untuk komentar yang berunsur spamming, porno, dll.

http://picasion.com/i/1TFa9/

Sub Menu

  • 1. Membuat Teks Berkedip
  • 2. Menambah Elemen di Atas dan Bawah Posting
  • 3. Menambah Dua Elemen di Bawah Sidebar
  • 4. Kotak Komentar Blogger Bermasalah
  • 5. Membuat Teks Bergerak Pada Blogger
  • 6. Membuat Tabel Pada Blogger
  • 7. Cara Membuat Scrollbox pada Blogger
  • 8. Fungsi New Pages Pada Blogspot
  • 9. Cara Menampilkan Tanggal Post (Post Date) Blogger di Waktu Yang Sama
  • 10. Membagi 2 Kolom Sidebar Blog
  • 11. Cara Memperlebar Halaman Blog
  • 12. Mengatur Perataan Posting Artikel
  • 13. Membuat Menu Dropdown Pada Arsip
  • 14. Blogger Sudah Support Fungsi Readmore
  • 15. Menambahkan Web Counter
  • 16. Cara Mendaftar dalam Blogspot
  • 17. Membuat Emotion Pada Blogger
  • 18. Memasang Yahoo Messenger Emotion
  • 19. Membuat Background Posting
  • 20. Membuat Menu Tab View Pada Blogger
  • 21. Cara Mengganti Icon Pada Address Bar
  • 22. Cara Memasang Gambar Berbingkai
  • 23. Cara Membuat Tombol Facebook Like di Blogger
  • 24. Cara Membuat Related Post Dengan Fungsi Scroll
  • 25. Membuat Border dan Kotak Pada Postingan
  • 26. Cara Membuat Buku Tamu Melayang
  • 27. Membuat Iklan Melayang dengan Tombol Close
  • 28. Membuat Kata Sambutan, Penutup dan Pertanyaan Pada Blogger
  • 29. Memasang Widget Recent Post dengan Thumblnails
  • 30. Evolusi Blogger dari Tahun 1999 - 2009
  • 31. Tips Agar Blog Anda Mudah Diakses di HP
  • 32. Cara Memasang Retweet Button Pada Blogger
  • 33. Cara Memperbesar Image/Gambar Pada Postingan Blog
  • 34. Menambah Font dari Google Custom Pada Blogger
  • 35. Membackup Komentar di Blogger
  • 36. Koleksi Gratis RSS Feed Icon dan RSS Feed Vector Graphics
  • 37. Tips Menjadikan Blogger Unlimited Bandwidht/Loading Page Super Cepat
  • 38. Daftar 'Keyboard Shortcut' Untuk Posting di Blogger
  • 39. Mengganti Font Blogger dari Kernest.com
  • 40. Tips Seni Dalam Menulis Artikel di Blog Kita
  • 41. 8 Tips Menulis Artikel Blog Dalam Waktu 20 Menit
  • 42. 5 Tips Efektif dalam Menulis di Blog
  • 43. Mengenal Lebih Dekat Tentang SEO dengan SEO Dictionary
  • 44. 4 Situs Terbaik Bekapasitas 10GB Untuk Menyimpan Data Secara Online
  • 45. SEO adalah Kerangka, Konten adalah Otot, Sosial Media adalah Fisik
  • 46. Bagaimana Cara Kerja Google?
  • 47. Perbaharui Posting Lama Anda
  • 48. Mengapa Page Rank Blog/Web Jatuh?
  • 49. Share Buttons Milik Blogger
  • 50. Integrasi Antara Blogger dan Zemanta Gadget
  • 51. Gambaran Frekuensi Posting Blog kita
  • 52. Cara Mengatasi Blog Post dari Copy Paste
  • 53. Batas/Limit Kapasitas Akun Blogger
  • 54. Posting Blog Menggunakan Word 2010
  • 55. 6 Situs Foto Gratis untuk Blog Anda
  • 56. Cara Menampilkan Tanggal Post (Post Date) Blogger di Waktu Yang Sama
  • 57. 5 Alasan Mengapa Anda Harus Menjawab Setiap Komentar
  • 58. Cara Memodifikasi Bullet List dan Numbered List di Blogger Post
  • 59. Generasi Blogger Masih Didominasi Oleh Kawula Muda
  • 60. Blogger Perkenalkan Pendeteksi Otomatis Komentar Spam
  • 61. Blogger Belajar Dari Harry Potter
  • 62. Trik Menampilkan Total Post, Comment, dan Online User
  • 63. 38 Jawaban SEO
  • 64. Trik Menampilkan Total Post, Comment, dan Online User
  • 65. Cara Mentransfer Akun Blog ke Akun Blog yang Lain
  • 66. Mengenal Fungsi Navbar di Blogger
  • 67. Cara Pasang Recent Posts Thumbnails Dengan Mudah
  • 68. Cara Memasang File Flash Di Blog Post
  • Popular Posts

    Shout it!