Blog Template Number One Revised

Blog template #2 (with column left and blog body right)

You can easily change the blog link and color attributes for your own use: I have stripped out a few of the remote call variables from the left hand column including the calendar. The background color attribute has been placed as the very first piece of code in the blog style sheet so that you can find it easily. I have also placed the text link mouseover effects near the beginning of the style sheet so that you can find them easily. All other style sheet attributes take a bit of common sense but all of them can be left alone if you are satisfied with the text link colors. You can always leave questions in the comments of Web Raisins.

Tools you may need: As you are determining your template's color scheme, it is important to have access to a variable color picker. The one found HERE is simple to use. It will give you the HTML code for each color shade you select, you can then copy this code into the code below. Remember to always include # preceding the 6 character color code. If you are attempting to match a color with an image or other aspects of your template color scheme, you cannot live without the pixie: HERE You can edit your template code right in the text box below. Installation instructions are further down the page.

Copy template code from the text box below:

<style>

body {background-image:
url('http://www.blogit.com/Blogs/Picture.aspx/gomedome/gran2')

}
a:link { color: #ffffff; }
a:visited { color: #ffffff; }
a:hover { color: #dce5f6; }
#regions
{
	width: 100%;
}

#container 
{
}

#firstRegion
{
	vertical-align: top;
	width: 200px;
}

#secondRegion
{
	border-right: #0000ff 3px solid;
	vertical-align: top;
	width: 600px;
}
.sidebar a {
	color : #0000ff;
	text-decoration: none;
}
.sidebar a:visited {
	color : #0000ff;
}
.sidebar a:hover {
	color : #800080;
}
.content  
 P { text-align:left }
.content a {
	color : #0000ff;
	text-decoration: none;
}
.content a:visited {
	color : #0000ff;
}
.content a:hover {
	color : #800080;
}
{
	padding-right: 2em;
	padding-left: 2em;
	font-family: verdana, arial, sans-serif;
	font-size: x-small;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: small;
}
p}
.menu03
a:link { 
color: white; 
background-color: #ab458c;
text-decoration: none;
border: 3px solid #ab458c;

}
.menu03
a:visited { 
color: white; 
background-color: #ab458c;
text-decoration: none;
border: 3px solid #ab458c;

}
.menu03
a:hover {
color: #0000ff; 
background-color: #ffffff;
text-decoration: none;
border: 3px solid #ffffff;

}

.endIE5Workaround	/* end IE5 workaround */
{
}

.content h3
{
	color: #999999;
}

h1.pagetitle
{
color: #999999;
	font-size: small;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: medium;
}

.postFooter
{
	font-family: arial, sans-serif;
	font-size: x-small;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: small;
}
.postFooter a {
	color : #0000ff;
	text-decoration: none;
}
.postFooter a:visited {
	color : #0000ff;
}
.postFooter a:hover {
	color : #800080;

}
.endIE5Workaround	/* end IE5 workaround */
{
}

.sidebar 
{
padding-right: 1.2em;
	padding-left: 1.2em;
	font-family: verdana, arial, sans-serif;
	font-size: x-small;
	voice-family: "\"}\"";
	voice-family: inherit;
	font-size: small;

}
.endIE5Workaround	/* end IE5 workaround */
{
}

.sidebar h5 
{
	color: #000000
}

.sidebar ul
{
	margin-left: 70px;
}

.sidebar li

}

</style>

<div id="container">
<div><center><TABLE STYLE="filter:glow(color=#0000ff, strength=4)">
<TR><TD><center><b><font face="impact" color="#ffffd9" size="7">
<b><i>YOUR BLOG TITLE HERE</i></b></font></b></TABLE></CENTER></div>
	<center>

<div class="sidebar">
<br>
				<center><img src="http://img161.imageshack.us/img161/5619/project26kt.jpg" border="0" width="150" alt="Place your image or avatar here" /></center>			
<center><h4>About this Blog</h4></center>
					<p align="left"><b><$BlogDescription$></b></p><br>

<center><h4>Links</h4></center>
<p align="left">Get Code <a href="http://www.sellhost.net/blogtemp2.html">HERE</a></p></div>
		
<td id="mainRegion"><b>
		<td  valign="top" width="600" bgcolor="#ffffff">

<p align="left">
				<div class="content">
					<BlogTemplate>
						<BlogDateHeader>
							<h4>
							<$BlogDateHeaderDate$>
							</h4>
						</BlogDateHeader>
						<a name="p<$BlogItemNumber$>" id="p<$BlogItemNumber$>"></a>
						<PostSubject>
							<u><h2>
							<$BlogItemSubject$>
							</h2></u>
						</PostSubject>
					
						<$BlogItemBody$>
						<div class="postFooter"><p><b>
						posted by <a href="<$BlogItemAuthorURL$>"><$BlogItemAuthor$></a> at <$BlogItemDateTime$> <a href="<$BlogItemCommentPageURL$>">Comments (<$BlogItemCommentCount$>)</a> (<a href="<$BlogItemURL$>">permalink</a>)<br>
						</p>
				<BlogDateFooter>
						</BlogDateFooter>
					</BlogTemplate>
				</div>
			</td>
	</tr>
</div>
	
</table>

For where to put this code, see below:

Follow these steps on the Blogit interface

When logged into Blogit, click on your Write page link. See Picture
Now click on the Edit link for the blog you would like to install this script into. See Picture
At the top of this next page find the Change Template link and click on it. See Picture
This will take you to a page with 2 selections, click on Edit a classic custom template See Picture
You should now be staring at your template code. This page is entitled "Edit Custom Template" See Picture
Now right click and "select all" to cut and paste your blog's already existing code into a file that you can save. This is done to restore your blog to it's original state in the event that you mess up with your new template modifications. (hey it happens) Now drop your new template code into this box. Save changes and you are done, congratulations.