Tips - sIFR - Custom fonts for blogger

Some web site has using sIFR to get customizing their site with custom fonts, but have you ever thinking using sIFR on your blogger blog?

Sure, we can do that. Blogger give us right to write or including javascript from other page into our blog page. Cek out this blog , look at the tittle page and post tittle there is not a standard system fonts, this font was downloaded from other free font site.



What is this sIFR?
If you don't know what is this sIFR then you have to read this articles.

So, how can i make this blog with non standard font?
First you need a hosting server that allow javascript and css files to put on their server (i.e. geocities), then upload the sIFR files into the hosting server.

I don't have the files!
Owh.. then you need to download the sIFR2 here and don't forget to read the manual before reading this article. Next unzip the files, edit the sifr.fla and export it using your own fonts (Tips, named the exported flash with the font name for easy use) then upload the exported flash, sIFR-print.css, sIFR-screen.css, sifr-addons.js and sifr.js to your hosting server.

Ok, i have the file and uploaded them to my free hosting server.
Then go to your blogger account, open "Edit HTML" on blogger template panel, then write this code below the <head> tag.

<link href="http://urlofyours/IFR-screen.css" rel="stylesheet" type="text/css" media="screen" />
<link href="http://urlofyours/IFR-print.css" rel="stylesheet" type="text/css" media="print" />
<script language="javascript" src="http://urlofyour/sifr-addons.js"></script>
<script language="javascript" src="http://urlofyours/ifr.js"></script>

Change the <, > and " with the following code;
The code should be like this:

Next edit this below script for customize font name, color, selector tag, class or element id.

<script type="text/javascript">
if(typeof sIFR == "function"){
sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"http://urlofyourfs/font2.swf", sColor:"#00000" ,sLinkColor:"#000000", sHoverColor:"#CCCCCC", sWmode:"transparent", sFlashVars:"underline=true"}));

sIFR.replaceElement(named({sSelector:"h2", sFlashSrc:"http://urlofyourfs/font2.swf", sColor:"#00000" ,sLinkColor:"#000000", sHoverColor:"#CCCCCC", sWmode:"transparent", sFlashVars:"underline=true"}));

sIFR.replaceElement(named({sSelector:"h3", sFlashSrc:"http://urlofyourfs/font3.swf", sColor:"#00000" ,sLinkColor:"#000000", sHoverColor:"#CCCCCC", sWmode:"transparent", sFlashVars:"underline=true"}));
};
</script>

sSelector = Selected element (Tag, ID or class),
sFlashSrc = source of the fonts (Swf files),
sColor = Font Color,
sLinkColor = Links Color,
sHoverColor = Links Hover Color,

If you are done with customizing then write the script above the </body> tag, and again convert the <, >, and " first.


Preview it and if you satisfied, save the template.
Below link is the sample blog using sIFR2.

Links :
http://sample-000.blogspot.com/