Here's how to tweak your blogger-sifr.js file:
WARNING: When editing this code, copying and pasting, deleting lines, etc - Please be very careful and DOUBLE check your work. If you accidentally delete one little punctuation mark that you're not supposed to, or if you leave some lines in there that you're supposed to delete, or if you paste code in the wrong spot, etc the entire code won't work.
var kevinandamanda = {
src: 'http://username.webs.com/fontname.swf'
};
sIFR.activate(kevinandamanda);
Link to the font - Replace this with the link to the SWF file you uploaded
If you want to use more than one font, find the above lines in your blogger-sifr.js code and copy and paste a duplicate right underneath it.
Change where it says kevinandamanda to something else, like newfont. Replace the link to the font with the second SWF file. You will also need to change where it says kevinandamanda (in the code below) to newfont in the section where you want to second font to appear (sidebar, date, header, or description).
Customization for the code below: Here are a few things you can change.
COLOR:
You can change the six digit color code (FA4C8C) to whatever color you want.
The first one changes the color if it's not a link.
The second one changes the color if it is a link.
The third one changes if it's a link and people hover their mouse over it.
Usually the first two are the same color and the third one is a different color.
Here's a color slider to help you pick your color and get the code. Or I use a cool Firefox plugin, Colorzilla. It lets you click on any color on any webpage (like a background that's already on your blog) and it'll copy the color code to your clipboard. Then all you have to do is paste the code where it goes. I use this addon all the time! :)
FONT SIZE:
You can also play around with the font size if you want it bigger or smaller. Just change the green number (28) to a bigger or smaller number! :) (Try 32 if you want bigger, 20 if you want smaller.)
This block of code changes your Post Title. If you want to use the default Blogger font for your Post Titles, delete these lines:
sIFR.replace(kevinandamanda, {
selector: 'h3.post-title',
fitExactly: true,
tuneHeight: -5,
css: ['.sIFR-root { color: #FA4C8C; font-size: 28px; font-weight: normal; }'
,'a { text-decoration: none; }'
,'a:link { color: #FA4C8C; }'
,'a:hover { color: #FA4C8C; }'
],
wmode: 'transparent',
ratios: [6, 1.93, 10, 1.92, 13, 1.86, 17, 1.82, 21, 1.8, 29, 1.79, 32, 1.78, 33, 1.77, 36, 1.78, 43, 1.77, 44, 1.76, 47, 1.77, 70, 1.76, 71, 1.75, 74, 1.76, 75, 1.75, 76, 1.76, 1.75]
});
End of Post Title code.
This block of code changes the Date. If you want to use the default Blogger font for your Date, delete these lines:
sIFR.replace(kevinandamanda, {
selector: 'h2.date-header',
fitExactly: true,
tuneHeight: -5,
css: ['.sIFR-root { color: #FA4C8C; font-size: 20px; }',
'a { text-decoration: none; color: #FA4C8C;}',
'a:hover { color: #FA4C8C;}'
],
wmode: 'transparent',
ratios: [6, 1.93, 10, 1.92, 13, 1.86, 17, 1.82, 21, 1.8, 29, 1.79, 32, 1.78, 33, 1.77, 36, 1.78, 43, 1.77, 44, 1.76, 47, 1.77, 70, 1.76, 71, 1.75, 74, 1.76, 75, 1.75, 76, 1.76, 1.75]
});
End of Date code.
This block of code changes the Sidebar Titles. If you have a third column, copy and paste the following lines at the bottom of this file. Change the word "sidebar" to the name of your third column. Only the word sidebar, don't mess with the # or the h2.
sIFR.replace(kevinandamanda, {
selector: '#sidebar h2',
fitExactly: true,
tuneHeight: -5,
css: ['.sIFR-root { color: #FA4C8C; font-size: 28px; font-weight: normal; }'
,'a { text-decoration: none; }'
,'a:link { color: #FA4C8C; }'
,'a:hover { color: #FA4C8C; }'
],
wmode: 'transparent',
ratios: [6, 1.93, 10, 1.92, 13, 1.86, 17, 1.82, 21, 1.8, 29, 1.79, 32, 1.78, 33, 1.77, 36, 1.78, 43, 1.77, 44, 1.76, 47, 1.77, 70, 1.76, 71, 1.75, 74, 1.76, 75, 1.75, 76, 1.76, 1.75]
});
End of Sidebar code.
This block of code changes the BLOG TITLE. Add this to the bottom of your blogger-sifr.js file if you want to change the font of your BLOG TITLE.
sIFR.replace(kevinandamanda, {
selector: 'h1.title',
fitExactly: true,
tuneHeight: -5,
css: ['.sIFR-root { color: #FA4C8C; font-size: 32px; font-weight: normal; }'
,'a { text-decoration: none; }'
,'a:link { color: #FA4C8C; }'
,'a:hover { color: #FA4C8C; }'
],
wmode: 'transparent',
ratios: [6, 1.93, 10, 1.92, 13, 1.86, 17, 1.82, 21, 1.8, 29, 1.79, 32, 1.78, 33, 1.77, 36, 1.78, 43, 1.77, 44, 1.76, 47, 1.77, 70, 1.76, 71, 1.75, 74, 1.76, 75, 1.75, 76, 1.76, 1.75]
});
End of Blog Title code.
This block of code changes the BLOG DESCRIPTION. Add this to the bottom of your blogger-sifr.js file if you want to change the font of your BLOG DESCRIPTION.
sIFR.replace(kevinandamanda, {
selector: '.description',
fitExactly: true,
tuneHeight: -5,
css: ['.sIFR-root { color: #FA4C8C; font-size: 28px; font-weight: normal; }'
,'a { text-decoration: none; }'
,'a:link { color: #FA4C8C; }'
,'a:hover { color: #FA4C8C; }'
],
wmode: 'transparent',
ratios: [6, 1.93, 10, 1.92, 13, 1.86, 17, 1.82, 21, 1.8, 29, 1.79, 32, 1.78, 33, 1.77, 36, 1.78, 43, 1.77, 44, 1.76, 47, 1.77, 70, 1.76, 71, 1.75, 74, 1.76, 75, 1.75, 76, 1.76, 1.75]
});
End of Blog Description code.
If you want to change the code for your *entire* blog post, there is a tutorial here.
No comments:
Post a Comment