17.8.04 [ Template ] 0 comments 
If you would like to use this template for your own Blogger blog, then simply copy the following code into your Blogger template. May any changes you like. Suggestions and feedback are welcome.
<!DOCTYPE html PUBLIC "-//WC#//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") {
whichpost.className="commenthidden";
}
else {
whichpost.className="commentshown";
}
}
</script>
<title><$BlogTitle$></title>
<style type="text/css" media="screen">
/*--------------background styles------------------*/
body {
background-color: white;
color: #333322;
font: 0.8em Verdana;
margin: 0;
padding: 0;
z-index: -2;
}
#background {
position: absolute;
left: 26%;
top: 23%;
background-color: transparent;
color: #EEEEEE;
font: 7em Times;
margin: 0;
padding: 0;
z-index: 0;
}
#bg {
position: absolute;
left: 23%;
top: 15%;
background-color: transparent;
color: #eeeedd;
font: 7em Times;
margin: 0;
padding: 0;
z-index: 0;
}
h1 {
width: 200px;
color: lightblue;
font: 15em Times;
margin: 0;
padding: 0;
}
h2 {
color: #EEEEDD;
font: 7em Times;
margin: 0;
padding: 0;
}
h3 {
color: black;
}
/*-----------------------Nav Styles---------------*/
#lh-col {
position: absolute;
top: 18%;
left: 5%;
width: 18%;
background: transparent;
color: #333322;
margin: 0;
padding: 0;
z-index: 2;
text-align: right;
}
#lh-col h3 {
text-style: bold;
text-transform: all-caps;
color: #555544;
}
#lh-col ul {
list-style: none;
padding: 0;
padding-right: 4px;
margin: 0;
border: 0;
border-right: 2px lightblue solid;
}
#lh-col li {
width: 100%;
border: 0;
margin: 0;
padding: 0;
}
#lh-col li a:link, #lh-col li a:visited, #lh-col li a:hover, #lh-col li a:active {
display: block;
border: 0;
margin: 0;
padding: 0;
color: #555544;
text-decoration: none;
width: 100%;
letter-spacing: .05em;
}
#lh-col li a:hover {
background: lightblue;
color: #FFFFEE;
text-decoration: none;
}
/*-------------------Post Styles------------*/
#rh-col{
position: absolute;
top: 18%;
left: 26%;
width: 70%;
background: transparent;
color: black;
margin: 0;
padding: 0;
z-index:1;
}
a:link {
background-color: transparent;
color: #555544;
text-decoration: none;
border-bottom: 1px solid #555544;
}
a:visited {
background-color: transparent;
color: #555544;
text-decoration: none;
border-bottom: 1px solid #555544;
}
a:hover, a:active {
background-color: lightblue;
color: #FFFFEE;
text-decoration: none;
border-bottom: 1px solid white;
}
a.noborder:link, a.noborder:visited, a.noborder:active {
background-color: transparent;
border: 0;
}
#posts{
background: white;
position: relative;
margin: 0%;
width: 48%;
padding: 20px;
z-index:3;
}
/*------------comment styles-----------------*/
.commenthidden {display:none}
.commentshown {display:inline}
#comments{
color: #333322;
position: absolute;
background: transparent;
margin: 0% 0% 0% 52%;
width: 48%;
padding: 20px;
z-index:4;
}
#comments h3{
color: black;
border-top: solid black;
}
</style>
</head>
<noembed>
<body>
</noembed>
<!-- background stuff -->
<h1><$BlogTitle$></h1>
<div id="bg"><$BlogDescription$>
</div>
<div id="background"><$BlogDescription$>
</div>
<!-- left column -->
<div id="lh-col">
<h3>Salut!</h3>
<ul><li><$BlogOwnerFirstName$>
<li><$BlogOwnerLocation$>
<li><$BlogOwnerAboutMe$>
<li><a href="<$BlogOwnerProfileUrl$>">See my complete profile</a><br />
<select name="archivemenu" onchange="document.location.href=this.options[this.selectedIndex].value;">
<option selected>- Archives -</option>
<BloggerArchives>
<option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
</BloggerArchives>
</select>
</ul>
<!----Links!!!!!------!>
<h3>Blogs of Note</h3>
<ul>
<li><a href="somewhere">your favorite blogs go here!!</a>
<li>
</div>
<!-- right column -->
<div id="rh-col"><blogger>
<p align=left><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader><strong> [ <BlogItemTitle><$BlogItemTitle$></BlogItemTitle> ] </strong><BlogItemCommentsEnabled><a href="javascript:togglecomments('c<$BlogItemNumber$>')"><$BlogItemCommentCount$> comments</a> <$BlogItemControl$></p></BlogItemCommentsEnabled>
<span class="commenthidden" id="c<$BlogItemNumber <span class="commenthidden" id="c<$BlogItemNumber<span class="commenthidden" id="c<$BlogItemNumber <span class="commenthidden" id="c<$BlogItemNumber$>">
amp;gt;">
amp;gt;">
<div id="comments">
<BlogItemCommentsEnabled>
<h3><img src="http://photos22.flickr.com/34762808_9aa5fa89c3_t.jpg" width="18px" height="18px" /><$BlogItemCommentCount$> Comments:</h3>
<BlogItemComments>
<p>
<div class="body" id="<$BlogCommentNumber$>">
<$BlogCommentBody$>
</div>
<div class="postinfo">
<$BlogCommentAuthor$>, at <a href="#<$BlogCommentNumber$>"> <$BlogCommentDateTime$></a><$BlogCommentDeleteIcon$>
</div>
</p><br />
</BlogItemComments>
<p><$BlogItemCreate$></p>
<br />
</BlogItemCommentsEnabled>
</div>
</span>
<div id="posts"><$BlogItemBody$><p align=center><BlogItemCommentsEnabled><a href="javascript:togglecomments('c<$BlogItemNumber$>')"><$BlogItemCommentCount$> comments</a> <$BlogItemControl$></p></BlogItemCommentsEnabled></div>
<p align=center><a href="http://creativecommons.org/licenses/by-nc-sa/2.0/">CC</a> | <a href="http://www.blogger.com/">Blogger</a>
</blogger>
</div>
</body>
</html>
Post a Comment