Blog Tutorials
Tutorial - Changing your Post Titles with CUTE Fonts
December 29, 2010Bushra TajuddinSalam. ello lovelies~!! ♥
Some of you might wonder how do I changed my Post Title, Date and Side bar with those cute font. *wink!
I'm just a simple person. So, I'm not so into those fancy templates. I'm just looking for a simple templates available. Therefore, I opted for the simple standard templates in blogger with white background. Then, I'm thinking of changing the fonts of my Blog Title, Date and Side bar. Done! So simple, right?
BTW, Husna did ask me how do I changed them. Thus, I'm thinking of sharing them with you, lovelies. Well, let's just right to it!
Source of tutorial is from here.
First, pick your font out. You may find various source of fonts available on the net. Just pick one of your choice and download it.
Ensure the font is saved in your computer and is unzipped. Then, go here:
Follow the onscreen instructions to upload your font. When you’re going through the steps, you don’t have to change any of the options, just use what they have. When you get to Step 2, confirm that sIFR 3 r436 is checked (if anything else is checked, it won’t work!). Download and save your font (it will be a swf file).
Happy changing! Lurve u~!! ♥
♥ LurvyNote:
For further instructions and FAQs, you may refer to the original post, here.
Also download and save the four files below. (Right click and choose Save Target As or Save Link As)
Note: If you are using a new Blogger Designer template, and your sidebar titles are not changing, use this file instead of the one above:
Now you will need to create an account at HostWebs.com. When you get to step 2, be sure to select HTML Mode.
Once your account is created, use the File Manager to upload the swf font file and the above 4 files.
Click on the blogger-sifr.js file to edit it. You will need to customize this file for your blog. When you open it, this is what you’ll see:
var kevinandamanda = {
src: 'http://username.hostwebs.com/fontname.swf'
};
sIFR.activate(kevinandamanda);
In the second line, where it says
Replace username with your HostWebs.com username and fontname with the exact font name of your SWF file.
*Careful* This is a common typo area. Don’t delete the quotes around the font URL or the code won’t work. It should look exactly like it looks in the code above.
Now under that you’ll see three sections: Post Title, Date and Sidebar Titles. In those sections, you will see something like this:
css: ['.sIFR-root { color: #000000; font-size: 28px; font-weight: normal; }'
,'a { text-decoration: none; }'
,'a:link { color: #000000; }'
,'a:hover { color: #000000; }
See those three places where it says color: #000000; ? Change that six digit code, 000000, to whatever color you want. (You will need to know the 6 digit color code.)
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 the color if it's a link and people hover their mouse over it.
The second one changes the color if it is a link.
The third one changes the color 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! :)
You can also play around with the font size if you want it bigger or smaller. Just change 28 to a bigger or smaller number! :) (Try 32 if you want bigger, 20 if you want smaller.)
You can change the font color and size for all three sections. *Note* There are ultimately 9 places where you can change the font color: 3 in the Post Title section, 3 in the Sidebar section and 3 in the Date section. Be sure you change them all! :)
When you get done playing, click the button in the top left-hand corner to save the file.
This is the final step! Don't skip it! :)
Now it's time to implement the code into your Blogger/Blogspot blog. Go to your Dashboard. Click on Layout, then Edit HTML.
Look in that code and find the line that says (Look closely, it's not , it's )
(Quick Tip: Click CTRL-F to search for to easily find it in all that code)
Just above , copy and paste the following code:
This is another common typo area - Only paste this code once and only change where it says username. Don't add or change anything else here.
Save that.
Now go to your blog and see your new, customized look!!! :)
Happy changing! Lurve u~!! ♥
♥ LurvyNote:
For further instructions and FAQs, you may refer to the original post, here.
0 lovely message(s)
♥ Thank you for stopping by. Kindly leave your notes. Thanks a bunch~!! ♥