Baca Juga

Blog Ponsel Si Oon - Cara Mudah Mengganti Font Blog Dengan Google Web Fonts Atau Dengan Cara Mengganti Jenis Font di Blog Blogger Dibagian CSS ( Cascading Style Sheet ) selamat malam sahabat Mickey Pada malam hari ini admin akan sedikit lebih detail menjelaskan bagaimana cara mengganti font style pada blog .. ini bukanlah trik ataupun tips baru .. selain caranya mudah .. udah banyak juga blogger - blogger senior yang memposting soal ini .. namun tidak ada salahnya juga saya update ulang .. dengan cara dan gaya bahasa sendiri .. sesuai dengan apa yang admin tau / bisa .. dengan harapan semoga dapat di fahami dan di mengerti oleh para pembaca semuanya ..

Ok next .. untuk cara mengganti font style pada blog .. bisa dengan cara lewat css templatenya sendiri dengan cara mengganti fonts style yang ada dengan gaya font style yang sobat inginakan .. sepertihalnya saya sendiri menambahkan 2 jenis model font style .. yaitu font style Tangerine dan font style Oswald .. yang saya gunakan ini dengan menggunakan fonts style dari google web fonts .. lalu selanjutnya saya simpan di dalam template dan merubah bagian - bagian tertentu dengan gaya fonts baru .. untuk lebih jelasnya .. simak dibawah ini .. Cara Mudah Mengganti Font Blog Dengan Google Web Fonts



1. Cara Mudah Mengganti Font Blog Dengan Google Web Fonts

Langkah - Langkah :
  • Pertama sobat silahkan buka Google Web Font dengan Mengklik Link Ini
  • Setelah masuk ke web nya .. silahkan sobat pilih font yang sesuai dengan sobat inginkan ..
  • Selanjutnya Klik Font yang dipilih .. nanti akan terdapat kode font .. dan sobat copas semua kodenya .. dan pasang di dalam trmplate sobat .. dengan meletakannya di bagian <head>
  • untuk kodenya silakan lihat contohnya dibawah

Ini cuma sekedar contoh dari kode script yang Sebelumnya sudah sobat pilih .. dan ini kode script font style Tangerine Dan Oswald yang admin terapkan diblog ini ..

1. Font style Tangerine

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


2. Font style Oswald

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


Setelah sobat copy script nya .. seperti contoh diatas .. jangan dulu langsung sobat paste pada templatenya .. tetapi sobat tambahkan dulu tanda / ( garis miring ) diakhir kata type='text/css'> sebelum tanda > .. lebih jelasnya lihat contoh di bawah ..

1. Font style Tangerine

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


2. Font style Oswald

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


Setelah sobat melakukan cara seperti diatas .. berikutnya buka » Blogger.com » Dasbor » Template » Edit Template » Paste Script di bawah <head> .. lebih jelasnya seperti contoh di bawah ..

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

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


Setelah cara diatas sudah dilakukan .. berikutnya sobat ganti semua font style yang terdapat di dalam template sobat .. jika ingin semuanya di rubah .. tetapi jika misal ingin merubahnya di bagian tertentu saja .. ( contohnya seperti di blog ini .. cuma bagian footer saya ganti dengan font style tangerine ) .. dan sobat bisa menggantinya dibagian bagian tertentu saja yang sekiranya sobat inginkan .. jika ingin seutuhnya pada bagian body .. seperti contohnya dibawah ini ..

Contoh :

body {
background:#ffffff;
margin:0;
padding:0;
font-family: 'TimesNewRoman',verdana,serif,sans-serif;
text-align:center;
color:#000000;
}


Ganti text yang berwarna biru TimesNewRoman dengan nama fonts yang sudah sobat tadi pasang .. misalnya tadi memasang code script font style Tangerine atau Oswald .. maka yang bertulisan biru TimesNewRoman ganti dengan nama font Tangerine / Oswald .. lebih jelasnya seperti dibawah ini ..

Contoh Fonts Oswald :

body {
background:#ffffff;
margin:0;
padding:0;
font-family: 'Oswald',verdana,serif,sans-serif;
text-align:center;
color:#000000;
}


Contoh Fonts Tangerine :

body {
background:#ffffff;
margin:0;
padding:0;
font-family: 'Tangerine',verdana,serif,sans-serif;
text-align:center;
color:#000000;
}


Ingat .. yang perlu di ganti cuma text yang saya kasih warna merah font-family nya saja .. dengan mengganti text warna biru Tangerine / Oswald .. dengan nama font style yang sobat pasang sebelumnya .. dan untuk nama nama font lain nya .. yang berada di belakang font Tangerine / Oswald,verdana,serif,sans-serif jangan dihapus .. guna untuk menjaga jaga jika di sebagian browser pengunjung tidak terinstall jenis font Tangerine / oswald .. maka yang tampil pada browser tersebut dengan gaya font Verdana .. jika Verdana pun tidak ada .. maka sebagai gantinya font serif kalaupun serif tidak ada sebagai pengganti akhir font sans-serif .. maka nama - nama font tersebut jangn di hapus sekalipun mau di rubah .. rubahlah dengan nama - nama font yang umum .. jangan gunakan nama - nama font yang berfariasi karena bisa saja di browser tertentu tidak bisa membacanya .. dan hasilnya tulisan tidak dapat dibaca dengan kata lain menjadi kotak - kotak .. jadi gunakanlah font style yang umum .. seperti Times New Roman / Sans-Serif / Serif / Verdana / Italic guna untuk keterbacaan pada browser ..

Owh iya .. jika misal sebelumnya sobat cuma mengganti fonts style dibagian tertentu saja .. misal seprti pada blog ini .. cuma di ganti pada bagian footer nya saja .. maka di bagian lain masih menggunakan gaya fonts style umum .. namun jika ingin membuat tulisan dalam postingan dengan gaya - gaya fonts style seperti yang sudah sobat sebelum nya pasang .. misal dengan gaya font Tangerine / Oswald .. maka sobat bisa melakukan nya dengan cara manual .. di bagian kata - kata tertentu saja .. maupun di keseluruhan nya .. contohnya seprti dibawah ..

Contoh Tangerine

<span style="font-family:Tangerine;">Tangerine</span>


Hasilnya :

Tangerine


Misal ingin text nya berwarna dan ukuran nya lebih besar .. kita cuma menambahkan kata font-size dan Color .. contohnya seperti dibawah ..

<span style="font-family:tangerine;color:#ff1493;font-size:37px;">Tangerine</span>


Hasilnya :

Tangerine


Contoh Oswald

<span style="font-family:oswald;">Oswald</span>


Hasilnya :

Oswald


Misal ingin text nya berwarna dan ukuran nya lebih besar .. kita cuma menambahkan kata font-size dan Color .. contohnya seperti dibawah ..

<span style="font-family:oswald;color:#ff1493;font-size:30px;">Oswald</span>


Hasilnya :

Oswald


Gimana .. dengan penjelasan cara di atas ?? Mudah di fahami ?? Atau masih kurang faham ?? Jika kurang faham silahkan sobat baca ulang .. atau pun baca cara lain nya seperti di bawah ini .. Perlu diingat cara diatas sobat juga bisa mengganti tulisan yang ada di blog sobat dengan font tadi atau yang lain dengan memperhatikan css nya ..

2. Cara Mengganti Jenis Font di Blog Blogger Dibagian CSS ( Cascading Style Sheet )

Ok Next .. kita lanjut ketahap / kecara lain .. karena admin tahu apa yang sobat ingin 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 ..

Maka dari itu dikesempatan ini .. saya 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" ) ..

A. 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";....;}


Dan Ada dua kategori jenis font :

. Font family : Nama - nama utama ( root name ) font, misalnya "times", "arial", courier", dll ..
. 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 .. seperti yang sudah saya katakan di atas .. atau dengan contoh lain sebagai berikut ..

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 ..

B. 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 :

Pertama : 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;}


Kedua : 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 .. Ok Lanjut !!!

C. 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 :
    • Buka Edit HTML / Template Blogger ..
    • Cari elemen CSS yang ingin di ubah ..
    • letaknya antara <b:skin><![CDATA[ dan ]]></b:skin> ..
    • 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 ..
    • 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 merah dengan font - font lain ..
    • Sobat 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 ( contohnya ) 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;
      }
    • Untuk mengetahui jenis - jenis font .. cek CSS Web Safe Fonts ..
    • Setelah selesai mengubah atau menambah font .. jangan lupa klik save template ..

Nah itulah tadi informasi mengenai Cara Mudah Mengganti Font Blog Dengan Google Web Fonts Atau Dengan Cara Mengganti Jenis Font di Blog Blogger Dibagian CSS ( Cascading Style Sheet ) yang dapat admin sampaikan dikesempatan malam hari ini .. semoga bermanfaat buat pembaca semuanya ..

Tag : #Cara, #Cara Buat, #Cara Membuat, #CSS, #Template #Blog, #Blogger, #Font, #Font Style, #Cara Ganti Font, #Cara Ganti Font Style, #Jenis - Jenis Font Style, #Macam - Macam Font Style, #Cara Mudah Mengganti Font Blog Dengan Google Web Fonts Atau Dengan Cara Mengganti Jenis Font di Blog Blogger Dibagian CSS ( Cascading Style Sheet )

 
Top
Loading...