Blogging: Tips and Tricks (Font Changing)

For this article, I'm going to keep it to a very basic layout so that there's no clashing code. Sorry for those who anticipate nice looking articles - but the series of articles I'm going to be doing will help you do the same thing as the few of us who uses any type of code in our comments or our blog articles. I'm going to show you some very basic things today as to how to actually change your font, font background, and some boarders. Boarders are a bit more complicated, depending on how elaborate you want to get with them - but giving you the basics should at least help you learn how to modify the code to suit your own needs.

Changing your Font Colour

This is the easiest thing one can do to show a little creativity or add spunk to their comment. On your blog though, you can use the WYSIWYG (W.hat Y.ou S.ee I.s W.hat Y.ou G.et) editor (it makes things easier altogether). However, for the time being, you cannot do this with your comments - unless you use 'code' (or scripting, as I see it). So here's the most basic of way to change your font colour/s:

<FONT COLOR="purple">What you want to say here</span>

And it'll change your font colour to purple, pretty basic and to the point - no real exhaustion there. It just looks more complicated than it really is. With colours, you can either use basic wording (red, blue, green, yellow, etc) or you can Google the phrase "color codes" and find a list of different colours that are more 'complicated'. With these codes, you do have to include the # (hash sign) and the letter/number combination. You should probably remember this tidbit because it works with pretty much all of the tricks I'm going to be teaching you today.

Changing your Font Background (Image and Color)

Of course, after you've changed your font color, you'll get more interested in changing the background color or adding an image to the text you've written. We'll start off with the easier one: background colour. It's simple, to the point, and can easily be mixed in with the font color code before this. There are only a few people using font backgrounds; a handful at best, and I think it would be more interesting to see other people try to make comments with backgrounds or different coloured text. So here we go...

<span style="BACKGROUND-COLOR: purple">What you want to say here</span>

Of course, the most problematic thing with this little toy is that without adding more in there, it'll be black text on purple background. A little hard to read, isn't it? So you might want to change things around a bit so it's easier to read.

<span COLOR="white" style="BACKGROUND-COLOR: purple">what about now?</span>

This is far easier to read than the previous bit, definitely. This is always a good thing, because with you changing your font color and the background color it leads to more combinations than you can think. There are some things with text that makes your comment stand out, in case you want to make sure more people actually read your comment - instead of skipping over it. So now we go onto a more complicated trick....... adding a background image to your text. This is my personal favourite, so I'll try to be as easy-going as possible here.

<span style="background-image:url('link to your image')"> Text here</span>

It should turn out to be much like this. And you can add a few other features to it as well, such as color, font type, and bold/italics. And again, I'm going to show you how you can change some of these options just so you don't get too confused and start hating me for not showing you how to change your font color (as you can tell, it's once again very difficult to read that). Once again, here we go with the code:

<span style="background-image:url('link to your image'); color: white;">What you want to say here?</span>

This is just a taste as to what you can do with mixing up images as your background. Don't go too crazy with it, because then it'll just look way too tacky. Then you'll get a bunch of people complaining that you have way too many images as backgrounds and it takes forever to load properly. Make sure you use a reliable host for your image hosting. I, personally, use my own domain - but you can use places like Photobucket and Imageshack to host your images. If you don't use a nice and reliable host, then you'll find that it takes longer to load pages with your background - the text will appear just fine though.

How to Put a Border Around Your Text

This can get a little tricky, so it isn't as though as I expect everyone to understand. I don't use this...yet. I'm more inclined to use Tables, which I will discuss at another time (for those interested, it's how I align my images and created my last article {Florensia Preview}). For now, we'll jump into borders and what you can do with them.

<div style="margin:5px;width:200px;border:10px solid black;padding:8px;">Lets see what this looks like here</style></div>