Tutorial - Blog Layout Editing

I promised some of you that I would work on a tutorial to walk through making your own blog background. Please keep in mind, I am only familiar with Blogger. I have no idea if Word Press or any of the other engines are different. So anyway, here goes nothing...


There are 3 separate pieces to build.
1. the background itself.
2. the center
3. the banner or header

* So you will want to create 3 new files in photoshop (or elements, or whatever you are using) ... one file for each of the 3 pieces listed above. Dimensions are as follows:

1. background: I use 2000 pxl wide x 1040 pxl high
2. center: 995 pxl wide x 1040 pxl high
3. banner: I use 900 pxl wide by 350 pxl tall. You can make this bigger or smaller

* Now, select WHITE (farthest top left on your color selection view) and fill the Center (995 x 1040 file).

* Drag white center onto the background file (2000 x 1040 file). It should center automatically. This will serve as the place marker for the default center on your blog. Keep in mind that whatever you put in this white space will NOT show up on your blog as part of the background. You can overlap a VERY LITTLE along the edges if you want an element (i.e. button, word art, etc) to overlap a bit. If you go too far in, though, it WILL BE CUT OFF.

Now your background file should look something like this:

* Now you can use papers, elements, etc. to fill in and build the sides (shown in blue above).

* Add shadows. I've found through trial & error that you want to keep shadows much smaller than you normally would. They show up much bigger on the blogger than they do in photoshop. ???

* Save a full copy (with layers, psd file) so that you can come back in and edit it if you need to.

* Flatten and save a flat copy (no layers, jpg)

That takes care of your background. Separate from that you will want to create a banner or header for your blog. You'll work with your 900 x 350 pxl file that you created earlier. A few notes on this:

• You can use as much or as little of the 900 x 350 space as you want. Obviously, the less space you use, the smaller your banner will appear on your blog & v/v.
• I recommend NOT adding a background unless you really want to. The reason for this is that it will just look like a big rectangle. It will not blend into your background, and depending on the layout template you have selected on Blogger, the header may not even be fully centered. This is totally a matter of personal preference, though. Your blog... do it your way!
• Again with the shadows... keep them smaller than you normally would.
• Once you're done, save it as a png file.

* Once you are finished with the background and header, upload them to a photo hosting site, such as photobucket. I recommend photobucket actually, as the formatting seems to cooperate nicely with blogger.

Now for the trickier part...

* Log into your blog.

* On your Dashboard, click on Design.

* At the top left of the screen, click on Edit HTML.

* In the body of the text, search for the section that deals with your background. You will want to copy the DIRECT link of your background image in photobucket. Then paste it into your HTML so that it looks like this:

body {

background-image:url(http://i161.photobucket.com/albums/t203/blahblahblah/filename.jpg);
background-position:center;
background-repeat:no-repeat;
background-attachment: fixed; margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

*Make sure your HTML is telling your background to be centered, non-repeating, fixed, zero margin. It should look a lot like the HTML code above when you are finished (obviously with your own choice of text, color, etc).

(Still with me??)

NOW, Do the same for the header...

* In the HTML code, search for the section that deals with your header. It will look something like this:

img alt='NAME OF YOUR BLOG' border='0' src='http://i161.photobucket.com/albums/blahblahblah/filename.png'/

* where you see src=' you will want to paste the direct link from photobucket for your header file. Make sure there is a ' right after the = and then another after the .png. Otherwise, your header will not show up.

*Before you save the changes to your design template, MAKE SURE YOU PREVIEW. If it's not working right, then your best bet is to discard changes and start over, playing close attention that you don't change anything in the HTML except for the image link.

* And don't get discouraged. I played with this for HOURS before I figured it out the first time. (lol) It's a bit tricky to get the hang of at first, but once you get it once, future changes are just a matter of updating the image links.

* All other preference changes - i.e. color, text, size, layout, etc - can be made from the same Design screen where you were before clicking 'edit HTML'. From the Design view, if you click on Template Designer, then Advanced, you can change your colors and such from there.

Good luck!!

**********