October 27, 2010

How to Change your Blog Background

Are you ready for the simplest blog tutorial ever? I'm not even joking. You better love me for this because I am sharing with you one of my deepest, darkest secrets. :) Actually, I gotta give my hubby credit for this tutorial because he is the one who taught me how to do it. Do you ever wonder why I'm constantly changing the background on my blog? Well, I might have a little blog OCD, but changing the background is so easy I can't help it.

I don't know about you, but I quickly got tired of all those free background websites {like The Cutest Blog on the Block, Hot Bliggity Blog, etc.}. Those places are great to start out with when you are new to blogging, but after a while, those backgrounds are just blah. And there is nothing more annoying than having "The Cutest Blog on the Block" hanging at the top left corner of your blog. Does that bother anyone else? Or is it just me and my picky self?

So, do you want to know my secrets to finding great backgrounds? Sure you do.

Step One: I search in Google "free digital scrapbooking kits" and then click the tab "images" so I can see lots and lots of kits all at once. There are a lot of digital scrapbooking sites out on the web that provide background freebies for personal use. There are also scrapbooking kits you can purchase as well, and most cost only a few bucks. I usually stick with the freebies. Anyway, just look around at different kits, and once you find a couple you like, follow the simple instructions for downloading it {usually just a click of a button}, and you'll have some new backgrounds on your desktop to try out.

Step Two: Locate on your computer where you saved your background {I always save on the desktop, so it is easy to find}.

Step Three: Open up your Photobucket or Flickr account and upload the background image from your desktop {or wherever you saved it}. The arrow below is pointing to the background I want to use, so I click it, and then it will upload to Photobucket.

Photobucket

Step Four: Once your background image uploads, you will see the box below to the left of your screen. Copy the Direct Link.
Photobucket

Step Five: Seriously, we are almost done. Can you believe it? Go to Blogger and click the "Design" tab. Under the Design tab you will see three options: Page Elements, Edit HTML, and Template Designer. Click Edit HTML. As a word of warning, any time you are going to be editing the HTML code, you want to back it up first! I always copy it and send it to myself in an email so if I mess up I can get my blog back to the way it was before I started messing with it. So do that right now before we move on.

Step Six: Okay, now that we have that saved, we can work in the Edit HTML tab. Click the tab and you will see something like this:

Photobucket

Here is a little trick that will help you find exactly what you are looking for without having to scroll through the whole code. Use the find function: click Ctrl + F, and it will bring up a search box. In the search box, put in these words: "background:url" {without the quotes}, and then click enter. Scroll down the code, and it should look like this:

Photobucket

This area of the code is where we will be working. Promise, this is the very last part.

Step Seven: Okay, now we are ready to paste the Direct Link we copied from your Photobucket or Flickr account. Remember? Right next to the background:url, you will see a set of parentheses. Delete whatever is in them, and paste your Direct Link. Note: Make sure you keep the parentheses. Do not delete them.

Step Eight: Before you save your new background, you can click the Preview button. You can view your blog with your new background and if you like it, then click Save Template. And you're done!

I promise you, after you do one, you will love doing it this way. And you will get quick at it too. It usually takes me just a few minutes to change out a background. There are so many wonderful backgrounds you can choose and aren't as limited as you would be if you were using one of the free background sites.

As always, let me know if you have any questions or if you get stuck somewhere along the tutorial. Happy to help out! Have fun!!

Photobucket

4 comments:

Mandy said...

great tutorial!! i never used any of the backgrounds on the cutest blog on the block.. etc. because then your background is the same as everyone elses, ya know? this is a fantastic tip! :-)

Rachel said...

Ohh I really want to do this...but one question mine html says background:$bgcolor; and not url with anything in ()? Any thoughts? Thanks!

Chrissy said...

Thanks for sharing!
I found this one out a while ago...but I also like some of the backgrounds the template designer on Blogger offers!

Dena said...

Now you need to help me make my own template...LoL! Or maybe just point me in the right direction.