Time to change your templates!

You know I change mine ALL the time, I guess I get bored easily.

I've had a lot of questions on how I do it, where I learnt HTML and if there's a way I can teach you all some tricks to making your own templates.

I pretty much taught myself everything I know, the easiest way is to find one of the free templates you like and then go from there......the more you mess with it, the more you will learn what code does what. I would suggest though doing what I did.....setting up a separate blog for templates so that you can play around and if it gets lost or really messed up, you won't be affecting your main blog.

So first steps:

1 - Make a separate blog for your templates
2 - Find a free template that you like and download it. You can find some great ones at Pannasmontata and Caz Templates
3 - Once you find the template you like, copy it into your blog



Now we're ready to start. I'm going to give you a free template for you to play with, so download THIS template and paste it into your templates blog.

Don't freak out, all that code is actually easier than you think and once you know what it does you will be like me, shocked at how easy it really is.

The first thing you're going to do is make yourself a new header. Use a program like PaintShop Pro or Photoshop to make it, just remember to look at your template to see how big you need to make it.

But before we get into that, how about something quick.....like changing your background?

Scroll down on your template to this part of the code:

body {
margin: 0px 0px 0px 0px;
background-image: url("http://img267.imageshack.us/img267/2743/pattern1402jq3cg0.jpg");
text-align: center;
font-family: 'Geneva', Verdana, Times, sans-serif;
}

See where it says Background-image: the code in bold is where you need to insert the link to your background image. Try a few until you're happy with the one you like.

By changing the way it's worded, you can also make it a solid color.

body {
margin: 0px 0px 0px 0px;
background-color: #ffffff;
text-align: center;
font-family: 'Geneva', Verdana, Times, sans-serif;
}

Now, it will make the background white. Just play around with that a bit.

Next thing you're going to learn is how to change the color of your links. Right under the Body Code is this one:

a:link, a:visited, a:active {color: #b8707b; text-decoration: none ;}
a:hover {color: #Ffffff; background-color: #000000; }

The first line will be the color of your links as they will show up on the blog. The second line is what it will look like when you click on it with your mouse. You know how sometimes links will change to a different color when you hover over it???? That's where it's done.

The part that says text-decoration, is also a fun one to play with. If you add text-decoration: underline.......then your links will have an underline. You could also do text-decoration: underline overline......then the link would have two lines one on top and one on bottom. I prefer to use that code under my hover rather than my actual link color. All you do is add that code to the bottom right after background-color.

Go ahead and play around with that one too. Don't forget to save your changes as you go so you don't loose it all.

Next time we're going to make our own headers, so make sure you have a graphics program you can use. You can download free 30 day trials from Paint shop Pro and Photo shop. I use Paint shop Pro for mine.

Remember that I'm in NO way an expert and I'm sure other blog designers use different techniques, I'm just sharing with you what I do know of HTML and how I change my blog.

Hope this helps a bit, I can't wait until you all start doing your own designs.