semi-transparent and/or image background for all posts in blogspot

This is a step by step tutorial for creating a transparent/image background for the entire main posts section.

1- Creating a transparent .png:

Create a new photoshop (or whichever program you are using) file with 16x16 or 32x32 size, 72 resolution and tranparent background. Fill it with the color you wish to use, then change the opacity of the layer to a desired amount (a value between 70 to 90 is optimal). Save it for Web & Devices, making sure you have png24 and transparency selected. Now, upload it to somewhere (picasa etc.), so that you can have an url of the image which we will need later.

2- Template Designer:

Navigate to your blogger account's template designer tab. Select Advanced, here depending on your blogger template you will either have "Post Background" or "Background", first look for Post Background if you don't have it, select the other one.

For people with Post Background

From the color picker of Background Color, put a tick to transparent. If you don't want borders, do the same for Border Color.

For people with Background

From the color picker of Main Background, put a tick to transparent.

Finally apply to blog.

3- Edit HTML

Under the Edit HTML tab, look for this piece of code,

For people with Post Background in the previous step,

find,

.date-outer {

in it there is a line like this,

background-color: $(post.background.color);

replace it with this line changing the "image_url" with the actual url of your image

background: url(image_url) repeat;

For people with Background in the previous step,

find,

$(content.background.color.selector) {

in it there is a line like this,

background-color: $(content.background.color);

replace it with the following changing the "image_url" with the actual url of your image

background: url(image_url) repeat;

.................................................................................................................................