This page has moved to a new address.

Crackin' the Blogger Code ... another HOW TO Blogger Tutorial: How to Upload your own Background and Header

Mommy Blog Designs: Crackin' the Blogger Code ... another HOW TO Blogger Tutorial: How to Upload your own Background and Header

Thursday, August 18, 2011

Crackin' the Blogger Code ... another HOW TO Blogger Tutorial: How to Upload your own Background and Header

Yeay! Here we are at our 4th Blogger Tutorial! My goodness this 2 week event is flying by! And I still have so much more to share with you!! 

So I’ve been asked a few times about how to change the look of your Blogger Blog. Moms love to customize their own blogs ... and add their own personality to them! I think that’s awesome ... and I totally encourage that!

In this tutorial I am not going to teach you how to design your own header and background. I’ll save that for another series. So for now, let’s say you already have an image that you want to use.

First let’s start with the background. Here’s how to load it into your template.

1.  Upload your image into a file hosting service (such as or and get the direct URL to your image. COPY it.

2.  Log in to your Blogger Dashboard
Click on DESIGN ... then on EDIT HTML
NOTE!! Please back up your template at this point!! We are heading in there to make some changes, and it’s always best to have a back-up just in case!!

3. Scroll through your template HTML. You’ll see first about a dozen lines in your HEAD section. Keep scrolling. Next you’ll see VARIABLE DEFINITIONS. Keep scrolling. There’s a bunch of stuff in the variable section ... just keep scrolling. Stop when you get to

/* Content
----------------------------------------------- */

The first snippet of code that you will see below CONTENT is this:

body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);

4. REMOVE that code and CHANGE it to this:

body {
font: $(body.font);
color: $(body.text.color);
background-image: url(;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

5.  Click UPDATE TEMPLATE and you’re good to go!
Actually ... there is one other step to ensure your background shows properly ...

6.  Still in your Blogger Dashboard ... DESIGN ... TEMPLATE DESIGNER
Then click on BACKGROUNDS
make sure all 3 boxes are set to TRANSPARENT.

And that’s it! You’re good to go!

Now to do the header ... this one is much easier!
1.  Log into your Blogger Dashboard
3.  You should see a box there at the top for HEADER ... and it will have an EDIT button at the bottom right (of the header box). Click to EDIT
4.  A new window will pop up that will allow you to upload an image right from your computer. So you don’t need to go through the file hosting service for your header. You can do it easily here.

If your image includes your blog title already, make sure that under PLACEMENT, INSTEAD OF TITLE AND DESCRIPTION is checked.
5.  Click save ... and you’re done!

So that’s how to change your background and header in Blogger. Another How To Blogger Tutorial!

Hmmm ... now what am I going to do? I’m giving you all my secrets!! I hope you’re enjoying them!

And at any time ... if you need any help ... I’m here for ya! Whether it’s just answering some questions, or re-designing your blog, I’m here.

Ro :)

Labels: ,


Post a Comment

Subscribe to Post Comments [Atom]

<< Home