Download Software dan Games Full Version Gratis Terbaru 2014

Cara Mengubah/Mengganti Jenis Font di Blog Blogger (CSS Styling)

Terkadang, jenis font (font-family) bawaan template blog dirasa kurang sesuai dengan keinginan, sehingga kita harus mengubahnya dengan jenis-jenis font lain agar tampilan blog lebih bagus atau setidaknya sesuai dengan konteks/tema blog.

Pada kesempatan ini, saya terlebih dahulu akan membahas tentang mengganti jenis Font dengan CSS Fonts dan bukan dengan Custom Font, yang menggunakan javascript dan biasanya bersumber dari API Google. Penggantian font dengan font CSS lain, meskipun sederhana tampilannya, namun cukup aman dan cepat di load, karena Browser dan Computer telah memiliki database font-font tersebut (disebut "Web Safe Fonts").

Sekilas Tentang Jenis Font (font family) 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 dipersingkat dengan shorthand (dituliskan dengan font saja):
p {font: "Times New Roman";....;}
Ada dua kategori jenis font:
a. Font family: Nama-nama utama (root name) font, misalnya "times", "arial", courier", dll.
b. Generic family: Nama-nama font turunan, misalnya "serif", "sans serif", "cursive", dll.

Penulisan font-family yang sering kita jumpai dalam CSS terdiri dari font-family dan generic family. Keduanya dituliskan berurutan dengan tujuan apabila sebuah font tidak tersedia dalam database suatu browser, maka browser akan merujuk pada jenis font lain yang telah dituliskan di belakangnya.
Contoh:
p {font-family"Times New Roman",Georgia,Serif;...;}
Note: perhatikan tanda kutip pada Times New Roman. Tanda kutip digunakan pada nama font yang memiliki jarak spasi kosong (white space). 

Selalu tuliskan CSS jenis font dengan aturan seperti di atas untuk berjaga-jaga apabila browser yang digunakan pengunjung tidak memiliki database font yang diinginkan, sehingga browser dapat langsung melompat ke jenis font lainnya.

Font Pada Template Blogger

Pada dasarnya font di dalam template Blogger ditentukan dengan CSS styling, sehingga jika harus mengubah jenis font, maka jelas perubahan dilakukan pada CSS-nya. Ada dua cara yang biasanya digunakan untuk membuat default font pada template Blogger:
1. Menuliskan variable CSS font untuk bagian-bagian (elements) tertentu, misalnya judul blog, deskripsi blog, judul posting, footer posting, footer, judul sidebar, dan seterusnya. Kemudian menuliskan variable tersebut pada font-family masing-masing elemen. Variable terletak di bagian atas CSS, biasanya setelah/dekat <b:skin><![CDATA[. Contoh variable-variable-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"
 >
.......................
Sebagai contoh, jika saya ingin untuk menyatakan jenis font yang dipakai dalam judul posting (header posting), saya menggunakan nama variable (name=) postTitleFont sebagai perwakilan jenis font pada properti font family nama blog yang telah dituliskan pada variable. Nama variable yang digunakan sebagai deklarator dituliskan dengan diawali tanda $:
.post h3 {font-family$postTitleFont;}
2. Menuliskan langsung jenis Font pada property-nya (font-family atau font). Contoh:
 .post h3 {font-family: "Georgia, times, serif;...;}

Dengan demikian poin serta cara untuk mengubah/mengganti jenis font di Blogger begitu mudah. Lanjut!

Mengubah Jenis Font di template Blogger/Blogspot

Sesuai dengan dua cara untuk menentukan font pada template Blogger di atas, maka pastinya cara untuk menggantinya pun ada 2, yaitu mengubah font pada variable atau langsung mengubah property font-family di setiap elemen. Mengubah variable sangat riskan karena ada nilai default dan value yang merupakan aturan general pada elemen-elemen utama blog.. Oleh karenanya, lebih baik ganti font langsung pada properti font family-nya. 

Cara mencari dan mengubah jenis font family pada setiap elemen CSS:
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 font yang 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 biru dengan font-font lain.
atau biasanya juga ditampilkan dengan nama variable:
.post h3 {font-family$postTitleFont;}
Ganti bagian font yang berwarna biru 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. Setelah selesai mengubah atau menambah font, save template.

Jika ada problem atau pertanyaan lebih lanjut mengenai font, pengubahan font, serta elemen CSS blog yang belum diketahui, feel free to use the comment form below. Jika ingin mengganti font blog dengan Custom Web Fonts simak Cara Menggunakan/Memasang Custom Font di Blogger.

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com
google

Catatan:
Jika anda menemui tutorial lama, maka perhatikan bahwa untuk masuk ke Edit HTML template tidak lagi melalui halaman "design/rancangan", melainkan dari dashboard > template > klik edit HTML. Masih bingung mencari dan edit kode di Edit HTML Blogger baru? Simak tips trik berikut:
1. Cara Mencari Kode di HTML Editor Blog
2. Fitur di HTML Editor Baru
3. Tips Edit HTML Blogger (artikel lama)
Cara Mengubah/Mengganti Jenis Font di Blog Blogger (CSS Styling)
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 50 Comment(s):

ubae said...

hemmm... dari tadi ane nyari2 yang seperti ini,,ternyata baru di posting dah.. mantabs emng gan..udah lengkap penjelasannya yang bagus..

mau di coba..mata udah gak kuat lagi..tapi apa daya..

mantabs dah..

info kesehatan said...

klo untuk wordpres gimana ya gan,,,

Ahmad Khoirul Azmee said...

@ubae: sip dah :D
@info...: wordpress yg di hosting sendiri dapat dengan mudah mengubah font dengan plugin/custom fonts (gratis/beli) atau edit CSS pada editor template/theme PHP-nya. Untuk yg ga dihosting sendiri (yg gratis, xxxxx.wordpress.com, tapi berlaku pula untuk yg hosting sendiri) dapat diubah melalui Appearance > Custom Design > Font, & bisa pula mencoba Custom Fonts gratis (lihat bagian bawah pada menu custom design).

•"̮• ♈ǎυ иȋ •"̮• said...

sip..

mau lebih gampang?

tambahkan aj kode ini:

<link href='http://fonts.googleapis.com/css?family=Arial' rel='stylesheet' type='text/css'/>

Letakkan di bawah
<meta content='Bla, Bla, Bla, Bla' name='keywords'/>

Ahmad Khoirul Azmee said...

itu menggunakan eksternal CSS dan fungsinya untuk mengganti font secara general, tidak spesifik pada bagian tertentu. Dan karena font family-nya sederhana saja, yaitu arial, lebih baik ubah langsung di CSS-nya daripada menggunakan external CSS.

•"̮• ♈ǎυ иȋ •"̮• said...

Oh begitu.. makasi masukan-nya'
kalau mau ganti font di postingan saja gmn ya?

Yoga said...

mantap infonya, tapi banyak kata yang aku g ngerti. Bahasanya dibuat lebih santai pasti enak dibacanya y, :)

Ahmad Khoirul Azmee said...

@Yoga: masukan yg sangat bagus :D. Oke nanti saya pertimbangkan untuk itu.... cuma sudah menjadi sedikit ciri khas sih :p Thanks a lot for the great comment :-)

Choco Tosca said...

pusing mas... Ada cara yang lebih simpel nggak? Hehe

dewi hajar's photography said...

aku rada ga ngerti.. T.T
tak coba otak-atik dulu deh
tapi thats good!

JOY said...

Ini nih yang saya cari-cari, Mas.
Sangat bermanfaat artikelnya nih..
Salam,

usaha sukses said...

Oke mas berhasil, udah bisa ganti font.. thanks ya..

Hermas Wiro said...

Terima kasih Infonya.. Salam kenal

SMK muhammadiyah larangan said...

makasih buat infonya..lagi latihan ngeblog nie

om onny said...

makasih atas ilmunya.

tips membeli mobil bekas said...

saya coba ya mas, walaupun agak susah untuk dimengerti. makasih informasinya

Akhsa Nant said...

nice info bang...like it.....:)

Nizwa Ayuni said...

nice share..:)
ditunggu kunjungannya ke alapak saya ^^

Rudy Hartono said...

thanks atas infonya yang sangat bermanfaat dan mudah dicerna, salam kenal
http://caramembuatyangakumau.blogspot.com

designer Profesional said...

thanks gan...kunjungi balik ya....http://pembuatandesign.blogspot.com

dokunimus said...

walaupun sedikit bersusah payah, akhirnya bisa juga ganti font.

Agus KBM said...

mantaap mas brow
sungguh telah menjawab kebingungan saya

firman said...

sipp, membantu banget,,,,

Rumah Bakulan Murah said...

thank's ilmu nya gan,

4NOVA said...

mantebb bgt infonya...trimakasih mas...

agustinwahyuni said...

mas, kalo buat judul blog gimana ya? saya binun dengan adanya huruf "$" itu, maaf saya gaptek nih mas

Ahmad Khoirul Azmi said...

untuk judul blog cari #header h1 atau sejenisnya, kemudian ubah nama font pada variable nya, misal:
#header h1{....;font: Sail,dst....}

waloetz said...

mantab ulasannya,, blog lain hanya alakadarnya saja..
disni penyempurnaanya.. sipp
coba dulu...

SWeetY GIrlS CHRiesMA said...

alhamdulillah bisa membantu

Rudy Hartono said...

informative sekali postingannya

LuVLy_Nisa said...

-___-"
bingung...
tapi asyik..
thx info na
:)

http://luvly-nisa.blogspot.com/

SMA Daya Utama said...

waaah mantap artikelnya ,makasih gan.. :D

Jangan lupa kunjungi www.parapejuangislam.blogspot.com

buycheapprinter said...

langsung dicoba gan,,

Jefry said...

Wah otak - atik templatenya harus teliti ni supaya berhasil dan lancar,,
terima kasih atas ilmunya

JSS Tripler 4 Us said...

thanks infonya gan...
numpang lapak ya!! visit my blog http://jsstripler-withus.blogspot.com

akur 83 said...

ternyata mudah ganti font di blog.. thanks mas tutorialnya sangat membantu..

Anonymous said...

Mas mau tanya kalo variable untuk normal bold itu bisa dirubah menjadi normal strong tidak? atau bagaimana jika ingin mengganti bold menjadi strong? dibalas ya mas.. ditunggu :)

Japan Animes said...

Gan taun font yang stylenya agak model jepang gitu gak ?

Adrian Firman said...

mas gimana ya caranya mengganti font dengan font buatan sendiri,,,makasih mas..

Anonymous said...

Nice share. Thanks
Teh Daun Jati Cina Murah
Teh Diet
Teh Pelangsing
Lulur dan Spa
Pupuk Organik
Supplier Barang dan Jasa

Andi Hidayat said...

aku nyoba kok error terus ya kakak,.??
:((
bantuin yang masih nyubi ini ya,.

Obat Pelangsing said...

info yang menarik........

inspirasi ,dedikasi & edukasi said...

Aku punya artikelnya, Sob,,,,,,,,,,perlu kalian coba

http://i-de-ku.blogspot.com/2012/12/cara-mengganti-jenis-font-di-blog.html

ini beda fontnya di postingan bisa diubah-ubah........ kalau sempet berkunjung ya,,,,?

Zamrud Hijau said...

Info yang baguz sekali untuk disimak.....
Bermanfaat sekali untuk saya....

Mohon kunjungan baliknya yaa....
Dan saya juga sangat berterima kasih sekali kalau anda berkenan FOLLOW dan Backlink Blog sederhana saya.... :-)

Title: Zamrud News
( www.zamrudnews.com )

ardy hendrata said...

wah ini yang saya cari info yang lengkap, makasih.

Muhammad Nurkholis said...

kenapa di blog saya font'nya bisa berubah sendiri saat koneksi lelet?
mohon bantuannya gan!!

Ahmad Khoirul Azmi said...

Itu karena font default anda yang menggunakan custom font tidak dapat/gagal diload, karena dianggap berat, maka browser kemudian mengambil alternatif font kedua, yang berjenis web safe font.

Muhammad Husin Nafarin said...

makasih infonya, sudah saya terapkan di blog saya dan sukses !
btw, header barunya mantap nih :D

moeclazh said...

siippp siiipppp infox maz ;)

Ageung Permana said...

Sungguh suatu hal yang sangat berguna. Terimakasih banyak atas infonya.

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

Join Our Team!

© 2013 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap