Using sIFR 2.0 in Blogger Templates

sIFR is one of the alternative way to change font type to beautify typography, especially in the heading (H1, H2, etc.), like Cufón. This time I’ll share how to use sIFR 2.0 in blogger templates.

The Steps

1. Download sIFR 2.0
2. Upload the javascript files from the downloaded zip file, those are sifr-addons.js and sifr.js.
   If you busy to upload those files, copy below code and paste before </head>
   

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

3. Put the CSS code from the zip file, those are sIFR-screen.css and sIFR-print.css. If you busy to do that, copy below code and paste before </head>
   I’ve compress these codes.
   

   <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. This is the most importance to use your desire font type.
   Actually when we download sIFR 2.0, it already bundled with flash file to make a font, but there is easier way:
   • Choose your desired font and save in desktop (because if it still in WINDOWS/font, it can be uploaded)
   • Generate your chose font to be a swf file at sIFR Generator. Upload your font, then next and next until finish and download it. In step 2, choose sIFR version 2 because we use this version.
   • Upload the downloaded file to image shack, because image shack can store swf file. After uploaded, take the link, e.g. .
   • Then the last, put javascript below to activate your chose font. Change the URL to your uploaded font link.
     

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

     You must change the red code to your uploaded font URL.

5. it’s done! You can edit above code to adjust with your template character, either font size or color.

Note:
The weakness of this sIFR 2.0 is the link text become inactive. So, don’t use heading tag (H1, H2, etc.) for text link.