blog elektro

Browse Manual » Wiring » blog » cara » dari » dengan » font » google » mengganti » menggunakan » pada » style » tulisan » Cara Mengganti Tulisan Font Pada Blog Dengan Menggunakan Font Style dari Google

---

Cara Mengganti Tulisan Font Pada Blog Dengan Menggunakan Font Style dari Google

Jenis font pada setiap template kebanyakan blogger bosan melihatnya dan ingin menampilkan sesuatu yang beda. Ada pasti ini memiliki font dengan gaya blog anda sendiri yang lebih stylis atau elegan. Untuk itu saya akan memberikan trik dan tips bagaimana kita bisa memperoleh bermacam-macam font untuk digunakan ditemplate anda. Simaklah tutorial berikut ini:

1. Buka situs Google Web Font http://www.google.com/webfonts/#ChoosePlace:select

2. Silahkan cari jenis font yang anda inginkan, tambahkan beberapa font dengan mengklik tombol Add to Collection.

3. Klik tombol Use disebelah kanan bawah browser,contohnya screen shoot di bawah :

4. Kemudian kopi kode dari Google Font (kodenya seperti ini, kode ini hanya contoh saja tidak perlu anda kopi):

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

5. Pada template anda carilah kode seperti ini <![CDATA[/*

6. Paste kode yang dikopi dari Google Web Font diatas kode <![CDATA[/*

7. Tambahkan kode slash "/" yang berwarna merah pada akhir kode yang dipaste tadi sehingga terlihat seperti dibawah ini:

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

8. Sekarang anda tinggal mengganti font pada template anda. Saya akan memberikan contoh bagi anda untuk mengganti font header di template anda, caranya seperti berikut ini:

9. Carilah kode #header h1 atau h2.postTitle {

10. Setelah itu ganti font family yang tadi anda pilih, contohnya seperti dibawah ini:

Kode awal pada template yang belum dirubah

#header h1{color:#00008B;font-size:26px;font-family: Arial ;font-weight:700;text-decoration:nnne;margin:0;padding:10px 0 0 10px}

Kode setelah dirubah saya

#header h1{color:#00008B;font-size:26px;font-family:Condiment, cursive;font-weight:700;text-decoration:nnne;margin:0;padding:10px 0 0 10px}

NB : Sebagian template ada sedikit yang berbeda dari "Edit HTML"nya,jadi cermati dulu.