Christine's Blog Templates- Blogger Instructions For Use

Important!

Please Read Before You Edit Your Template!

Please read these instructions carefully. I have worked to make them easy and correct, but you have to read and follow them precisely, or you may have problems. Please do everyone a favor and let me know if you find errors in any of my instructions.
Always save the zip file I sent you with all the original files intact. You will need this if you ever need to start over for any reason. Put it on a floppy disk so you're sure to have it no matter what. Do not over-write the originals with your edited versions, keep the originals intact. It's ok to add your modified version to the zip file, so long as you keep the original too.
Always save a copy of your current template before making any changes. Only save as a .txt, .html, or .xml file.
To edit your layout, open the template file with Notepad. Never save your template file in any format other than .txt or .html or .xml. Some programs and file types will completely ruin your html, and you'll have to begin again from a non-corrupt file.
I strongly suggest you make one edit at a time, then save, then refresh your browser to check your work. This way it will be easy to catch and repair any mistakes. Because these new Blogger templates won't display on your home computer, you may want to set up a test blog to work with. If you work on your real blog, save a copy of your current template first (select all, copy, paste into Notepad, save), so you can put it back on your blog if necessary. You can work on and preview the template without publishing it, so you don't need a test blog.
When you have your template edited the way you like, do save a copy somewhere safe in case you need it in the future. You could add it to the template zip file, just give it a different name so you don't overwrite the original.

Templates with Images

Preparing Your Images and Template to go on Your Blog

The first thing you will have to do, after you extract the images from the zip file, is upload them somewhere online where they allow deep linking. There are free online image hosts if you look around. Or you may have some web space with your ISP account you can use. You can also use Blogger, saving the post as a draft. It doesn't matter where you upload them, as long as they allow deep linking.
Next, open your template.txt in Notepad, you're going to have to put the url's to your newly uploaded images into the template.
The number of images in the template is noted near the top of the template page (when viewed with Notepad), this is how many images you should upload. I will also note how many url's you'll have to find and replace- sometimes images are used more than once in a template.
The images will be either .jpg or .gif, so if you use Notepad's "Find" feature (under the Edit menu) and look for "jpg" and "gif", you should be able to find all the images. Replace the link carefully! Copy and paste the url to be sure it's exact. Be careful you don't delete or add anything except for the actual url, and be sure you're putting the correct image url in the correct place. Sometimes they're very long, but the url will always begin with http:// and will end with the picturename.jpg or .gif.
background:#ffffff url(picturename.jpg);
becomes
background:#ffffff url(http://www.wherever.com/yourusername/album/blahblahblah/picturename.jpg);
-and-
<img src="picturetwo.jpg" class="whatever" />
becomes
<img src="http://www.wherever.com/yourusername/album/blahblahblah/picturetwo.jpg" class="whatever" />
Replace one url at a time, save, then view the template in your browser to check your work. You'll have to put the template on your blog or test blog to see the changes (Applying Your Template). Don't forget to refresh your browser. Be sure the images you're seeing are on the internet and not stored on your computer- the only person who will see the ones on your computer is you. If you get confused about which picture goes where, look at the original template still in the zip file.
When you have the image url's in place, save a copy of your edited template as backup, and move on to Applying Your Template.

Applying Your Template

Applying The Template To Your Blog

These templates only work on the new Blogger system, they will not work on the old system. The new system is very different from the old, and requires very different templates.

Sign into your Blogger account.
Click on "Layout."
In the Layout area, click on "Edit HTML." This page will have a large, editable text area.
Extract the template.txt from the .zip file I sent, and open it with Notepad. If you've already edited your image url's or added a background image, then use your modified version instead of the original.
On your Blogger page, put the cursor into the text box and right click, select all, delete. The box should now be empty.
With your cursor over the text in Notepad: right click, select all, copy.
Place the cursor in the text box on the Blogger page, right click, paste.
Press the Preview button. If everything looks fine, your template is ready to go. Press "Save Template."
If you are getting an error message about widgets, follow the instructions below. DO NOT click "Confirm and Save".
Go to your Blog and refresh the page to see your new layout. If you don't see the changes, follow the instructions to clear your computer's cache.
If your images aren't showing up correctly, begin again with the above instructions for adding the image url's to the template. Begin again with the original in the .zip file if you need to.
You are now free to add and rearrange page elements with Blogger's "Page Elements" page, and to edit your colors and fonts through Blogger's "Template Designer" page — click on "Advanced". See tips about colors. On some templates, I've left in one of each type of widget, you can go to the Page Elements page and drag and drop to reposition or delete if you don't want or need them.

Widgets

Changing Your Template Without Losing Your Widget Content

Update 2-21-2010: I have just discovered that blogger now has an option to "Keep Widgets" when changing templates! That makes the instructions in this section no longer important.

When you try to apply a template which doesn't include the widgets you've already placed on your blog, you will get an error message like this: Shows the widget error message.

If you press "confirm and save," you will lose the widgets you had on your page, including the content in them. To prevent that from happening, follow these instructions. It's not as difficult as it first appears, just go step by step. You'll need these instructions, your Blogger Edit HTML page, and Notepad.

Open your template.txt in Notepad, you're going to have to put widget tags into the template. You'll add one widget tag for each widget showing in the error message.
A widget tag will consist of the words b:widget, the type of the widget, and the id of the widget. You will get the id of the widgets you need to add to your template from the list in the error message. Nothing else about the tag will change- only the id may change.

The widget tags (copy and paste the ones you need):
<b:widget type="Header" id="Header1" locked="false" />
<b:widget type='Blog' id='Blog1' locked="false" />
<b:widget type='BlogArchive' id='BlogArchive1' locked="false" />
<b:widget type='Profile' id='Profile1' locked="false" />
<b:widget type='Image' id='Image1' locked="false" />
<b:widget type='Label' id='Label1' locked="false" />
<b:widget type='LinkList' id='LinkList1' locked="false" />
<b:widget type='Feed' id='Feed1' locked="false" />
<b:widget type='TextList' id='TextList1' locked="false" />
<b:widget type='Text' id='Text1' locked="false" />
<b:widget type="HTML" id="HTML1" locked="false" />
<b:widget type='BloggerButton' id='BloggerButton1' locked="false" />
<b:widget type='AdSense' id='AdSense1' locked="false" />
<b:widget type='VideoBar' id='VideoBar1' locked='false' />
<b:widget type='Poll' id='Poll1' locked='false' />
<b:widget type='NewsBar' id='NewsBar1' locked='false' />
<b:widget type='Slideshow' id='Slideshow1' locked='false' />
<b:widget type='BlogList' id='BlogList1' locked='false' />

PLEASE NOTE: Blogger's poll widget code has an error. Read How To Correct Blogger's Poll Widget Title Display.
In your template, you will see a place where I wrote the following message (sorry about the caps, I was trying to make it easy to find in the template html). It will be near the bottom of the page. You are going to place the widget tags in that space on your template between the two lines.
For each widget listed in the error message:
1. Highlight and copy from the list of widget tags above, a tag with the correct widget type. These are the same types you saw on the "Page Elements" page when you added the widgets. For example, the first one on my error message is a Text widget, the second is the Logo widget.
2. Paste the widget tag on the template in the space provided. It will look like this:
  
  <b:widget type='Text' id='Text1' locked="false" />
  
3. If you have several of one type of widget on your blog, you'll have to add in one widget tag for each widget of that type. The widget type will remain the same, but the id will be different. The id's are listed in the error message Blogger is showing. For example, you might have three text widgets on your page. The tags are identical except for the id's.
  
  <b:widget type='Text' id='Text1' locked="false" />
  <b:widget type='Text' id='Text2' locked="false" />
  <b:widget type='Text' id='Text3' locked="false" />
  
4. Add in one widget tag for each widget listed on the error message. Make sure you have the correct widget type and id for each. Copy from this page, and paste into your template, changing the id name if necessary, but nothing else. The correct tags for my error message above would be:
  <b:widget type='Text' id='Text1' locked="false" />
  <b:widget type='BloggerButton' id='BloggerButton1' locked="false" />
When you are able to apply your template to your blog, and press Save Template, and get no error messages... you've got them all right. If you still get an error message, add in the widget tags you're still missing. Do this until you can click Save Template and get no error message.
Open your blog in another window, or refresh the view if it was already open. You should see the changes to your template and layout. If you don't see the changes, follow the instructions to Clear your computer's cache.
To rearrange the widgets on the page, go back to your layout area of your Blogger account, and click on the "Page Elements" tab. Drag and drop them to wherever you want them.

Banner

Some layouts have a "banner" section below the header which spans the width of the layout. You can use it for images and/or text and completely design it by using the html widget. You can put as many widgets in it as you'd like, even all of them (making the template a one column template). If you put nothing in the banner area, it will not be displayed on your page. It adds extra flexibility to your layout.

Shows the banner area on the page beneath the header

If you put nothing in the banner area, it won't show on your page

Double Width Side Columns

Some of my layouts feature a double width side column. This is part of my attempt to give you a lot of layout options, a lot of layout flexibility, a lot of space for your content, and still help you keep it all from creating a side scroll at 800px wide resolutions or breaking the proper layout display.

The double wide side column is available either above or below the other two side columns, and it's the width of both of them put together. You can use all three columns at the same time, as the first picture shows. If you put nothing in it, it won't be displayed on the page, so you have just the regular two columns. If you put all your side content in it, the other two columns won't be displayed, and you'll have the one very wide side column.

The double column above the other two side columns.

Here is the double column above the other two side columns.

Here is the double column above the other two side columns.

The double wide column empty- not showing on the page at all.

Here is the double wide column empty.

The double wide column being used by itself
(the other two side columns are empty).

Here is the double wide column being used by itself.

Easy To Change Color Schemes

PLEASE NOTE: These templates still retain full ability to change the colors individually.

If you look at the online examples of some of my templates, you may see 2C, 3C, or 4C after some of the color scheme names. What that designates is the number of colors in that scheme. There are literally 2, 3, or 4 colors in the entire scheme. These color schemes are extremely quick and easy to change.

Color schemes are contained in the variables at the top. The six digit color codes are near the end of the variable.

* <Variable name="bgcolor" description="Page Background" type="color" default="#ffffff">

You can quickly and easily change these schemes using Notepad's Replace feature, in the Edit menu. For example, say you want to change Widgetopia's black and white scheme to green and white:

You would find the six digit code in the template for black (which is 000000) and you'd enter that into Notepad's "Find what" box.
You'd then enter the six digit code for green into Notepad's "Replace with" box.
Press "Replace All" and Notepad will automatically replace all the black with green, in about 2 seconds flat.

The pound sign (#) in front of the six digit number is very important. There should be one. If it's missing, or if there are two, the colors won't display correctly. You only want to replace the six digits with six digits, and nothing else.

You are not stuck with the few color options Blogger gives you!! You can get six digit color codes online, or you can use a great little freeware color picker, read more here.

After replacing black with green:

Go to your Blogger Edit HTML page.
In Notepad: right click, select all, right click, copy.
In the text box containing your template on Blogger: right click, select all, right click, paste.
Preview.
Repeat until you have a desired color combination, then save.

For further information about changing your template, read Applying Your Template, above.

I think the two keys to success for this easy way of changing your template colors are:
1. You need colors that look good together.
2. You need to keep to similar lightness and darkness of the colors you're replacing to keep the contrast intact.

Alright, that's it. Go find your own favorite color combinations! When you have a good one, be sure to get your blog added to my Template User's List.

Description Links

Adding in color variables for links in your blog description.

If you want to add a link to the description of your blog, under the header, you may want to add this code to your template. It will give you the option on the "Template Designer" page (click on "Advanced") to apply colors to those links. There are two chunks of code to add.

I've given all three variables the default color of black. You can apply any default color you want to in the three variables listed in step #2.

Please be very careful not to add or remove anything else. Save a backup of your template before making any changes. Only use Notepad to modify your template.

Go to your blog's Edit HTML page. Highlight and copy the entire template (right click, select all, copy), paste into Notepad.
Near the top of the template, you will see a list of variables. Copy and paste this in just below the variables which let you change the description background and text colors.
* <Variable name="descriptionlink" description="Description Link Color" type="color" default="#000000">
* <Variable name="descriptionvis" description="Description Visited Link Color" type="color" default="#000000">
* <Variable name="descriptionhov" description="Description Hover Link Color" type="color" default="#000000">
A little further down you will see the css portion of the template. Find the part that defines the description, and add this code in just below it.
.description a:link {
color:$descriptionlink;
}
.description a:visited {
color:$descriptionvis;
}
.description a:hover {
color:$descriptionhov;
}
Apply the modified template to your blog, and save.

You can now go to the "Template Designer" page (click on "Advanced") page and you'll find the new options are there. You will have to refresh the "Template Designer" page (click on "Advanced") before they will appear. If you're having problems seeing the changes, read about clearing your computer's cache.

NewsReel, Poll, and VideoBar Widgets

Adding in color variables for NewsReel, Poll, and VideoBar widgets.

-September 2007-
This tutorial will give you color options on your "Template Designer" page (click on "Advanced") for these new widgets. As of now, The NewsReel widget isn't letting me control all the text colors, and the Poll isn't letting me control text or link colors. The following code will give you color options on all three widgets' title text, title background, title border, widget border, widget background; and for the NewsReel, you can color most of the text and links.

You can apply any default color you want to in the variables listed in step #2 below, please be very careful not to add or remove anything else. It's not necessary to change the default though, because you'll be able to change the colors on the "Template Designer" page (click on "Advanced").

There are two chunks of code to add. Save a backup of your template before making any changes. Only use Notepad to modify your template.

Also read How To Correct Blogger's Poll Widget Title Display.

Go to your blog's Edit HTML page. Highlight and copy the entire template (right click, select all, copy), paste into Notepad.
Near the top of the page you'll see the list of variables, they look like the code below. Copy the code below and paste it into your list of variables. Where you paste it on the template will determine where it shows up in the list on the "Template Designer" page (click on "Advanced"), so put it near the other widget variables.
* <Variable name="NewsBartitlebg" description="NewsBar Title Background Color" type="color" default="#ffffff">
* <Variable name="NewsBartitleborder" description="NewsBar Title Border Color" type="color" default="#000000">
* <Variable name="NewsBartitleh2" description="NewsBar Title Text Color" type="color" default="#000000">
* <Variable name="NewsBarbg" description="NewsBar Background Color" type="color" default="#ffffff">
* <Variable name="NewsBarborder" description="NewsBar Border Color" type="color" default="#000000">
* <Variable name="NewsBartxt" description="NewsBar Text Color" type="color" default="#000000">
* <Variable name="NewsBarlink" description="NewsBar Links Color" type="color" default="#000000">
* <Variable name="NewsBarvis" description="NewsBar Link Visited" type="color" default="#000000">
* <Variable name="NewsBarhov" description="NewsBar Link Hover" type="color" default="#000000">

* <Variable name="Polltitlebg" description="Poll Title Background Color" type="color" default="#ffffff">
* <Variable name="Polltitleborder" description="Poll Title Border Color" type="color" default="#000000">
* <Variable name="Polltitleh2" description="Poll Title Text Color" type="color" default="#000000">
* <Variable name="Pollbg" description="Poll Background Color" type="color" default="#ffffff">
* <Variable name="Pollborder" description="Poll Border Color" type="color" default="#000000">

* <Variable name="VideoBartitlebg" description="VideoBar Title Background Color" type="color" default="#ffffff">
* <Variable name="VideoBartitleborder" description="VideoBar Title Border Color" type="color" default="#000000">
* <Variable name="VideoBartitleh2" description="VideoBar Title Text Color" type="color" default="#000000">
* <Variable name="VideoBarbg" description="VideoBar Background Color" type="color" default="#ffffff">
* <Variable name="VideoBarborder" description="VideoBar Border Color" type="color" default="#000000">
A little further down the page is the css area, copy and paste the following code near the bottom of the css, and above ]]></b:skin>
.NewsBar {
background:$NewsBarbg;
border:1px solid $NewsBarborder;
color:$NewsBartxt;
}
.NewsBar a:link {color:$NewsBarlink;}
.NewsBar a:visited {color:$NewsBarvis;}
.NewsBar a:hover {color:$NewsBarhov;}
.NewsBar h2 {
background:$NewsBartitlebg;
border-bottom:1px solid $NewsBartitleborder;
color:$NewsBartitleh2;
border-top:0px;
border-left:0px;
border-right:0px;
}
.Poll {
background:$Pollbg;
border:1px solid $Pollborder;
}
.Poll h2 {
background:$Polltitlebg;
border-bottom:1px solid $Polltitleborder;
color:$Polltitleh2;
border-top:0px;
border-left:0px;
border-right:0px;
}
.VideoBar {
background:$VideoBarbg;
border:1px solid $VideoBarborder;
}
.VideoBar h2 {
background:$VideoBartitlebg;
border-bottom:1px solid $VideoBartitleborder;
color:$VideoBartitleh2;
border-top:0px;
border-left:0px;
border-right:0px;
}
Apply the modified template to your blog, and save.

You can now go to the "Template Designer" page (click on "Advanced") and you'll find the new options are there. You will have to refresh the "Template Designer" page (click on "Advanced") before they will appear. If you're having problems seeing the changes, read about clearing your computer's cache.

BlogList Widget

Adding in color variables for the BlogList widget.

Following this tutorial will add color options for your BlogList widget to your Blogger "Template Designer" page (click on "Advanced"), and it will also slightly change the display of the list, bringing it a bit closer to the left side of the widget. There are two chunks of code to add.

I've given all the variables the default colors of black and white, except for links visited and links hover. You can apply any default color you want to the variables listed in step #2, or you can wait and change the colors through the "Template Designer" page (click on "Advanced").

Please be very careful not to add or remove anything else. Save a backup of your template before making any changes. Only save your template as a .txt file.

Go to your blog's Edit HTML page. Highlight and copy the entire template (right click, select all, copy), paste into Notepad.
Near the top of the template, you will see a list of variables. Copy and paste this in just under the other sets of variables, but above */ It's ok to add a couple of lines of space to separate this set if you want to.
* <Variable name="BlogListh2txt" description="BlogList Widget Title Text" type="color" default="#000000">
* <Variable name="BlogListh2bg" description="BlogList Widget Title Background" type="color" default="#ffffff">
* <Variable name="BlogListh2border" description="BlogList Widget Title Border" type="color" default="#000000">
* <Variable name="BlogListtxt" description="BlogList Widget Text" type="color" default="#000000">
* <Variable name="BlogListbg" description="BlogList Widget Background" type="color" default="#ffffff">
* <Variable name="BlogListborder" description="BlogList Widget Border" type="color" default="#000000">
* <Variable name="BlogListlink" description="BlogList Widget Links" type="color" default="#000000">
* <Variable name="BlogListvis" description="BlogList Widget Visited Links" type="color" default="#483E72">
* <Variable name="BlogListhov" description="BlogList Widget Hover Links" type="color" default="#723E4D">
A little further down the page is the css area, copy and paste the following code near the bottom of the css, and above ]]></b:skin>
.BlogList {
border:1px solid $BlogListborder;
background:$BlogListbg;
color:$BlogListtxt;
}
.BlogList h2 {
background:$BlogListh2bg;
color:$BlogListh2txt;
border-bottom:1px solid $BlogListh2border;
}
.BlogList a:link {color:$BlogListlink;}
.BlogList a:visited {color:$BlogListvis;}
.BlogList a:hover {color:$BlogListhov;}
.BlogList ul {
margin:0px;
padding:0px;
}
Apply the modified template to your blog, and save.

You can now go to the "Template Designer" page (click on "Advanced") and you'll find the new options are there. You will have to refresh the "Template Designer" page (click on "Advanced") before they will appear. You'll have to refresh your blog page to see the changes. If you're having problems seeing the changes, read about clearing your computer's cache.