Variasi Font Pada Blogger Dengan sIFR Generator Bagian 2

Melanjutkan artikel sebelumnya Variasi Font Pada Blogger Dengan sIFR Generator Bagian 1, sekarang kita akan mengupload file-file yang tadi sudah kita simpan dikomputer, yaitu :

1. Font1.SWF
2. Font2.SWF
3. Font3.SWF
4. sifr.css
5. sifr.js
6. blogger-sifr.js

Untuk menguploadnya file diatas kali ini saya akan mencoba menggunakan webs.com, sebenarnya untuk file .css dan .js kalian bisa menggunakan GOOGLECODE untuk penyimpanannya. Berikut saya jelaskan tahap-tahap upload di webs.com :

1. Silahkan Kunjungi webs.com untuk mendaftar terlebih dahulu
2. Isi Form yang telah disediakan

- Create your WebsID
- Set up your site
- Select a template for your site

3. Pada tahap "Set up your site" Kalian KLIK "HTML ONLY MODE"
4. Masukkan kode captcha / verifikasi lalu KLIK "CONTINUE TO NEXT STEP"
5. Masukkan alamat email kalian lalu KLIK "SUBSCRIBE"
6. Buka email kalian untuk Verifikasi kemudian Login dengan ID yang sudah kalian buat
7. KLIK TAB "SITE MANAGER"
8. Sekarang Waktunya mengupload File-file diatas dengan cara klik Tombol "SINGLE FILE UPLOADER"
9. Kemudian akan muncul Popup Windows untuk Upload File
10. KLIK "BROWSE" untuk mencari file yang kalian simpan di komputer kalian,
11. Klik "OPEn" lalu klik "UPLOAD FILE"
12. lakukan Hal yang sama untuk mengupload semua file diatas
13. PROSES Upload Selesai...

Catatan :
Untuk mengambil link File nya, Kalian Klik kanan salah satu file kemudian pilih "Copy Link Location"

** PEMASANGAN PADA BLOG

Setelah mengupload file-file di webs.com, sekarang waktunya untuk memasang pada blog. Silahkan ikuti petunjuknya dibawah ini :

1. Login Ke blogger kalian
2. Pilih Rancangan --> EDIT HTML
3. simpan script berikut diatas kode </head>

<link href='LINK WEBS.com Kalian/sifr.css' media='all' rel='stylesheet' type='text/css'/>
<script src='LINK WEBS.com Kalian/sifr.js' type='text/javascript'/>
<script src='LINK WEBS.com Kalian/blogger-sifr.js' type='text/javascript'/>



keterangan :
Silahkan kalian ganti kata LINK WEBS.com Kalian dengan URL Link yang kalian copy dari webs.com/

Contoh script punya saya :

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

4. Simpan template kalian dan lihat Hasilnya

** EDIT TAMPILAN DAN JENIS HURUF

Jika kalian ingin merubah jenis Huruf dengan huruf yang telah kalian upload tadi, ikuti tahapnya dibawah ini :

1. Buka file blogger-sifr.js dengan Notepad
2. Perhatikan kode dibawah ini :

var header= {
src: 'http://z33s.webs.com/fortheonehundredthtime.swf'
};
sIFR.activate(header);

var sidebar= {
src: 'http://z33s.webs.com/chewystewy.swf'
};
sIFR.activate(sidebar);

var postbody= {
src: 'http://z33s.webs.com/peasadie.swf'
};

ganti kode warna biru dengan Link Huruf kalian, Untuk bagian-bagiannya yaitu :

• Header = Huruf pada Header / judul Blog
• sidebar = Huruf pada Judul Sidebar
• Postbody = Huruf pada postingan yang meliputi : Judul posting, Tanggal, Label, dll.

3. Untuk merubah warna dan ukuran huruf, kalian utak-atik kode berikut :

Header :

sIFR.replace(header, {
selector: '#header h1',
fitExactly: false,
tuneHeight: -5,
css: ['.sIFR-root { color: #FFAAD4; font-size: 20px; font-weight: normal; text-align: left; }'
,'a { text-decoration: none; }'
,'a {text-transform:uppercase;}'
,'a:link { color: #FFAAD4; }'
,'a:hover { color: #FFAAD4; }'
],

Sidebar :

sIFR.replace(sidebar, {
selector: '#sidebar h2',
fitExactly: false,
tuneHeight: -5,
css: ['.sIFR-root { color: #696969; font-size: 23px; font-weight: normal; text-align : center;}'
,'a { text-decoration: none; }'
,'a:link { color: #696969; }'
,'a:hover { color: #696969; }'
],

Judul Posting :

sIFR.replace(postbody, {
selector: '.post h3',
fitExactly: false,
tuneHeight: -5,
css: ['.sIFR-root { color: #FF5D00; font-size: 25px; font-weight: normal; }'
,'a { text-decoration: none; }'
,'a:link { color: #FF3B00; }'
,'a:hover { color: #E83600; }'
],

dan yang lainnya, silahkan kalian ganti kode-kode warna diatas sesuaikan dengan template kalian. Untuk Kode HTML warna kalian bisa menggunakan Tools HTML warna, KLIK DISINI.

4. Kalo sudah selesai di EDIT, SAVE file blogger-sifr.js, kemudian upload lagi, ke hosting penyimpanan file. Copy Link nya lalu paste pada script HTML dan ganti yang sudah ada tadi.

Untuk jenis font, kalian bisa menggunakan font yang telah saya upload, atau kalian juga bisa menggunakan font yang sudah kalian upload sendiri.

http://z33s.webs.com/chewystewy.swf
http://z33s.webs.com/fortheonehundredthtime.swf
http://z33s.webs.com/peaangedawn.swf
http://z33s.webs.com/peasadie.swf
http://z33s.webs.com/photoshoot.swf

## untuk melihat tampilan font, copy salah satu Link font diatas dan paste pada address bar browser kalian, Klik ENTER, untuk mendownloadnya kalian bisa menggunakan caranya di artikel saya yang berjudul CARA MENDOWNLOAD FILE SWF.

Semoga bermanfaat...

Pesan Saya :
Intinya dari tips ini, kalian hanya perlu menyimpan 3 script tadi diatas kode </head>, jadi biar kalian ga pusing kalian bisa menggunakan script punya saya diatas.