My Blogger Template

I have been getting a lot of people asking how I made my template for my blog, so I thought a little tutorial might be nice.

1) First of all, you need to get a photobucket account if you don't have one already. It's free, so no worries there. This is where I download the free scrap booking paper and then add it to my blog. Go to www.photobucket.com to sign up.

2) Next, you need to decide what type of paper/style you want your blog to have. The best site that I have found for free scrap booking kits is Shabby Princess. Go to www.shabbyprincess.com to view the free kits. Of course, there are other sites, but this has been my favorite.

3) Download the kit of your choice and save it to a file. I have a separate file for the Shabby Princess kits in My Documents, so I always know where they are and I can change my templates at any time.

4) This is where your photobucket account comes in. Go to www.photobucket.com and download the papers that you are planning on using on your blog.

5) Open a new tab on your Internet (so you can easily go between the two sites quickly) and go to your blog site and log in.

6) Go to "Customize" on your blog's dashboard. Then click on "Layout". Then click on "Edit HTML"

7) Then go to "Pick New Template" and choose the Minima template.

8) Where it says:
body {
background:#ffffff
Replace "background:#ffffff" with background-image:url(URL);background-repeat:repeat-xy;);background-repeat:repeat-xy;

Go to photobucket and click on the paper that you want on the border of your blog. (mine is blue with a red damask design.) Once you click on it, there is an option for a "Direct Link". Copy and paste that link into where it says URL.


9) Next, Underneath where it says:
#outer-wrapper {
Copy and paste the following:
background-image:
url(URL);background-repeat:repeat;

Go to Photobucket again and choose the paper that you want in the middle. (Mine is plain blue) It should be something only one color so that people can still read your blog.Click on it and copy the "Direct Link". Highlight URL and paste the "Direct Link" inside the parenthesis.

Change the width to say: 935px;

10)Underneath the #main-wrapper { :
Change it all to say:

#main-wrapper {
width: 635px;
float: left;
margin:15px auto;
padding:0px;
float: right;

11) Underneath #side-bar wrapper { :
Change it to say:

width: 220px;
width: 250px;
margin:15px auto;
padding:0px;
float: left;

12) As far as the Header goes, I just made mine in Photoshop. I'd be happy to help you do that as well. Just let me know.

Keep in mind that I played with this HTML stuff FOREVER. I hope that I got all the information in and that it is easy to understand. Please let me know if something is confusing. I'd be happy to help. If you like the look of someone's blog, you can always right click and go to "view Source" and it will show that blog's HTML codes so you can compare it to yours to see what you want to change.

Leave me a comment with your blog address after you change stuff so that I can take a look!

Good luck!