Menggunakan sIFR 2.0 di 'Blogger Template'

Demo

sIFR adalah salah satu fasilitas alternatif pengganti jenis font untuk memperindah 'typography', khususnya pada heading (H1, H2, dll), sama seperti halnya dengan cufon. Kali ini saya akan mencoba menggunakan sIFR 2.0 di 'blogger template' (sIFR sekarang telah keluar versi 3.0).

Tahapan Menggunakan sIFR2 di 'Blogger Template'

1. download sIFR 2.0.
2. Upload file javascript di google code hasil dari download sIFR 2.0 tadi, yaitu sifr-addons.js dan sifr.js.

Kalo ngak mau repot upload, pake script berikut ini simpan dibawah </head>:

<script src='http://choenblogspot.googlecode.com/files/sifr.js' type='text/javascript'></script>
<script src='http://choenblogspot.googlecode.com/files/sifr-addons.js' type='text/javascript'></script>

3. Masukan code CSS hasil anda download sIFR 0.2 (yaitu: sIFR-screen.css dan sIFR-print) di edit HTML, template anda.

Kalo ngak mau repot copy paste code berikut dibawah </head>:

<style media='print' type='text/css'>
/* This is the print stylesheet to hide the Flash headlines from the browser... regular browser text headlines will now print as normal */

.sIFR-flash, .sIFR-flash object, .sIFR-flash embed {
display: none !important;
height: 0;
width: 0;
position: absolute;
overflow: hidden;
}

span.sIFR-alternate {
visibility: visible !important;
display: block !important;
position: static !important;
left: auto !important;
top: auto !important;
}

</style>
<style media='screen' type='text/css'>
/* These are standard sIFR styles... do not modify */

.sIFR-flash {
visibility: visible !important;
margin: 0;
}

.sIFR-replaced {
visibility: visible !important;
}

span.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1 {
visibility: hidden;
font-size: 16px;
letter-spacing: 40px;
}

.sIFR-hasFlash h2 {
visibility: hidden;
letter-spacing: -9px;
font-size: 14px;
}

.sIFR-hasFlash h3 {
visibility: hidden;
letter-spacing: -6px;
font-size: 20px;
}

.sIFR-hasFlash h4 {
visibility: hidden;
letter-spacing: -5px;
font-size: 21px;
}

.sIFR-hasFlash h5 {
letter-spacing: -4px;
visibility: hidden;
font-size: 14px;
}

.sIFR-hasFlash h6 {
letter-spacing: -4px;
visibility: hidden;
font-size: 12px;
}

</style>

4. Ini tahapan terpenting dari sIFR untuk menggunakan jenis font yang anda inginkan.

Sebenarnya ketika kita download sIFR 2.0 sudah disertakan file flash untuk membuat font, tapi ada cara lebih mudah, yaitu:

a. Pilih jenis font yang anda inginkan, atau cari di tempat yang menyediakan free font, kemudian simpan di desktop (sebab kalau masih di windows/font tidak bisa di upload).

b. Generate font yang anda telah pilih agar menjadi file swf, di sIFR Generator. Caranya tinggal anda upload font anda, kemudian next dan next sampai akhir hingga download. pada Step 2: Choose sIFR version, pilih sIFR 2, karena kita menggunakan sIFR 2.0.

c. Hasil donwload dari sIFR Generator, file font tersebut telah berupa '.swf', kemudian file swf tersebut perlu anda upload ke image shack, karena image shack bisa menyimpan file berbentuk .swf. Setelah anda upload ada ambil linknya, misalnya: http://img195.imageshack.us/img195/2534/copystruct.swf

d. Kemudian terakhir anda masukan javascript berikut untuk mengaktifkan font yang anda telah pilih tersebut, dengan cara semua alamat font dibawah perlu anda rubah sesuai font anda yang telah anda upload di image shack, disini saya menggunakan 3 jenis font untuk H1, H2 dan H3.

script tersebut, simpan dibawah </head>:

<script type='text/javascript'>
//<![CDATA[
/* Replacement calls. Please see documentation for more information. */

if(typeof sIFR == "function"){

// This is the preferred "named argument" syntax


sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"http://img291.imageshack.us/img291/2028/hotelcoralessexregular.swf", sColor:"#AD3C00", sWmode:'transparent'}));

sIFR.replaceElement(named({sSelector:"h2, h4, h6", sFlashSrc:"http://img199.imageshack.us/img199/2368/motorway.swf", sColor:"#2F1F00", sWmode:'transparent'}));


sIFR.replaceElement(named({sSelector:"h5", sFlashSrc:"http://img508.imageshack.us/img508/6843/jamesfajardo.swf", sWmode:'transparent'}));

};


//]]>
</script>

>> code berwarna merah tersebut yang perlu anda ganti dengan alamat font swf anda.

5. Sip Selesai, silahkan anda kutak katik kembali semua script/code diatas untuk menyesuaikan dengan karakter template anda, baik itu ukuran font dan warna.

>> catatan kelemahan sIFR 2.0 ini, untuk text link yang menggunakan sIFR tidak aktif. jadi jangan menggunakan heading (h1,h2 dst) untuk text link.

:: lihat juga penggunaan cufon pada 'blogger template'.

Posted in: Blogger,Font,Tutorial