How to Make Your Own Background (Simple Template)

Customizing the Simple Template - Part 2
 



In my last post, I showed you how to get your blog set up with the Blogger Simple template. Now it is time to start customizing it!

Let's get started with the background:

Customizing the Blogger Simple Template, Part 1

I have posted several tutorials on how to make your own blog background, post divider and such and I hope they have been useful to you. However, all of these tutorials have required that you use the Minima template. I like this template the most but this template does not allow you to take full advantage of the Template Designer. Also, many of you are terrified at the thought of editing the HTML on your own.

So, I would like to give you some instructions on how to add your own custom designs to the Blogger Simple template. If you use this template, you can adjust the widths of the columns, the arrangement of the columns and much more without having to edit the HTML at all! In fact, when you add all of your design elements, you won't ever have to click "Edit HTML"!

This first post will be all about getting your blog set-up with the Simple template of your choice. (There are several Simple templates. I'll help you choose!) My next post will show you how to add your own Custom Design Elements.

Ready to get started? Here we go!

Blank 3-Column Template

This template is a blank template, meaning there is no background image, no header, no designs on the blog. The template, however, has been modified to allow for 3 columns. My free 3-column backgrounds can be used with this template.

By using this template, you agree to the terms of use.
Read here for instructions on how to add a template.

Click Here for HTML/CSS Code

You can add/change:

•   the Blog title and description shown on the header
•   the font colors
•   the font  Click here to learn how.  (This template allows you to alter the date, post title and   sidebar titles with a different font for each one.) 
•   the background
•   the header

   Don't forget to add my button to your sidebar. Here's the code:

<center><a href=http://www.blogdesignsbydani.com/><img src="http://bdbd.blogdesignsbydani.com/Dani Button.png"/></a></center>

Cherished Love Header

Instructions on How to Add a Header

Use with the background: Cherished Love

http://headers.blogdesignsbydani.com/JustSoScrappy/Cherished Love%20Header.jpg

Images copyright Katie Castillo
(from her kit called Cherish)

Cherished Love

For those of you interested in just the background from the Cherished Love Template, here it is:

 2-Column (Standard Width)

<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3Ebody%7Bbackground-image%3Aurl%28%22http%3A//backgrounds.blogdesignsbydani.com/JustSoScrappy/Cherished Love.jpg%20%22%29%3Bbackground-position%3Acenter%3B%20background-repeat%3A%20no-repeat%3B%20background-attachment%3A%20fixed%3B%7D%3C/style%3E%20%3Cdiv%20id%3D%22tag%22%20style%3D%22position%3Aabsolute%3B%20left%3A0px%3Btop%3A30px%3B%20width%3A150px%3B%20height%3A50px%3B%22%3E%3Ca%20target%3D%22_blank%22%20href%3D%22http%3A//www.blogdesignsbydani.com%22%20title%3D%22http%3A//www.blogdesignsbydani.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//backgrounds.blogdesignsbydani.com/tags/DaniRed.png%22/%3E%20%3C/a%3E%3C/div%3E"))</script>

   3-Column (Wide Width)

<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3Ebody%7Bbackground-image%3Aurl%28%22http%3A//backgrounds.blogdesignsbydani.com/JustSoScrappy/Cherished Love_3Column.jpg%20%22%29%3Bbackground-position%3Acenter%3B%20background-repeat%3A%20no-repeat%3B%20background-attachment%3A%20fixed%3B%7D%3C/style%3E%20%3Cdiv%20id%3D%22tag%22%20style%3D%22position%3Aabsolute%3B%20left%3A0px%3Btop%3A30px%3B%20width%3A150px%3B%20height%3A50px%3B%22%3E%3Ca%20target%3D%22_blank%22%20href%3D%22http%3A//www.blogdesignsbydani.com%22%20title%3D%22http%3A//www.blogdesignsbydani.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//backgrounds.blogdesignsbydani.com/tags/DaniRed.png%22/%3E%20%3C/a%3E%3C/div%3E"))</script>

Images copyright Katie Castillo
(from her kit called Cherish)

Matching Header

Cherished Love Template

By using this template, you agree to the terms of use.
Read here for instructions on how to add a template.

Click Here for HTML/CSS Code

*This template may not show the header when you insert the HTML/CSS code. If it does not appear, do the following:

1. Go to the Design page and make sure you are on the Page Elements section.
2. Click on the Edit button on the Header box.
3. In the pop-up window, click "Behind Title and Description and then insert the following address in the box that says, "From the Web"

http://templates.blogdesignsbydani.com/loveyou/header.png

4. Click Save and View Blog. Your header should appear!



 This template includes:
  a wide 2-column layout
  a background
  a matching header
  a post icon (picture next to the post title)
  a post divider (picture in between each post)

You can add/change:

•   the Blog title and description shown on the header
•   the font colors
•   the font  Click here to learn how.  (This template allows you to alter the date, post title and sidebar titles with a different font for each one.)

   Don't forget to add my button to your sidebar. Here's the code:

<center><a href=http://www.blogdesignsbydani.com/><img src="http://bdbd.blogdesignsbydani.com/Dani Button.png"/></a></center>

Images copyright Katie Castillo
From her kit Cherish

Header Problems

Are any of you having problems with my headers? A few readers have complained of the headers being too big. Lately the "Shrink to Fit" button hasn't been shrinking my headers down to the right size for many blogs. If you are having this problem, please leave a comment or email me. I will resize the header for you and post a new code. Be sure to tell me which header you want.

Thanks,
Dani

Peppermint Christmas Template

By using this template, you agree to the terms of use.
Read here for instructions on how to add a template.

Click Here for the HTML/CSS Code

*This template may not show the header when you insert the HTML/CSS code. If it does not appear, do the following:

1. Go to the Design page and make sure you are on the Page Elements section.
2. Click on the Edit button on the Header box.
3. In the pop-up window, click "Behind Title and Description and then insert the following address in the box that says, "From the Web"

http://templates.blogdesignsbydani.com/peppermintchristmas/header.png

4. Click Save and View Blog. Your header should appear!



 This template includes:
  a wide 2-column layout
  a background
  a matching header
  a post icon (picture next to the post title)
  a post divider (picture in between each post)

You can add/change:

•   the Blog title and description shown on the header
•   the font colors
•   the font  Click here to learn how.  (This template allows you to alter the date, post title and sidebar titles with a different font for each one.)

   Don't forget to add my button to your sidebar. Here's the code:

<center><a href=http://www.blogdesignsbydani.com/><img src="http://bdbd.blogdesignsbydani.com/Dani Button.png"/></a></center>

Images copyright Katie Castillo

From her kit Peppermint Patty

Christmas Treats Header

Instructions on How to Add a Header

Use with the background: Christmas Treats

http://headers.blogdesignsbydani.com/JustSoScrappy/Christmas Treats%20Header.jpg

Or if you would like the exact same header as the Christmas Treats Template, use this header:

http://headers.blogdesignsbydani.com/JustSoScrappy/Christmas Treats%20Header2.png

Images copyright Katie Castillo
(from her kit called Gingerrific)

Christmas Treats Background

For those of you interested in just the background from the Christmas Treats Template, here it is:

 2-Column (Standard Width)

<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3Ebody%7Bbackground-image%3Aurl%28%22http%3A//backgrounds.blogdesignsbydani.com/JustSoScrappy/Christmas Treats.jpg%20%22%29%3Bbackground-position%3Acenter%3B%20background-repeat%3A%20no-repeat%3B%20background-attachment%3A%20fixed%3B%7D%3C/style%3E%20%3Cdiv%20id%3D%22tag%22%20style%3D%22position%3Aabsolute%3B%20left%3A0px%3Btop%3A30px%3B%20width%3A150px%3B%20height%3A50px%3B%22%3E%3Ca%20target%3D%22_blank%22%20href%3D%22http%3A//www.blogdesignsbydani.com%22%20title%3D%22http%3A//www.blogdesignsbydani.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//backgrounds.blogdesignsbydani.com/tags/DaniBrown.png%22/%3E%20%3C/a%3E%3C/div%3E"))</script>

   3-Column (Wide Width)

<script>document.write(unescape("%3Cstyle%20type%3D%22text/css%22%3Ebody%7Bbackground-image%3Aurl%28%22http%3A//backgrounds.blogdesignsbydani.com/JustSoScrappy/Christmas Treats_3Column.jpg%20%22%29%3Bbackground-position%3Acenter%3B%20background-repeat%3A%20no-repeat%3B%20background-attachment%3A%20fixed%3B%7D%3C/style%3E%20%3Cdiv%20id%3D%22tag%22%20style%3D%22position%3Aabsolute%3B%20left%3A0px%3Btop%3A30px%3B%20width%3A150px%3B%20height%3A50px%3B%22%3E%3Ca%20target%3D%22_blank%22%20href%3D%22http%3A//www.blogdesignsbydani.com%22%20title%3D%22http%3A//www.blogdesignsbydani.com%22%3E%3Cimg%20border%3D%220%22%20src%3D%22http%3A//backgrounds.blogdesignsbydani.com/tags/DaniBrown.png%22/%3E%20%3C/a%3E%3C/div%3E"))</script>

Images copyright Katie Castillo
(from her kit called Gingerrific)

Matching Header