Requirement:
- sIFR3 (download here) and extract to a folder
- Fonts
- At least Macromedia Flash 8 installed on your system
- Free Hosting for sIFR3 files (Geocities or Google Page)
- A dummy blog
- A text editor (notepad++ recommended)
Preparing your font
Go to sIFR3 extracted folder, navigate to flash folder and double click on sifr.fla or edit the file using Macromedia Flash 8.
Double click on white area, and you should see text "Bold Italic Normal". Now look down on properties bar and change the font.
Save your work and then export it as a flash movie and name it the same as the font name. Now go to your hosting account and upload the exported flas file. You can use Yahoo Geocities or Google pages to host your files for free.
Edit and Upload CSS file
In this session you have to now at least basic CSS manipulating skill like padding margin colloring and other basic CSS. Now go to css folder and you should see 2 files on it that is sIFR-print.css and sIFR-screen.css.
Edit sIFR-screen.css using text editor and scroll down to "---- Header styling ---" line and add the following code bellow those line.
.sIFR-active .post-title{
visibility: hidden;
font-family: Verdana;
line-height: 1em;
padding: 10px 0 0;
}
Look a above code, ".post-title" is class name of Post Title on blogspot. If you want to set sIFR3 on another class just change the class or add another code with different class (You can set sIFR3 to multiple class name).
Upload sIFR-print.css and sIFR-screen.css to hosting server if you're done with editing (You can edit sIFR-screen.css latter directly from your hosting server).
Edit and Upload js File
Next go to js folder and you should see 1 folder and 3 js files. Edit sifr-config.js using text editor and add following code.
var newfont = {
src: 'http://files.googlepages.com/Dynasty.swf'
};
sIFR.activate(newfont);
sIFR.replace(newfont, {
selector: '.post-title'
,wmode: 'transparent'
,css: [
'.sIFR-root: { color: #333333; background-color: #f3f3f3 ;}'
,'a { text-decoration: none; }'
,'a:link { color: #0000FF; }'
,'a:hover { text-decoration: underline; }'
]
});
Change url of font (text with red color) to url of yours. Look at selector tag, this should be the same as class name on sIFR-screen.css. You can change appearance style of your sIFR on css section (text with green color).
Upload sifr.js and sifr-config.js to your hosting server when you're done with editing.
Edit Blogspot layout
Login to your blogspot account and go to Layout and then click on Edit HTML. Add the following codes on header section (Bellow <head> tag).
<!-- sIFR3 start -->
<link href='http://files.googlepages.com/sIFR-screen.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='http://files.googlepages.com/sIFR-print.css' media='print' rel='stylesheet' type='text/css'/>
<script src='http://files.googlepages.com/sifr.js' type='text/javascript'/>
<script src='http://files.googlepages.com/sifr-config.js' type='text/javascript'/>
<!-- sIFR3 End -->
Change url of sIFR3 files to url of yours (text with red color), click preview to see the result (Tips: Try view your result using Firefox or IE, Opera will not give you any good result because it doesn't support sIFR). If everything is OK you can save template and repeat those steps to your main blog.
Remember to backup your main template before implementing this steps to your main blog, just in case if you have a problem with it and you can restore it in any time. One more, do not copy and paste above codes without editing the red colored text (files URL), because those are just examples, your sIFR3 will not working if you still use those URL.
0 comments:
Post a Comment