This layout is cross-browser compliant. Meaning it will look virtually the same in any browser/operating system combination. This template has been tested in IE6, IE7, Firefox, Safari and Camino.
All of the main colors and fonts are easily edited from the Fonts and Colors layout settings within the Blogger dashboard.
Enjoy!
Live Demo - Download Template
Copy n' Paste:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Simple and Clean Liquid Three Column Blog Style Template
Designer: Raymond May Jr.
URL: http://www.compender.com
Date: 4/30/09
Based on the Holy Grail layout by Matthew James taylor
URL: http://matthewjamestaylor.com/blog/ultimate-3-column-blog-style-pixels.htm
-----------------------------------------------
*/
/* Variable definitions
====================
<Variable name="bgColor" description="Main Background Color"
type="color" default="#FFFFFF" value="#FFFFFF">
<Variable name="widgetBgColor" description="Sidebar Backgrounds Color"
type="color" default="#ffffcc" value="#ffffcc">
<Variable name="textColor" description="Text Color"
type="color" default="#000000" value="#000000">
<Variable name="linkColor" description="Link Color"
type="color" default="#0066CC" value="#0066CC">
<Variable name="headerBgColor" description="Page Header Background Color"
type="color" default="#C3D9FF" value="#C3D9FF">
<Variable name="headerTextColor" description="Page Header Text Color"
type="color" default="#000000" value="#000000">
<Variable name="borderColor" description="Border Color"
type="color" default="#999999" value="#999999">
<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#999999" value="#999999">
<Variable name="sidebarTitleBgColor" description="Sidebar Title Background Color"
type="color" default="#ffcc66" value="#ffcc66">
<Variable name="sidebarTitleTextColor" description="Sidebar Title Text Color"
type="color" default="#0000FF" value="#0000FF">
<Variable name="bodyFont" description="Text Font"
type="font" default="normal normal 100% Verdana, Arial, Sans-serif;" value="normal normal 100% Verdana, Arial, Sans-serif;">
<Variable name="headerFont" description="Page Header Font"
type="font" default="normal normal 175% Verdana, Arial, Sans-serif;" value="normal normal 175% Verdana, Arial, Sans-serif;">
<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
*/
body {
background: $bgColor;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: left;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color: $linkColor;
}
a:visited {
color: $linkColor;
}
a img {
border-width: 0;
}
/* Header
----------------------------------------------- */
#header {
clear:both;
float:left;
width:100%;
}
#header {
text-align:left;
background-color: $headerBgColor;
color: $headerTextColor;
font: $headerFont;
border-bottom: 1px dashed $borderColor;
}
h1.title {
margin: 15px 0 0 15px;
line-height: 1.2em;
font-size: 100%;
letter-spacing: .1em;
text-transform: uppercase;
}
.
h1.title a, h1.title a:visited {
color: $headerTextColor;
text-decoration: none;
}
#header .description {
display: block;
margin: 0 0 15px 30px;;
line-height: 1.4em;
font-size: 30%;
text-transform: uppercase;
}
/* Content
----------------------------------------------- */
/* column container */
.colmask {
font: $bodyFont;
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* 3 column blog style settings */
.blogstyle {
background:$bgColor; /* Right column background colour */
}
.blogstyle .colmid {
float:left;
width:200%;
margin-left:-210px; /* Width of right column */
position:relative;
right:100%;
background:$bgColor; /* Centre column background colour */
}
.blogstyle .colleft {
float:left;
width:100%;
margin-left:-210px; /* Width of centre column */
background:$bgColor; /* Left column background colour */
}
.blogstyle .col1wrap {
float:left;
width:50%;
padding-bottom:1em; /* Centre column bottom padding. Leave it out if it's zero */
}
.blogstyle .col1 {
margin:0 15px 0 435px; /* Centre column side padding:
Left padding = left column width + centre column left padding width
Right padding = right column width + centre column right padding width */
position:relative;
left:100%;
overflow:hidden;
}
.blogstyle .col2 {
float:right;
width:200px; /* Width of left column content (left column width minus left and right padding) */
position:relative;
left:205px; /* Width of the left-had side padding on the left column */
}
.blogstyle .col3 {
float:right;
width:200px; /* Width of right column content (right column width minus left and right padding) */
position:relative;
left:615px;
}
.clear {
clear: both;
}
/* Headings
----------------------------------------------- */
h2, h3 {
margin: 0;
}
/* Posts
----------------------------------------------- */
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 75%;
}
.post {
margin: 0 0 1.5em;
padding-bottom: 1.5em;
}
.post-title {
margin: 0;
padding: 0;
font-size: 170%;
font-weight: bold;
line-height: 1.1em;
letter-spacing: .1em;
}
.post-title a, .post-title a:visited, .post-title strong {
text-decoration: none;
color: $textColor;
font-weight: bold;
}
.post div {
margin: 0 0 .75em;
line-height: 1.6em;
text-align: justify;
}
.post-footer {
margin: -.25em 0 0;
color: $textColor;
font-size: 87%;
}
.post-footer .span {
margin-$endSide: .3em;
}
.post img {
padding: 4px;
border: 1px solid $borderColor;
}
.post blockquote {
margin: 1em 20px;
}
.post blockquote p {
margin: .75em 0;
}
/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}
#comments h4 strong {
font-size: 110%;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
}
#comments-block dt {
margin: .5em 0;
}
#comments-block dd {
margin: .25em 0 0;
}
#comments-block dd.comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
font-size: 78%;
}
#comments-block dd p {
margin: 0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.feed-links {
clear: both;
line-height: 2.5em;
}
#blog-pager-newer-link {
float: $startSide;
}
#blog-pager-older-link {
float: $endSide;
}
#blog-pager {
text-align: center;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
margin: 0 0 .5em;
padding: 4px 5px;
background-color: $sidebarTitleBgColor;
font-size: 100%;
color: $sidebarTitleTextColor;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: .5em;
padding-left: 15px;
text-indent: -15px;
line-height: 1.5em;
}
.sidebar {
margin: 1.6em 0;
color: #333333;
line-height:1.3em;
}
.sidebar .widget {
border: 1px solid $borderColor;
background:$widgetBgColor;
margin-bottom: 10px;
}
.sidebar .widget-content {
margin: 5px;
}
/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $borderColor;
}
.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font-weight: bold;
line-height: 1.6em;
}
.profile-datablock {
margin:.5em 0 .5em;
font-size: 78%
}
.profile-textblock {
margin: 0.5em 0;
line-height: 1.5em;
}
.profile-link {
clear:both;
float:left;
font-size: 78%;
}
/* Footer
----------------------------------------------- */
#footer {
color: $textColor;
}
#footer {
clear:both;
float:left;
width:100%;
border-top:1px dashed $borderColor;
}
#footer .widget {
margin: 15px;
padding-top: 20px;
font-size: 85%;
line-height: 1.5em;
text-align: $startSide;
}
]]></b:skin>
</head>
<body>
<div id="header">
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='testinggrounds (Header)' type='Header'/>
</b:section>
</div>
<div class="colmask blogstyle">
<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> | <a href='#sidebar'>skip to sidebar</a>
</span>
<div class="colmid">
<div class="colleft">
<div class="col1wrap">
<div class="col1">
<!-- Column 1 start -->
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<!-- Column 1 end -->
</div>
</div>
<div class="col2">
<!-- Column 2 start -->
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
</b:section>
<!-- Column 2 end -->
</div>
<div class="col3">
<!-- Column 3 start -->
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
<!-- Column 3 end -->
</div>
</div>
</div>
</div>
<div id="footer">
<b:section class='footer' id='footer'/>
</div>
</body>
</html>
Comments for this post
