Tutorial: Customizing your blog background

December 16, 2010

Tutorial: Customizing your blog background

December 16, 2010
First, you will need a small background image. You may have already purchased graphics that have a background image, or you can design your own. I made my background image in Fireworks, but you can use any image-editing software to do this.

I kept the image small and simple, as it will repeat many times in the background of your blog. This image is 125 x 125 pixels. Next, you will need to upload your image to a file host, such as imgur. Once you upload your image, you will get a screen that gives the code needed. Keep this screen open, as you will need the code for the next step.

Next, we will go back into Blogger. You will need to go to the Template Designer and click on the “Advanced” section (as shown in the image to the left). The last choice under the advanced section is “Add CSS” (you can also see this in the image to the left). This is the place where you can enter CSS code to customize your blog. Here is the code you will need to enter:

@font-face { font-family: “Verdana”; }@font-face { font-family: “Cambria”; }p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0in 0in 0.0001pt; font-size: 12pt; font-family: “Times New Roman”; }div.Section1 { page: Section1; } .body-fauxcolumn-outer { background: url(your image link from imgur here); }

.body-fauxcolumn-outer div { background: none;


In the bolded area for your link above, you will want to enter the first code imgur gives you: the “Direct Link(email & IM)” code.

And that should be it! Customizing your background will give you a lot of power over the whole “look” of your blog…you’re sure to love it!

No Comments

Leave a Reply


Instagram has returned invalid data.

Follow @ladybugsteacherfiles