Because of so many questions about, “How do we add column on the blog?” Finally, I decide to spent a little of my time to write this article. Actually, adding a new column to our blog doesn’t so hard. But still, we need bit knowledge to do that.
In this chance, I will explain to you about, “how to make a column without images help.” As usual, I will just use template Minima, you know that, this is official template which provide by Blogger and don’t use anypicture.
Based on standardizations from Blogger Template, we will know that, a template must have three mainelements. That is:
- Header Element
- Outer Element
- Footer Element
For Outer, it’s divided again into:
- Main Element. This is the element where we can save posting. So, any posting that we send to ourblog will be shown here.
- Sidebar Element. This is the elements to save any blog tools either accessory that we want, in orderto decorate our blog.
From dissatisfaction from ‘only one sidebar’, if somehow we want to add some additional sidebar, we need to add it manually. I’ll clear it for you. I’ll show you an original template code from template Minima(New Template/XML)
<html 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
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">
*//* 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:660px;
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:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}#header img {
margin-left: auto;
margin-right: auto;
}
/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}#main-wrapper {
width: 410px;
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 */
}#sidebar-wrapper {
width: 220px;
float: right;
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 */
}
/* 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 p {
margin:0 0 .75em;
line-height:1.6em;
}.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}.comment-link {
margin-left:.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: left;
}
#blog-pager-older-link {
float: right;
}#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:0 0 .25em 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: left;
margin: 0 5px 5px 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:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;
}
]]></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='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='3 kolom (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='no'/>
</div><div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div><div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</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>
From the code that I show to you, the one that we need to keep track of are some codes around Outer-Wrapper:
/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
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 */
}
#sidebar-wrapper {
width: 220px;
float: right;
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 */
}
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
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 */
}
#sidebar-wrapper {
width: 220px;
float: right;
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 */
}
Like what I’ve told you before, that Outer-Wrapper is a place to save main-wrapper and sidebar-wrapper.So, if you want to add a new column, or in other words, new sidebar, then something that we need to do first is adding column width from Outer-Wrapper itself.
Then, “How could we add a new column?” The first thing that you need to think about is, “how much longer width of my new column?” Okay, to make this thing clearer, I will take an example, width that we going to work for is 180 pixel, so we do need to change width of Outer-Wrapper, so we can estimate that width of our Outer-Wrapper is: 410 pixel + 220 pixel + 180 pixel + 20 pixel = 830 pixel. For some spaces, let’s give it plus 10 pixels, so we got 840 pixel widths for our sidebar. To add new side bar code, please look at the example below.
#newsidebar-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
Then, if we add the code, it will be like this.
/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
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 */
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px; word-wrap: break-word;
------------------------------------------ */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
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 */
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px; word-wrap: break-word;
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#newsidebar-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
That is the first step that we do. The second step is to make code that will be placed in body. As example on template that I just write, code id for sidebar are like this:
Our next duty is placing code for new id sidebar that we going to do. The code would be like this.
Then, after we mix it, just save new sidebar code under original sidebar code. The code would be like this.
Our new column already created. Want to make it more interesting? Then we should change the header width and footer width, with exactly same pixel as the Outer-Wrapper that is 840 pixels.
Still doesn’t get it?
In order to understand what I told you clearly, just give it a try. Make a new blog for the experiment (don’t use your main blog to this experiment!). Choose the usual Minima template. Are you ready? Let’s keep moving!
- login in on Blogger
- Click Layout
- Click Edit HTML tab.
- Just keep in mind! Never give a tick in white little box beside sentence Expand Widget Template. Once again, don’t give it a tick, or you will see pretty annoying widget codes.
- Find out code like this:
- Change value 660px with 840px, so the code will be like this.
- Find the code below
- Change value 660px with 840px, so the code will be like this.
- Find the code below :
- Copy and paste this code exactly below the previous code :
- Find the code below :
- Change value 660px with 840px, so the code will be like this.
- Find the code below :
- Copy and paste this code exactly below the previous code :
- Click Save Template button
- Well, it’s done!
To see the result, just click Page Element, does it already work and become 3 columns or not. If it’s already done, feel free to fill up that side bar with anything you want to, and see the real result.
Steps that I mention to you before was just basic methods. To add other variations, you will need more knowledge and creativity. For make sure of you about what I explained to you, here, you can see the example. click here!
Good luck!
Post a Comment