Simple steps to add font to your blogger post title with sIFR3

Previously i write another post about customize your blog with sIFR2, today i am gonna show you simple steps to change your title post font with sIFR3, but first you need to download the latest sIFR3 here and extract to a folder. Next, we need to edit some files from bundled sIFR3 files.

sifr.fla

  • In flash folder, open sifr.fla using macromedia 8 or later
  • Double click to edit the font
  • Select your desired font
  • Export your edited to a new swf movie (Export -> Export Movie), i'ts recommended to named your exported movie same as selected font name
  • Upload this exported swf to your file hosting (e.g. geocities.com).
sIFR-screen.css
  • In css folder, open sIFR-screen.css with any text or html editor (e.g. notepad or wordpad)
  • Add below code to end of line:

.sIFR-active .post-title {
visibility: hidden;
font-family: Verdana;
line-height: 1em;
font-size: 18px;
}

Note: .post-title is default class of blogger title post.

  • Save your edit and upload this file (sIFR-screen.css) and sIFR-print.css to your hosting server.
sifr-config.js
  • In js folder, open sifr-config.js with any text/html editor, You'll see empty space there
  • Write below code to this file:

var myFont = {
src: 'http://your.hosting.com/where/is/your/font.swf'
};

sIFR.activate(myFont);
sIFR.replace(myFont, {
selector: '.post-title'
,wmode: 'transparent'
,css: [
'a { color: #465dd2; text-decoration: none; }'
,'a:link { color: #465dd2; }'
,'a:hover { text-decoration: underline; }'
]
});

Set font source on above red line.
Set font and link color on above green line.


  • Save your edit, upload this file (sifr-config.js) and sifr.js to your hosting server.
Go to your blogger account and navigate to "Edit html" panel, then add below code to your head area.

<link rel="stylesheet" href="http://your.hosting.com/where/is/your/sIFR-screen.css" type="text/css" media="screen">
<link rel="stylesheet" href="http://your.hosting.com/where/is/your/sIFR-print.css" type="text/css" media="print">
<script src="http://your.hosting.com/where/is/your/sifr.js" type="text/javascript"></script>
<script src="http://your.hosting.com/where/is/your/sifr-config.js" type="text/javascript"></script>

Edit red marked url with url of your sIFR files. Preview your template, and if everything is OK save it.
For example blog see my title post, happy trying and goodluck.

Links:
http://wiki.novemberborn.net/sifr3/
sIFR 2 for blogger