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

Jul 6, 2010

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  http://www.emocutez.com



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

35 great comments:

Unknown said...

aduuuuh,,pusing aku bacanya...
gmana kalo kmu benerin blog ku aja...
hehehehe

Anonymous said...

terimakasih sharingnya kaak~

Unknown said...

@riesta..hehehe..ikutin aja langkahnya satu2 ris, gampang koq :D

@diana..sama2 dek :)

AzHis Jhie said...

nice tips mbak...

tapi aq malas ngutak ngatik HTML...

nggak ngerti soalx..

takutnya malah error...

xixixixi

Diah Alsa said...

lucuu lucuu Dev, fontnya, tuto nya jg lumayan simple tuk dimengerti :D

akan segera mencobanya, thanks for sharing yaa Dev ;)

elok langita said...

makshy buta tutornyaa. kapan kapan mau nyoba langsung..

mkashy buat kunjungan dan komentarnya.. :D

Unknown said...

@azhis..hehe..HTML seru koq :D

@diah..hu uh emang lucu2 di, selamat mencoba smg bermanfaat :)

@elok..sama2 elok :)

Shudai Ajlani said...

html seru ? haha bikin pusing sob

"imagination and dreams to become a successful" bersilahturahmi :)

Corat - Coret [Ria Nugroho] said...

oh gtu caranya agak panjang yah dev ^^
pantes tulisan punya kamu bagus dev, ak kira bawaan template

Wulan said...

wah nice tips! tapi rada bingung ini. hehe. bapa kau nih yang jago masalah script2an kayak gini. hehe.
salam kenal yah kak! ^_^

Unknown said...

thx sharenya dev, agak bingung nih, hehe...ntar dipelajari lagi deh...

rid said...

waduuh
pusing aku,nggak ngerti,hehehe
asik ya dev,bisa modif blog kayak kamu :)

«((¯`¤ RáÐhìtǻ ¤´¯))» said...

font nya emang lucu dan bagus :D

Unknown said...

@all..waahh bingungin yah tutor nya,maaf.. :D
bingung nya dimana yah?biar aku bisa memperbaiki..makasii yah inputannya :)

Fahrani Nisrina said...

"...Upload nya dimana dev? saia kasih tau nih..klik Single File Uploader maka akan muncul kotak dialog untuk memasukkan file yang akan di upload. ..." di Single File Uploader nya belom ada link nya tuh, apa link nya?

Unknown said...

single uploader itu ada di webs.com, harus login dlu pake akun yang baru dibikin itu..nanti aku kasih capture nya yah..

Fahrani Nisrina said...

udah bisa, makasih :DD
tolong lebih spesific lagi step2 nya biar pada gampang nyobanya :)

Unknown said...

waah..selamat..langsung liat ke tkp, nice :)

okay makasi masukannya, maklum nubie :">

ketawa, lucu, ngakak said...

keren nih mas \:D/
bisa di tiruuu

Wulan said...

iya kak, nanya2 tapi klo ngga liat langsung caranya mah susyaaah. hihi.
tuker link yuk kaaa. hehe ;p

Unknown said...

@ketawa lucu...waduuu saia bukan mas2 :hammer:

@wulan..hehe,klo minat bisa ym-an, mau? :D
yuk yuk..tuker link :)

Irma Senja said...

selamat pagi dv.....

duh ternyata nona cantik ini pinter jg ya soal tutorial ^^

nyerah deh kalo mba irma soal beginian hehe....

apa kabar dv ? smg slalu sehat ya... :)

Nuy said...

Aduuh kok aku bacanya agak ribet ya kak.. T-T
tapi pengen nyobaaa...

Unknown said...

waaa dia belum apdet rupanya...apdet dev, apdet apdet...

mayank said...

pengen nyobanya tapi kayanya butuh banyak waktu buat aku yang kura-kura ini hhihihiiii


kaburr

Aku Sya said...

ngaco nih jadinyaaaaaa =(

ga jadi dipake

Unknown said...

@Aku Sya..ngaco dimana nya yah?
sapa tau saia bisa bantu :)

uvebana said...

thanks infonya sob..... sangat bermanfaat :)

Innah said...

Salam kenal yach..,

Natalia Peregrina said...

terimakasih atas infonya. ntw, kalo font judul dan sidebar mau berbeda bagaimana ya ?
http://thinkicecream.blogspot.com

Unknown said...

@natalia..coba ikutin langkah2 diatas aja..klo ga ada yg kelewat pasti berhasil koq..dan ak uda liat blog km, berhasil :)
klo msh ada yg mau ditanyain..silahkan :)

Satya Intan said...

makasih yaah infonya. btw, aku udh nyoba, tapi websnya kok gada yah yang single file uploader?

Unknown said...

@Satya..maaf ya baru bales. single uploader nya itu ada di webs.com
selamat mencoba :)

Cookies Land said...

makasih yaa..tapi mau tanya, kalo post title, date header dan sidebar pengen beda2 font nya gabisa ya??jadinya bakal sama semua?? thx :)

Unknown said...

bisa koq beda font tinggal tambahin 1 blok script lagi yang seperti ini (contoh):
var sidebar= {
src: 'http://username.webs.com/fontname.swf'
};
sIFR.activate(sidebar);

setelah itu di blok script yang bawah juga ditambahin dengan memanggil variabel sidebar tadi.

Post a Comment