Cara Menambah dan Mengganti jenis Font pada blog, ini saya share buat sobat yang ingin merubah tampilan font/huruf pada blognya menjadi lebih menarik karena secara default font yang disediakan sangat terbatas. cara ini mungkin berguna buat merubah penampilan blog kita sehingga tidak monoton dalam penggunaan jenis font, sobat bisa menggunakan font sesuai dengan keinginan sehingga akan membuat blog semakin menarik dan bervariasi. secara default font yang dimiliki blogger yaitu arial, courier, georgia, lucinda grande, times, trebuchet, verdana dan webdings, jenis font tersebut terkadang tidak sesuai dengan keinginan, Nah untuk memenuhi keinginan kita dalam jenis font maka cara ini perlu dilakukan agar blog kita lebih stylis dan elegan.
Ok.. kiat langsung saja pada Cara Menambah dan Mengganti jenis Font pada blog, ikuti langkahnya-langkahnya;
Langkah Pertama Mengambil script font:
- Buka Situs Google Web Font
- Silahkan sobat cari jenis font yang diinginkan dengan cara menggulir scroll kebawah (lihat no. 1 pada gambar ), tambahkan font dengan mengklik Add to Collection. sobat bisa menambahkan jenis font lebih dari satu. ( lihat no. 2 pada gambar ) sehingga akan nampak hasil penambahannya pada bagian bawah seperti ini;
- Setelah sobat menambahkan beberapa font sobat klik USE yang ada disebelah kanan bawah ( lihat no. 3 pada gambar paling atas )
- Setelah itu perhatikan gambar Page load di sebelah kanan berapakah nilai meter tersebut dan itu menunjukan kecepatan load huruf tersebut, usahakan kita menggunakan font dengan nilai yang rendah atau agar nilainya rendah kita menambahkannya cukup satu font saja yang sangat diperlukan.
- Selanjutnya scroll kebawah dan akan ada kode script pada kotak seperti ini.
- Copy script yang ada pada kotak, sebagai contoh;
<link href='http://fonts.googleapis.com/css?family=McLaren|Oregano' rel='stylesheet' type='text/css'>
Langkah Kedua Menambah dan Mengganti jenis Font pada blog:
- login ke blogger
- buka halaman edit HTML
- Cari kode <b:skin><![CDATA[ selanjutnya paste kode script tadi tepat diatas kode <b:skin><![CDATA[ tersebut. atau sobat bisa juga mempastenya tepat dibawah kode <head>.
- 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=McLaren|Oregano' rel='stylesheet' type='text/css'/>
- Sekarang sobat tinggal mengganti font pada template, sobat tinggal cari saja kalimat font-family atau agar lebih gampang tekan control+F di keyboard. perhatikan kalimat sebelumya tepatnya sebelum tanda "{". contoh;
1. body{color:#444;font-family:"Lucida Grande",Tahoma,Verdana;font-size:11px;margin:0;}
2. header{color:#444;font-family:"Lucida Grande",Tahoma,Verdana;font-size:11px;margin:0;}
3. post h3{color:#444;font-family:"Lucida Grande",Tahoma,Verdana;font-size:11px;margin:0;}
- perhatikan contoh diatas yang diberi warna pink, nah itu adalah alamat yang mau diganti fontnya. body=untuk seluruh halaman blog secara default, header=untuk judul blog dan post h3= untuk judul postingan. ganti kode yang berwarna merah dengan kode font baru sobat, akhirnya seperti ini;
1. body{color:#444;font-family:"McLaren", cursive;font-size:11px;margin:0;}
2. header{color:#444;font-family:"McLaren", cursive;font-size:11px;margin:0;}
3. post h3{color:#444;font-family:"McLaren", cursive;font-size:11px;margin:0;}
- yang menjadi pokok huruf adalah yang diantara "." sedang cursive adalah font defaultnya disaat kode diantara "." tidak tampil.
- untuk menentukan kode diantara "." sobat tinggal lihat di situs google web font paling bawah atau sobat bisa melihat langsung dari scriptnya;
<link href='http://fonts.googleapis.com/css?family=McLaren|Oregano' rel='stylesheet' type='text/css'/>
- sobat perhatikan yang berwarna merah disana ada dua jenis huruf yang dipisahkan dengan "|". yaitu McLaren dan Oregano itulah jenis hurufnya yang harus dimasukan.
contoh alamat yang akan diganti diatas mungkin tidak sama antara satu template dengan yang lainnya, maka saya sarankan sobat untuk menggunakan kotak pencarian dengan menekan control+F di keyboard kemudian fokuskan perhatian pada kata sebelum tanda "{"nya, sebagai contoh untuk header terkadang dengan menggunakan header saja namun ada juga header h1 atau header a. itu terjadi pada yang lainnya juga.
Sumber
0 komentar:
Posting Komentar