Thursday, March 8, 2007

Blog Tutorial: Advanced: Changing Your Font Color

For those who want to add a personal touch on your blog, at least visually, this tutorial would be very helpful to you.

If you've noticed, the Sanrio Town Blog uses a now-constant shade of pink in the entries. You can also change the appearance of your entries, and this is by using color codes, or hex codes as these are technically known, such as what you see at Web Monkey. There are two ways on how you can use these:

Easier Approach
After typing in your entry, switch from "Editor" to "HTML" on your composer by clicking on its tab. Go to the very beginning of your entry, at the very top right before the text you've typed. Enter '< font color="xxxxxxx" >' but remove the spaces between the brackets. What's inside the single quotation marks, or rather, what does xxxxxx mean? This is where you paste the hex code that represents the font color of your choice. On the website provided above, this is the code found on the immediate left of the color.

Examples:

The color of the text of the Sanrio Town Blog is the code #ff6699, so what I should enter at the beginning of the post (remember, on HTML mode) is < font color="#ff6699" >, but without the spaces between the brackets.

If you want to use the color red, substitute #ff6699 with #ff0000 to get a bright shade of it.
After you choose the color that you want, scroll down to the very bottom of the post (while you're still on HTML mode) and then close it all by typing < /font > (removing the spaces between the brackets). Check the post by switching back to Editor Mode. The entire post should then be in the color that you chose it to be.

Harder Approach

This is for those who want to use a lot of font colors for their entries. Instead of changing the color of the text in one single sweep, you can only do this by selecting each character, sentence, or paragraph and changing its color one at a time.

As what was instructed previously, switch from "Editor" to "HTML." The process is almost exactly the same as the earlier set of instructions, except that this time, you have to put the code and then close it individually. Say, in one paragraph/sentence/character, you begin it with the usual < font color="xxxxxxx" > and then close it with < /font >. Since the next paragraph/sentence/character will be using a different color, you should start with < font color="xxxxxxx" >, entering a different hex code again, and then closing it again with < /font>.

Note: It is very important to close the code, otherwise, the color you want to use would not be implemented.

Let's have some examples again.

This is a shade of blue. This is made by typing < font color=#3333FF > at the beginning.

Now I switch to green. I did this by closing the previous sentence on HTML with < /font > and then entering < font color="#66CC33" >, of course, without the spaces in between the brackets and then closing it again.

Now, if I wanted something more fun, I would be using different colors for each word like this by entering the proper hex codes at the beginning and then closing it at the end of each word.

Separate letters can also be changed like this.

Check out again next week's tutorial. We'll be featuring a how-to on changing the font size of your text.

0 comments: