Turbo-decorate your blog posts!

Sunday, August 12, 2007

If you want to soup up your blog posts, by using common windows fonts then here is an easy three-step method that I've adopted. This does not require any heavy weight blogging clients, but merely requires simple html, the sort of which can be easily done in any html editor. (I recommend Editplus, 'cause it's one of the best, is free, and never expires).


Step 1:

Wrap your text in the html snippet as shown. Use common fonts which are available in Windows.



( Replace the [ ] by < > )

The font size can be changed by changing the % size. similarly, you could change the font colour by spanning the text by:

[font color="#ff6600"]test[/font]


( Replace the [ ] by < > )

You would need to type out the above snippet, because for some unknown reason, Blogger strips off the font-family part of the code!)


Step 2:

If you want to add emoticons to your posts WITHOUT uploading images (!!), then merely add the following snippet just before your text. (The position has been shown by an * before the text in this case just before "test" in the line above).

You can use the emoticons listed at the end of the post, instead of the "smile_tongue.gif" in the above exapmple.


* [img src="http://picturelli.com/images/emo/smile_tongue.gif" valign="absmiddle" alt=":-P" border="0" /]

( Replace the [ ] by < > )


Step 3:

If you want to give a coloured background to your text, then add this html snippet hust BEFORE the text, in this case, just before "test".

**

That's it! This opens up infinite possibilities!!


Here are two examples: One with the background highlighted, and one without.
(Note that I've tried to use a "digifaceWide" font which has been installed on my PC, and while it displays fine on my PC it will NOT on others, unless they have installed the same font! Still, a lot can be done with the usual Windows fonts by changing the color and size, not to speak of the many enhancements that CSS can bring.

Example 1:

test :-P


Example 2:



Test :-)



If you want to bold or italicise something, merely enclose it by this html snippet, deleting what you do not need, or alternatively, use the Blogger composer to span a word or a para of text. ( Don't block any customised code and change the font through Blogger! It will strip off your custom code!)

[span style="font-style: italic; font-weight: bold;"]test[/span]

( Replace the [ ] by < > )

Do note that when you post in Blogger, ensure that the post screen is in "html" mode. Do NOT use the Blogger composer for fonts if you are adopting this method. Do the entire html in Editplus or another html editor only.


I said it was easy, and it really is! Have fun!!


A List of emoticons for you to use:

smile_smile.gif
smile_wink.gif
smile_tongue.gif
biggrin.gif
smile_cool.gif
smile_lol.gif
smile_wub.gif
smile_wink.gif
smile_devil.gif
smile_rolleyes.gif
smile_rolleyes.gif
smile_undecided.gif
smile_sad.gif
smile_crying.gif
smile_blink.gif
smile_ohmy.gif
smile_huh.gif
smile_unsure.gif
smile_thumbdown.gif
smile_thumbup.gif
smile_mad.gif
smile_punk.gif


Read more on this article...

Posted by Pithaly at 6:20 AM 0 comments