Free 4-Column Template For Blogspot Blogs

4 Column Blogger Template

Sometimes bloggers are in search of 4 columns template because it gives more space in one scroll and also perfect place for AdSense. Here is a good tip about how to make a 4-column blog. The below mentioned details will give fixed widths of 450 pixels for the main column, 163, 163 and 164 pixels for the three sidebars. This template is best viewed on 1024×768 pixels screen resolution. As we know, even data says, that more people are using 1024×768 pixels resolution.

4 Column Blogspot Template

Instructions : Please Follow Them Closely

  • First take all the backups of the current template if you are trying to give a new shape to your old blog template so that if anything goes wrong then you may have your previous template in the original format.
  • Now go to LAYOUT > EDIT HTML in the dashboard of blogger.com. Copy the below given script by selecting and pressing ctrl+C keys and paste it in the EDIT HTML section in the blogger.

<?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: Minima
Designer: Douglas Bowman
URL: www.stopdesign.com
Modified by Peter Chen
URL: blogger-tricks.blogspot.com
Date: 26 Feb 2004
Updated by: Blogger Team

———————————————– */

/* Variable definitions
====================
<Variable name=”bgcolor” description=”Page Background Color”
type=”color” default=”#fff” value=”#ffffff”>
<Variable name=”textcolor” description=”Text Color”
type=”color” default=”#333″ value=”#333333″>
<Variable name=”linkcolor” description=”Link Color”
type=”color” default=”#58a” value=”#5588aa”>
<Variable name=”pagetitlecolor” description=”Blog Title Color”
type=”color” default=”#666″ value=”#666666″>
<Variable name=”descriptioncolor” description=”Blog Description Color”
type=”color” default=”#999″ value=”#999999″>
<Variable name=”titlecolor” description=”Post Title Color”
type=”color” default=”#c60″ value=”#cc6600″>
<Variable name=”bordercolor” description=”Border Color”
type=”color” default=”#ccc” value=”#cccccc”>
<Variable name=”sidebarcolor” description=”Sidebar Title Color”
type=”color” default=”#999″ value=”#999999″>
<Variable name=”sidebartextcolor” description=”Sidebar Text Color”
type=”color” default=”#666″ value=”#666666″>
<Variable name=”visitedlinkcolor” description=”Visited Link Color”
type=”color” default=”#999″ value=”#999999″>
<Variable name=”bodyfont” description=”Text Font”
type=”font” default=”normal normal 100% Georgia, Serif” value=”normal normal 100% Georgia, Serif”>
<Variable name=”headerfont” description=”Sidebar Title Font”
type=”font”
default=”normal normal 78% ‘Trebuchet MS’,Trebuchet,Arial,Verdana,Sans-serif” value=”normal normal 78% ‘Trebuchet MS’,Trebuchet,Arial,Verdana,Sans-serif”>
<Variable name=”pagetitlefont” description=”Blog Title Font”
type=”font”
default=”normal normal 200% Georgia, Serif” value=”normal normal 200% Georgia, Serif”>
<Variable name=”descriptionfont” description=”Blog Description Font”
type=”font”
default=”normal normal 78% ‘Trebuchet MS’, Trebuchet, Arial, Verdana, Sans-serif” value=”normal normal 78% ‘Trebuchet MS’, Trebuchet, Arial, Verdana, Sans-serif”>
<Variable name=”postfooterfont” description=”Post Footer Font”
type=”font”
default=”normal normal 78% ‘Trebuchet MS’, Trebuchet, Arial, Verdana, Sans-serif” value=”normal normal 78% ‘Trebuchet MS’, Trebuchet, Arial, Verdana, Sans-serif”>
<Variable name=”startSide” description=”Side where text starts in blog language”
type=”automatic” default=”left” value=”left”>
<Variable name=”endSide” description=”Side where text ends in blog language”
type=”automatic” default=”right” value=”right”>
*/

/* Use this with templates/template-twocol.html */

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}

/* Header
———————————————–
*/

#header-wrapper {
width:100%;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:950px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
text-align: center;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

/* Outer-Wrapper
———————————————– */
#outer-wrapper {
width: 990px;
margin:0 auto;
padding:0;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
margin:0 0 0 20px;
width: 450px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#left-column {
width: 170px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#rightsidebar-left {
margin:0 0 0 10px;
width: 170px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

#rightsidebar-right {
width: 150px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

/* Headings
———————————————– */

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

/* Posts
———————————————–
*/
h2.date-header {
margin:1.5em 0 .5em;
}

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

.post-body {
margin:0 0 .75em;
line-height:1.6em;
}

.post-body blockquote {
line-height:1.3em;
}

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

.comment-link {
margin-$startSide:.6em;
}
.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;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

/* Sidebar Content
———————————————– */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .Blog {
border-bottom-width: 0;
}

/* 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: $postfooterfont;
color: $sidebarcolor;
font-weight: bold;
line-height: 1.6em;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}

.profile-link {
font: $postfooterfont;
text-transform: uppercase;
letter-spacing: .1em;
}

/* Footer
———————————————– */
#footer {
width:990px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
]]></b:skin>
</head>

<body>
<div id=’outer-wrapper’><div id=’wrap2′>

<!– 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 id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=” showaddelement=’yes’>
<b:widget id=’Header1′ locked=’true’ title=’4 column blog (Header)’ type=’Header’/>
</b:section>
</div>

<div id=’content-wrapper’>

<div id=’crosscol-wrapper’ style=’text-align:center’>
<b:section class=’crosscol’ id=’crosscol’ showaddelement=’yes’>
<b:widget id=’HTML2′ locked=’false’ title=” type=’HTML’/>
</b:section>
</div>

<div id=’left-column’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
<b:widget id=’BlogArchive1′ locked=’false’ title=’Blog Archive’ type=’BlogArchive’/>
</b:section>
</div>

<div id=’main-wrapper’>
<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>
</div>

<div id=’rightsidebar-left’>
<b:section class=’sidebar’ id=’sidebar2′ preferred=’yes’/>
</div>

<div id=’rightsidebar-right’>
<b:section class=’sidebar’ id=’sidebar3′ preferred=’yes’>
<b:widget id=’HTML1′ locked=’false’ title=” type=’HTML’/>
</b:section>
</div>

<!– spacer for skins that want sidebar and main to be the same height–>
<div class=’clear’> </div>

</div> <!– end content-wrapper –>

<div id=’footer-wrapper’>
<b:section class=’footer’ id=’footer’/>
</div>

</div></div> <!– end outer-wrapper –>
</body>
</html>

  • Preview the template, observe it properly and then i you are satisfied then save it. Some of the gadgets may be missing. Don’t worry. Place all those from your saved template.

Note: The sidebars are purposely kept little bit more than 160 pixels because the common and also the popular AdSense  skyscraper ad unit is 160×600 pixels. Hence, it will easily fit in any of the three sidebars.

Hope you all liked it. Keep reading. There are much more exciting tips going to come in this section for all those passionate bloggers. Do write your comments about how friendly you found this template.

Be the first to comment

Leave a Reply

Your email address will not be published.


*


*