How to use free backgrounds in Blogger's new template editor.

Posted by Dawn Farias

Have you tried using a fabulous free blog background on the new Blogger templates only to be disappointed with the final outcome?  I am going to help you with that today!

In the past, Blogger users have mostly chosen the Minima template when applying a free blog background.  It was nice and plain - everything you need to get the final look that you want.  The new Blogger templates have a bit too much.... character for that.  However, there is a shining star that promises the blank canvas that we were used to while allowing us to choose whichever column layout we'd like.  Three columns, one column, multiple footer options - this is what the new template designer has to offer so let the embracing begin!

Let's get started.

Step 0:  Download your current template first!!  Dashboard > Design > Edit HTML > Download full template. (This is an update to the original tutorial.)

Step 1:  Switch to the Simple template.
The path you want to follow is Dashboard > Design > Template Designer > Simple Template > Apply to blog.

You will see the change to your template happen live as you click around.

Step 2:  Find a 3 column free blog background  that you like.
A wide background will allow plenty of room for you to experiment with the different column layouts available.  Today I am suggesting the site Designer Blogs.  They have several 3 column backgrounds to choose from.  I am going with Green with Envy.

Step 3:  Copy the background code.

By clicking inside the code box a few times everything gets highlighted.  Then choose CTRL-C or COMMAND-C, depending on whether you are using a PC or a Mac.

Step 4:  Paste the code into an HTML widget from your Blogger Page Elements screen.

4a:  Design > Page Elements > Add a gadget > HTML/Javascript

4b:  Paste the code (CTRL-V or COMMAND-V) and save.

Step 5:  View.

Not quite what we want is it?  We need to get rid of the default blue color at top, a shading effect on the lower half, drop shadow effect on the post body and move the Designer Blogs logo to a better place.

Step 6:  Add the Fix It! code.
Design > Template Designer > Advanced > scroll down to Add CSS

Copy and paste the following Fix it! code and then click Apply To Blog.

.body-fauxcolumn-outer .cap-top, .body-fauxcolumn-outer .cap-top .cap-left, .body-fauxcolumn-outer .fauxcolumn-inner, .body-fauxcolumn-outer div {
  background: transparent;
}
.content-outer {
  -moz-box-shadow: 0 0 ;
}

Again, you see the change happen live before you actually save anything.  Also, see that green circle?  Those are all your options for changing link colors and other fun stuff like that.  Explore!

Step 6:  View.

I've moved the Designer Blogs logo to a better place and adjusted my template colors to match the background. Beautiful!!

Note:  I've purposefully chosen a background with a posting area that's very close to white.  In another post I will explore the column layout options with you and give tips for using backgrounds with a patterned or colored posting area.

----------------------------------------------------------------------------

You can find more from Dawn Farias at her site A Bit Bloggish - a place with digital scrapbooking kits, tutorials and tidbits on daily life.  Feel free to follow her on Twitter, too!