[Share] Mengubah font side bar, header dan post title

Ceritanya mo bikin tutorial nih..hmm jangan tutorial de, seperti menggurui jadinya, hehe..sekedar mau share aja dan semoga bermanfaat :)

Temen2 yang berkunjung kesini pasti liat dunk font post titles, jump link, header dan side bar ku yang "lucu" itu?? hahaha..*sepertinya terlalu pede :D ya gpp lah, yang ga bilang "ga lucu" juga masih bole lanjut baca postingan ini sampe slesai koq :D Sebenarnya ide awal postingan ini dari salah satu temen blogger yang nanya "font apa yang dipake  di header dan post titles?" font2 itu memang ga ada di default win xp, dan juga bukan bawaan dari template yang aku pake ini. Temen2 yang load blog ini pasti tampilan awal font nya beda kan, nah itu font aslinya setelah load selesai font nya berubah de taraaa... :D

Waktu itu aku nemuin web yang ngasih tutorial tentang "how to use a cute font for your blogger post titles" melihat judulnya sepertinya menarik, dan bener aja pilihan font nya tu lucu2 banged, ya semacam handwriting atau semacam scrapfont gitu..dan contohnya bisa diliat sendiri di blog ku ini (header, post titles, jump link dan sidebar)..baiklah saia rasa cukup basa basinya, sekarang mari kita coba bersama...

Langkah pertama temen2 bisa cari dan download font font yang lucu dan unik dan jangan lupa di extract (unzipped), lalu upload font tersebut disinih dan ikuti step-step ya, ga perlu ubah pilihan2 nya. Tapi yang perlu diperhatikan pada step 2, pastikan sIFR 3 r436 dipilih. Di step terakhir jangan lupa download font nya (dalam format .swf). 

   

 *Ini tampilan step ke-2 jangan lupa dipilih yang sIFR 3 r436 yaa

 *Klik button downloadnya dan di save yaa..

Langkah selanjutnya download file fontScript dan kemudian extract. Di dalamnya terdapat 3 buah file dengan nama :

sifr.css

sifr.js

blogger-sifr.js

Di save dulu ya file-file nya. Kemudian langkah selanjutnya temen2 bikin account di Webs.com. Pilih nama site dan klik Create a Website. Pada step 3, Select a Template for your Site, pastikan temen2 klik Use HTML-Only Mode seperti gambar dibawah ini 

Jangan lupa verifikasi email untuk mengaktifkan account nya. udah beres?? cepetan dunk..udah belum? hehe..okay klo udah selanjutnya upload 3 file yang ada di folder fontScript (yang tadi sudah di download dan di extract) dan jangan lupa upload juga file .swf font-nya . Upload nya dimana dev? saia kasih tau nih..klik Single File Uploader maka akan muncul kotak dialog untuk memasukkan file yang akan di upload. Jangan khawatir, file nya kecil2 koq, jadi gag akan makan waktu lama buat uploadnya.

*Login dulu ke Webs.com pakai account yang dibuat tadi untuk menemukan Single File Uploader 

Sudah diupload semua? baiklah untuk selanjutnya dibutuhkan konsentrasi tingkat tinggi *sedikit lebay gpp yah :D klik icon pensil pada file blogger-sifr.js untuk mengubah scriptnya. Cari script seperti ini :

         var deviakhsari = {

               src: 'http://username.webs.com/fontname.swf'  

               };

         sIFR.activate(deviakhsari);

Perhatikan baris kedua dari script diatas, ganti username dengan username kamu (yang sudah dibuat tadi) dan ubah fontname.swf dengan nama file swf yang sudah diupload tadi. Perlu diperhatikan, hati2 dalam menghapus dan merubah scriptnya, jangan sampai tanda petik atas (') terhapus, karena ga akan jalan nanti scriptnya.

Selanjutnya perhatikan script ini :

           css: ['.sIFR-root { color: #000000; font-size: 28px; font-weight: normal; }'
           ,'a { text-decoration: none; }'
           ,'a:link { color: #000000; }'
           ,'a:hover { color: #000000; }'

Kode warna yang ada diatas bisa kamu ganti dengan kode warna pilihan, bebas..untuk membantu mengambil kode warna nya bisa pakai ColorSlide atau buat yang pakai browser Mozila Firefox bisa instal add ons, namanya ColorZilla..
Nah ini penjelasan untuk urutan kode warna diatas : 

          Kode warna pertama warna text asli *bukan link 
          Kode warna kedua warna text untuk link 
          Kode warna ketiga warna mouse hover link *artinya text tesebut adalah link dan
          warna itu muncul apabila pointer mouse digerakkan ke arah link/text tersebut.

Pada script terdapat tiga bagian yang akan diubah font-nya yaitu : post title, date header dan sidebar.. Temen2 bole menentukan sendiri bagian mana saja yang mau diubah dengan mengganti Selector dan menurut pengalaman pribadi, nama-nama bagian tersebut berbeda tergantung template yang digunakan, saran saia cek html code di blogspot untuk memastikan nama2 tiap bagian. Jangan lupa di SAVE klo udah selesai edit2 script nya..

Langkah Terakhir yang Menentukan, Jangan Sampai Terlewat!!

Sekarang untuk manggil script tersebut, masuk ke Dashboard > Layout > Edit HTML Cari kode </Head> *teliti yah, ada tanda slash (/)* gampang nya klik CTRL+F terus ketik </Head>

Ketemu kan?? hah masa ga ada?? gag mungkin, coba teliti lagi nyarinya...nah klo uda ketemu, tepat diatas </Head> copy dan paste kode dibawah ini : 

<link href='http://username.webs.com/sifr.css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://username.webs.com/sifr.js' type='text/javascript'/>
<script src='http://username.webs.com/blogger-sifr.js' type='text/javascript'/>

Jangan lupa ganti username dengan username mu sendiri yang tadi dibuat di webs.com  klo font tetep ga nongol coba cantumin nama seperti gambar ini :

*yang dibuletin itu bisa kamu ganti sesuai dengan nama yang kamu bikin

Dan Jangan lupa di save yah..setelah itu SELESAI :)

Untuk blog percobaan bisa diliat DISINIH atau liat blog ini ajah, hehehe :)
Selamat mencoba temans, klo ada yang mo ditanyain silahkan jangan malu2 selama saia tau jawabannya pasti dijawab koq :D

*Maaf klo jelasin nya kurang jelas atau ada yang salah, maklum masih nubie jelasin beginian 

**UPDATE:

Berhubung Saya ganti template dan belum mengubah font header, sidebar, jump link dan footer pada template baru ini, maka temans semua bisa melihat hasil contoh nya di blog percobaan >> cekidotdisinih

Atas perhatiannya terimakasih dan harap maklum :D