My Template Blog

Foodie Header

2008-08-28T14:27:00.000-07:00

This is the one foodie header I've gotten to create so far. If you all don't like it that much, let me know and I can make something else or we can go with the basic. I should probably mention that all these food backgrounds are inspired by the soon-to-come-about new recipe blog that New Girl is planning to get started. Let me know your thoughts!

Foodie Blogs: Meals and Ingredients

2008-08-28T14:17:00.000-07:00

Foodie Blogs: Fruits & Veggies

2008-08-28T13:39:00.001-07:00

More Headers

2008-08-12T15:11:00.000-07:00

Here are headers to go with the last 4 backgrounds:

Beach Wood and Shell Tile

2008-08-12T15:10:00.000-07:00

This is a 3-column minima template background with resolution of 1600x1200.

Chocolate & Lace

2008-08-12T13:59:00.000-07:00

This is a 3-column minima template background with resolution of 1600x1200.

Leather & Lace

2008-08-12T13:58:00.000-07:00

This is a 3-column minima template background with resolution of 1600x1200.

Romanesque

2008-08-12T13:48:00.000-07:00

This is a 3-column minima template background with resolution of 1600x1200.
(This background uses one of Squidfinger's patterns. Please link his site (found in my blogroll) if you use this background.)

Headers!

2008-08-06T14:53:00.000-07:00

Here are some headers, all sized 888x150 pixels, so you will need to have made the adjustments described in this post in order to use them. Anyway, here they are:

Adjustments

2008-08-06T14:16:00.000-07:00

Silly me, I made a small adjustment to my blog before I made my headers, and since I don't want to make them all over again, I will just tell you how to do the same to yours. My headers are all 888x150 pixels because I changed the text area on my 3-column blog from a width of 890 to a width of 900. I also changed the widths of the sidebar columns and of the main column.

Go to the "edit HTML" window. Scroll down in your template's HTML until you see the following:

#header-wrapper {
width:890px;
margin:0 auto 10px;
border:1px solid $headerbordercolor;
}

Change the width from 890px to 900px. Do the same for the section labeled "#outer-wrapper". Change the width under "#main-wrapper" to be 450px, under ".sidebar-wrapper" to be 200px, and under "#header .description" to be 800. Your template will be a little wider and allow your main blog text to be a little wider; to me it makes it easier to read.

Also, here's a few cool links to help you make adjustments on your own:

Blue Swirls

2008-08-06T14:15:00.000-07:00

This is a 3-column minima template background with resolution of 1600x1200.

Green Weave

2008-08-06T14:13:00.000-07:00

This is a 3-column minima template background with resolution of 1600x1200.

Decorative

2008-08-06T14:00:00.000-07:00

This is a 3-column minima template background with resolution of 1600x1200.

Turquoise & Brown Wallpaper

2008-08-06T13:58:00.000-07:00

This is a 3-column minima template background with resolution of 1600x1200.

Stained Glass Background

2008-08-06T13:47:00.001-07:00

This is a 3-column minima template background with resolution of 1600x1200.

Adding a Header

2008-08-06T13:05:00.000-07:00

To create a custom header for your blog, you will want to find or create a jpeg image that is no more than 878 pixels wide for a 3-column blog (unless you have changed the width, in which case you may adjust accordingly), or 648 pixels wide for a 2-column blog. I typically use header images that are 150 pixels in height, though I believe the height will adjust for your image. You do not need to host this image (on imageshack.us or photobucket, as with the background; Blogger allows you to upload a header directly from your computer), but you can host it if you want to. Also, please be careful about using pictures from the web; make sure you have permission to use the image (i.e., there is no copyright, or it is yours) before you apply it to your blog.

Once you have your picture, go to the "Page Elements" section under the Layout tab in Blogger, and select "edit" on the Header box. There will be an area where it says "image" and then gives you the option to either upload an image from your computer, or to use one from the web. Select whichever applies to you, upload, and save. Your header should now appear in your blog.

Adding a Background

2008-08-06T12:46:00.000-07:00

Adding a background to your template is fairly simple. All you need to do is find (or create) a sufficient jpeg image that you would like to use as your background. This can be a repeating pattern, or a single large image. Please be careful about using pictures from the web; make sure you have permission to use the image (i.e., there is no copyright, or it is yours) before you apply it to your blog. Host the image on a hosting site that will allow you to host images larger than 1024x768 pixels (I use imageshack.us, but there are others like photobucket that can work as well). Be aware that if using a 3-column minima template, your text will be centered and approximately 890 pixels wide (on default settings). You will want to make sure that the background area to go behind your text is centered at least 50 pixels wider than the text area. The area behind the text on a 2-column minima template is 660 pixels.

If you choose to use a single background image, make sure it is a large enough image to cover the entire background of your blog. You will want no smaller than 1024x768 pixels, though I recommend having an image that is at least 1280x1024 if not larger, as many people have at least 17 inch monitors these days. I typically create my backgrounds with a resolution of 1600x1200, so that larger monitors (like the one my husband uses) still have no whitespace around the edges of the background when viewing my blog.

Once you have the picture you want to use hosted, go to the "Page Elements" Section under your Layout tab in Blogger. Select "Add a Page Element" (I use the footer box), and then "HTML/JavaScript". In the content box, enter the following code, replacing all "[ ]" symbols with "< >" (if I type it in correctly, the code will not show up):

[style type="text/css"]
body {background-image: url("http://url"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
[/style]

Replace the "http://url" with the direct link to your hosted image, and then save. If you choose to use a pattern and want it to tile, change where it says "no-repeat" to "repeat". Do not give the code a title, unless you want to have that title floating at the bottom of your blog (or wherever you added the code). Your new background should now show up in your blog.

Many cute (and free) backgrounds can be found at The Cutest Blog on the Block, or by googling "blogger backgrounds".

Changing Your XML Blog Template

2008-08-06T10:46:00.000-07:00

If you have decided that you no longer are satisfied with Blogger's standard 2-column XML templates, but don't know much about web design or computer programming, it still isn't really that difficult to make a change. I use a 3-column version of Minima, found here, and then modify it with a new background and header. The site also has 3-column versions of most of the standard blogger templates. Other templates can be found around the web, but this was the easiest way that I found to completely personalize my template. If you still don't like these, google "blogger templates" and make sure it's an XML template, not one of the old HTML templates. If you plan on changing the background, too, it's really easiest to use the Minima White template so that you don't need to worry about graphics in the XML that are difficult to modify unless you know something about internet programming languages.

Once you've found the template you want to change to, the first thing you need to do is back up your widgets. These are any sidebar links you've added, blogrolls, hit counters, etc. This is because the act of overwriting your current XML template with a new one will erase all of your widgets except for the standard ones (Blog Title/Header, Blog Archive, and Profile).

The quickest and easiest way to do back up your widgets is to go to your blog, click the "view" menu in your browser, and select "page source". This should bring up a text file that will include all of your widgets. Save the entire text from this file into a notepad or wordpad file. When you go back in later to find your widgets, you will be looking for sections of text located between the tags [div class="'widget" id="'LinkList1'"] and the last [/div] before the start of the next widget. You will probably recognize lists of links, etc. within the text. If you have trouble recognizing your widgets in the "page source" file, it may be best to copy the info in them from your layout page in whatever way you think you will best be able to use the information to enter it back in once you have updated your template, whether that means copying your blogroll links down by hand or into a word file or whatever works for you.

Once your widgets are backed up, you can download the new template, and open it with notepad or wordpad. Copy all of the text in the file, and paste it into the "Edit HTML" window under the Layout tab in Blogger, completely replacing anything that was there before. You can preview the blog at this point to make sure you like the way it looks. If you don't like the new template, just click "clear edits", and your blog will go back to its previous template. If you do like it, go ahead and click "save". The editor will tell you that saving the template will delete your widgets, but since you have already backed them up, go ahead and save anyway. This will apply your new template.

Now it's time to add your widgets back in. Open the "page source" file you saved earlier. Locate your widgets, and add them back in through the "Page Elements" editor the same way you did when you first put them in. It can take time depending on how many widgets/links you have, but it's typically easier than trying to figure out how to add them back in through the HTML/XML editor.

If you don't plan on changing the background for your new template, you're done! Congrats!

Feel free to ask me if you have any questions. I am by no means an expert at this sort of thing, so I won't be able to help you with detailed code edits, but should be able to help you out with basic troubleshooting using the method I describe here. Enjoy!