Blogger Mods

Promoting Your Blog - 2

2007-07-26T16:33:00.000+02:00

If you want to build up traffic to your blog, here's some good resources where you can promote your blog. Since every blog has an inbuilt RSS feed, you should - or at least you can - also submit it to RSS Feed Directories.

BLOG DIRECTORIES

1 http://directory.autismlina.com/
2 http://www.biggerblogger.com/
3 http://blogannounce.info/
4 http://www.blog-directory.org/index.php
5 http://blog.hotornot.com/
6 http://www.blogpoint.com/
7 http://www.blogratingz.com/index.jsp
8 http://www.blogtoplist.com/
9 http://www.blogdir.co.uk/
10 http://www.blogdust.com/blog-directory/
11 http://www.blogroll.net/
12 http://www.blogs-collection.com/
13 http://www.blogsrating.com/
14 http://directory.blogthat.net/
15 http://browseblogs.com/
16 http://www.delightfulblogs.com/
17 http://www.kookkoo.com/
18 http://www.quickblogdirectory.com/
19 http://www.search4blog.com/
20 http://www.thevital.net/
21 http://blogs.tomstopsites.com
22 http://wutzle.com/
23 http://www.technorati.com/
24 http://www.bloglines.com/
25 http://www.blogstreet.com/
26 http://www.blogwise.com/
27 http://boingboing.net/
28 http://www.globeofblogs.com/
29 http://www.truthlaidbear.com/
30 http://memigo.com/
31 http://www.bloghop.com/
32 http://www.blogarama.com/
33 http://www.blogsearchengine.com/
34 http://portal.eatonweb.com/
35 http://www.blogdigger.com/
36 http://www.bloogz.com/
37 http://www.sarthak.net/blogz/
38 http://www.blogmatrix.com/
39 http://www.headlinespot.com/
40 http://www.esperanto.se/kiosk/engindex.html
41 http://www.crayon.net/
42 http://www.findory.com/blogs/
43 http://bulkfeeds.net/
44 http://www.blogpulse.com/
45 http://www.blogcatalog.com/
46 http://www.blogdir.com/
47 http://www.blurtit.com/
48 http://www.newstrove.com/
49 http://www.getblogs.com/
50 http://geekphilosopher.com/
51 http://www.wilsdomain.com/blogs/
52 http://www.yourwebloghere.com/
53 http://www.blogrankings.com/
54 http://www.bloghub.com/
55 http://www.feedmap.net/BlogMap/
56 http://www.icerocket.com/
57 http://www.bloggernity.com/
58 http://www.blogsforsmallbusiness.com
59 http://www.rateitall.com/
60 http://www.blogscholar.com/
61 http://blogoriffic.com/
62 http://findingblog.com/
63 http://www.blogtopsites.com/
64 http://dir.blogflux.com/
65 http://www.thevital.net/
66 http://www.5starblogs.com/
67 http://www.rssmad.com/
68 http://blogexplosion.com/
69 http://www.blogion.com/
70 http://www.bloggeries.com/
71 http://blogadvance.com/
72 http://www.blogazoo.com/

RSS FEED DIRECTORIES

1 http://www.feednuts.com/
2 http://www.newsisfree.com/
3 http://purerss.com/
4 http://thirstycrow.net/happyfish/
5 http://rssxpress.ukoln.ac.uk/
6 http://www.blogbunch.com/
7 http://w.moreover.com/
8 http://www.2rss.com/
9 http://www.weblogalot.com/
10 http://www.pubsub.com/
11 http://www.anse.de/rdfticker/
12 http://reader.rocketinfo.com/
13 http://scienceport.org/
14 http://www.newsxs.com/
15 http://chordata.geckotribe.com/
16 http://www.newzalert.com/AuthorCenter/
17 http://www.feedsfarm.com/
18 http://www.feed-directory.com/
19 http://www.fybersearch.com/
20 http://www.shas3.com
21 http://www.everyfeed.com
22 http://dir.nooked.com/home.dir
23 http://rss-feeds-directory.com/directory/
24 http://www.readablog.com/default.aspx
25 http://www.feeds4all.nl
26 http://www.plazoo.com
27 http://www.feed24.com/
28 http://www.rssfeeds.com
29 http://www.redtram.com/
30 http://www.findRSS.net/
31 http://www.feedcat.net/
32 http://www.feedbomb.com/
33 http://jordomedia.com/
34 http://www.rss-feed.org/
35 http://feeds2read.net/
36 http://www.unclefeed.com
37 http://www.blog-directory-submit.com/
38 http://weblogs.about.com/mlibrary.htm
39 http://www.syndic8.com
40 http://www.industry-blogs.com/
41 http://www.blogmighty.com/
42 http://www.flookie.net/
43 http://www.globeofblogs.com/
44 http://www.blogcode.com/
45 http://www.blogmopolis.com/
46 http://www.gnoos.com/
47 http://www.iblogbusiness.com/
48 http://www.octora.com/
49 http://www.nfeeds.com/
50 http://www.feedburner.com/
51 http://www.squidoo.com
52 http://feedfinder.pluck.com

A Standard Blogger/blogspot template - Schematic

2007-07-24T22:02:00.001+02:00

Understanding page elements in Blogger

Here's a schematic visual representation of what you actually get to see in your browser as a page on a standard blogger blog, with a main section and the usual single sidebar. This is how blogger templates define those area's. Think of boxes or containers when looking at the graphic. The outer-wrapper box or container contains everything.. in it there's several smaller containers that might have other smaller containers in it... etc.

In your template's html all of what you can see in your browser is basically defined by the following lines of code (that is of course with "Expand Widget Templates" OFF)

<body>
<div id='outer-wrapper'><div id='wrap2'>


<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='Blogger Mods (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='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>


<div class='clear'> </div>

</div> 

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

</div></div> 
</body>

Almost everything above the opening <body> tag is all layout, of course that is important too, but for now we just want to zoom in on where the content actually goes on the screen. We'll deal with the CSS later. It's about understanding the structure of the page now. This is essential if you want to modify your blogger template beyond some cosmetics.

Here's the same schematic again...

Some important things that need to be pointed out.
As you can see in all the blocks; a block is defined by an opening <div> tag, that <div> allows us to use CSS to control the way it will look; the layout.
We don't use tables anymore these days, but CSS and xhtml or even xml.
Right after the <div> tag, you have to define a section. That's done with the tag <b:section ... (the ... indicates that the tag is not complete as given here)
This tells blogger that there is a block that will get some page elements.
Those elements themselves are called widgets, and the code for those is <b:widget...
As you can see in the main block in the schematic... the main block, that's where the posts will come, and it is defined by <div id='main-wrapper'>,
the template tells blogger that there's going to be content in this block by using
<b:section class='main' id='main' showaddelement='no'>
and what that content actually is, is done with
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
and that is translated in english: here is the place in the browser where the posts should come.

The whole main section looks like this
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
remembert hat when a section is opened and has anything in it, it needs to be closed with a closing tag... usually blogger takes care of that... unless your messing up the template inside the html code.. then it'll give you a nice red error message..

For people that have experience with html, the b in <b:section is not to be confused with the b used for bold, as you'll see it's always b:, that is a blogger platform tag not a standard html tag.

As you can see from the code for the footer
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
this is code from a new blog, one that hasn't got any footer defined yet. That's why there is no <b:widget inside it. As soon as you make your footer in "Page Elements" that will be added automatically by the blogger system.

Most of this code is generated and updated by the blogger platform automatically. You could run a blog for years without ever having to deal with any of this. But if you really want to get down to the nitty gritty of it, you should be somewhat familiar with this.

Also see
A Standard Blogger/blogspot template
A Standard Blogger/blogspot template commented

Free content for your blog...

2007-07-24T16:34:00.000+02:00

keeps it up to date and interesting... even on those days that blogging is probably the last thing on your mind.

We have already mentioned blogger's RSS page-elements, you can see them at work below, just scroll down... time to list some good resources for those people that are relatively new to newsfeeds.. and don't really know where to get good feeds.

First and foremost there's Google News.. you can basically search for any keyword and use that search as RSS feed, so if you're into baseball you could use basebal as keyword, if you're into Porsche's... you probably won't be reading this :).

There's also the Google Video search. if you're running a fan blog for the band "The Toilet Brushes" for example, just do a search on Google Video for them and grab the RSS feed from the results page. Now whenever somebody posts a video from your favourite band on Google Video or YouTube, you'll see it appear in the newsfeed.

Most sites nowadays have newsfeeds, especially all the news sites do. BBC, CNN you name it... and don't forget, you could even grab the feed of your favourite blogs...

Here's some links:
The latest shareware and freeware downloads on the web.
http://www.snapfiles.com/feeds/
FileForum
http://fileforum.betanews.com
Ars Technica
http://arstechnica.com/site/rss.ars

Moreover RSS feeds... a gazillion options, just pick one.. or two.. or..
http://w.moreover.com/site/products/ind/rss_feeds.html
The Full Categories list is here
http://w.moreover.com/site/other/categories_rss.html?

News feeds from the BBC
http://news.bbc.co.uk/2/hi/help/3223484.stm

Remember that you can use multiple RSS page elements on blogger, that means you can for example add two under the posts in the main section and another one or two in the sidebar(s).

Why not edit the template's html directly?

2007-07-24T14:12:00.000+02:00

If there's one law on the internet, it must be : One thing will never change, and that is that everything constantly changes.

If you have a bit of experience with html you might indeed add a lot of functionality by just editing the template directly. BUT... and that's a big bold but.. developments on blogger are always ongoing, there's always new features in beta and being rolled out and there's more and more people designing good looking templates. Just because you don't like any of the default templates blogger is offering at the moment, in a month or so there might be a whole slew of great new templates available.

If however you do too much editing in the template directly, especially as far as new "widgets" is concerned, you run the risk of painting yourself into a corner. If you want to switch to another template, all your page elements that you have set up using the "Page Elements" page will be kept, you won't lose any of them. If you have a lot of "widgets" on your blog you can save yourself a lot of time if somewhere down the line you want to switch to another template. That's why it's better to try and do as much as possible within the regular blogger system by adding things using the "Page Elements" page, if that is possible.

Description And Keywords

2007-07-24T12:28:00.000+02:00

It's a bit strange that blogger does not have integrated support for the standard description and keyword html meta tags, so you'll have to add those yourself, in Template > Edit HTML

Here's what I used on this blog.. change what is in red with what is relevant for your own blog...

<meta content='Modify and personalize your blogger template and create your very own distinctive look on blogger/blogspot' name='description'/>

<meta content='blogger,blogspot,templates,blog template,modify,personalize,change,blog,CSS,html,tips,tricks' name='keywords'/>

Although there's not too many search engines using the keywords tags anymore, they are still used by for example Adsense. The description tag is what will show up in a google search result description, so you better make those as clear and inviting as possible so people click through to your blog.

How to turn on Cross Columns section

2007-07-24T05:13:00.000+02:00

in Template > HTML you'll see right after the

<div id='content-wrapper'>

this code for the cross column wrapper...

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'>
</div>

Obviously, this section is defined here, but there's not really any use for it implemented in the current standard Minima template.
We're gonna change that.. and use it..

Change the no to yes in showaddelement.. that means that from now on you will be able to add page elements on the "Page Element" page. No messy and sloppy html coding, we'll do it within the blogger framework.

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'>
</div>

As we said before, now you can add elements to that section, like the Navigation menu above. You should do so in Template > Add Page Elements. To get the navigation menu I added an html widget, the html code for the nav menu was

<span style="color:#3333ff;">Navigation Menu In Cross Columns section click an item to see how it's done:</span> [ <a href="http://bloggermods.blogspot.com/2007/07/how-to-turn-on-cross-columns-section.html">Home</a> | <a href="http://bloggermods.blogspot.com/2007/07/how-to-turn-on-cross-columns-section.html">Services</a> | <a href="http://bloggermods.blogspot.com/2007/07/how-to-turn-on-cross-columns-section.html">About</a> | <a href="http://bloggermods.blogspot.com/2007/07/how-to-turn-on-cross-columns-section.html">Contact</a> | <a href="http://bloggermods.blogspot.com/2007/07/how-to-turn-on-cross-columns-section.html">Shop</a> | <a href="http://bloggermods.blogspot.com/2007/07/how-to-turn-on-cross-columns-section.html">Jobs</a> | <a href="http://bloggermods.blogspot.com/2007/07/how-to-turn-on-cross-columns-section.html">Help</a> | <a href="http://bloggermods.blogspot.com/2007/07/how-to-turn-on-cross-columns-section.html">Support</a> ]

If you go back to the template after you added an html element, you'll see how the blogger system has updated the template code to

<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>

The line
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
indicates the new page element hat we just added, in our case that was an html element. That could have been any other element too of course; text, a picture, adsense.. anything that makes sense there.. the blog's archive menu would also work there, but it would be a bit out of place there of course ;)

NOTES: 1. blogger will automatically add the closing tag </b:section> in the template html if you add the widget via "Page Elements" page.

2. one important difference with the menu in the header is the style of the links, as you can see the style here is the same as in the sidebar widgets. If you hover the mouse over the link the underline will appear and the link text will change color too..

Of course you can add anything that makes sense in this section.. not just a menu... a flash menu would go fine in here too..

How to turn on Header widgets

2007-07-24T03:05:00.000+02:00

By default in the Minima template header widgets are turned OFF. So you'll have to turn those on.. for example if you'd like to add a navigation menu or some advertising in there...
Here's how to do it...
For this blog the header section was
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogger Mods (Header)' type='Header'/>
</b:section>
</div>
Now we'll turn widgets ON by changing showaddelement='no' to showaddelement='yes'
and set maxwidgets to something that makes sense, like maxwidgets='3' (that is of course the minimum.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Blogger Mods (Header)' type='Header'/>
</b:section>
</div>

I added an adsense widget and a navigation menu, in Custimze > Template > Page Elements, now the header code in template looks like this..
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='AdSense1' locked='false' title='' type='AdSense'/>
<b:widget id='Header1' locked='true' title='Blogger Mods (Header)' type='Header'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>
it can get tricky arranging those elements on the Page Elements page to get them where you want them, so you can sometimes better copy & paste the widgets directly in the template's html. The fake navigation menu is just an html/javascript widget with this code

<span style="color:#3333ff;">Fake Navigation Menu In Header Section Click a Link to see how it's done:</span> <a href="http://bloggermods.blogspot.com/2007/07/how-to-turn-on-header-widgets.html">Home</a> | <a href="http://bloggermods.blogspot.com/2007/07/how-to-turn-on-header-widgets.html">Services</a> | <a href="http://bloggermods.blogspot.com/2007/07/how-to-turn-on-header-widgets.html">About</a> | <a href="http://bloggermods.blogspot.com/2007/07/how-to-turn-on-header-widgets.html">Contact</a> | <a href="http://bloggermods.blogspot.com/2007/07/how-to-turn-on-header-widgets.html">Shop</a> | <a href="http:/">Jobs</a> | <a href="http://bloggermods.blogspot.com/2007/07/how-to-turn-on-header-widgets.html">Help</a> | <a href="http://bloggermods.blogspot.com/2007/07/how-to-turn-on-header-widgets.html">Support</a> |

A Standard Blogger/blogspot template commented

2007-07-24T00:54:00.000+02:00

NOTE : everything in bold is my comments. The standard template used is Minima. We will analyze these sections seperately later on, each in one post, this is just for the global overview, don't be intimidated if this is the first time you see something like this. We all started somewhere..;)

<?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 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'>
you better don't touch anything above this comment, this is all required by the blogger system to function properly. They're called SCHEMA definitions, your browser uses some of them too. So don't touch.
next line is the opening head tag, a standard html tag
<head>
next line is a variable used by the blogger/blogspot sytem, to insert specific variables in the html of the page, things like the links to the RSS/Atom feeds etc.. we'll go deeper into that later on.
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
the line below is where the "skin" or stylesheet definitions begin, this is where you define the LOOK of your blog, things like colours used, fonts etc but also.. and that's important where all the div's are defined, for example the width of your sidebar and the posting area. We'll look into that later.
<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>
the line above is where skin or stylesheet definitions end
</head>
previous line is the closing head tag
next line is the opening body tag
<body>
next line opens the "wrapper div, that is basically the table that holds the main posts area as well as the sidebar area as well as the footer
<div id='outer-wrapper'><div id='wrap2'>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>
this is the header wrapper. You can change the header from the tab TEMPLATE > Page Elements
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogger Mods (Header)' type='Header'/>
</b:section>
</div>
previous line is where the header div is closed, always remember, every element must always be opened and closed... or you'll get an error
<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
next line is the "main" section wrapper, that is where the posts on your blog go
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
previous line is where the "main" wrapper is closed again
next line is where the sidebar wrapper starts, that's the place where your menu's and widgets usually will go as well as your archive menu.
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>


<div class='clear'> </div>

</div> 
previous line is where the content wrapper gets closed, the so called closing tag
next line is the footer wrapper
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
previous line closes the footer wrapper
next line closes the outer wrapper
</div></div> 
next is the mandatory closing body tag
</body>
and finally the mandatory closing html tag
</html>

A Standard Blogger/blogspot template

2007-07-24T00:51:00.001+02:00

<?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 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'>


<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='Blogger Mods (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='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>


<div class='clear'> </div>

</div> 

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

</div></div> 
</body>
</html>

Professional Statistics

2007-07-23T19:23:00.001+02:00

There's a couple of hundred free sitecounters out there, you just have to google, or keep your eyes open while surfin' the web. But do all these freebies really perform as they should and do they give you the information you might want from a statistical package?

If all you want is a counter, then please go for it. But the best solution available is without any doubt Google's Analytics. It's free, and it is very easy to install, as far as reporting is concerned.. there's nothing you might want to know about your visitors that isn't available in some of it's reports. Thorough, flexible, and.. what I find very important, private. I don't need the world to know how many people visit my blog. As long as I know, that's all that matters.

Let it be understood, if all you're after is bragging rights then by all means, don't go there, if however you want the best solution available, sign up at http://www.google.com/analytics/

All you need to do is copy & paste couple of lines of javascript into your blog's template, just above the closing </body> tag.

The Professional Touch

2007-07-23T19:22:00.000+02:00

Domain Name...
Google Apps For Domains

coming soon...

Promoting Your Blog

2007-07-23T19:21:00.000+02:00

Much has been written about Website promotion, and lots of nonsense has been written about the subject too. Several people made a lot of money thanks to people that are willing to believe everything.. so here' some basic things you should do , to start with..

If you have a blogger blog, you have a google account too, well then, make sure you're signed in and go to http://www.google.com/webmasters/tools

That is Google Webmaster Tools, after you signed in with your Google account you can add your blog there. Paste or type your Blog's URL in the field under Sites and click the add site button... on the next page you'll be asked to verify your site. Again, no problem. Select from the verification method dropdown Choose verification method the option Add a metatag. The other option is not really an option since you can't upload any html files to blogger. You will get a meta tag immediately, for example something that look like this...
<meta name="verify-v1" content="Vu2hEcXqpiSag1152gmLpY2BloeIzrQwMpiDVVGcFM=" />
copy that entire line, and on your blog go to Template > Html > and paste the metatag just under the <head> tag. Save your template... go back to the Google Webmasters page if you have it still open and click the button Verify. If it's a new blog you'll probably see

No pages from your site are currently included in Google's index. Indexing can take time. You may find it helpful to review our information for webmasters and webmaster guidelines. [?]

Don't worry, if verification was successful the Google search crawlers will index your blog within the next couple of weeks... and since you're on blogspot probably even sooner. Feel free to follow the links on that page to more resources for webmasters.. there's always something to learn there.

You can also submit your blog to several other search engines using some free submission sites.

We'll come back to Promoting Your Blog in Managing your Newsfeeds

Getting Rid Of The Nav/Search Box..

2007-07-23T19:04:00.001+02:00

This might be a violation of Google/Blogspot Terms Of Service..

From techxtreme.blogspot.com

I have removed the Navigation Bars from all my blogs. The blogs now look fairly clean without these, and not much like some BLOGGER blogs. There's an easy way to do it. Here's how to:

Add the following lines of code to your blog template

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

And you are quite done :)

But,I myself experience some shortcomings with this. Now with the Navigation Bar no longer visible,I have to goto the blogger home everytime i have to make any changes to the blog (customising it) or every time i have to make a new post. With the NavBar handy,it wasn't something that could be called a TASK...

Options to replace the search..
javascript search
Technorati
Google Adsense for Search

Creating A Pinned Topic

2007-07-23T19:02:00.001+02:00

If you want to have some sort of message at the top of your page on every page, on forums they call those pinned posts, here's how to do that.. go to the customize section of your blog.. the default Add and Arrange Page Elements page will load, click on Add a Page Element at the bottom of the page.. choose "Text" in the popup window and in the next window type in the text you want in there and if you want to you can type in a title.. and save.. now drag this new page element all the way up and release it just above the posts element. Voila.

You can also use an html/javascript element for this of course, if you want to have more control or want to add a banner or flash animation etc.

Use An Image As Blog Header

2007-07-23T18:54:00.000+02:00

QuickTime | Windows Media

Video made and posted originally by Ryanne

Advertising On Blogger...

2007-07-23T18:53:00.001+02:00

coming soon

Managing Your Newsfeeds

2007-07-23T18:52:00.000+02:00

One of the most overlooked features of blogger is the use of newsfeeds. We'll call them RSS feeds, even though technically they can be ATOM as well.. so whenever I mention RSS you'll know I mean both.

Not only does every blogger blog have it's own RSS feed, unless you specifically turn it off in settings, but you can also integrate other RSS feeds, or at least excerpts from them, like the last 5 headlines. You can add those as page elements, in your sidebar or under the posts in the main section. Just look below.

Now if you think about that option just for a couple of minutes, that should make clear that you can have updated contents on your blog, for every visitor that visits, even if you didn't post anything yourself.

Let's say I'm interested in the whole discussion about file-sharing, so what could I do to add that subject to my blog, and my visitors who might be interested can stay up to date too, on my blog... go to Google News.. search for file sharing and on the results page click the RSS icon. Or copy the link under the icon and paste it in blogger RSS page element.

Anyway let's start managing our own business.. er.. feed before we start dealing with others.

Although there's nothing wrong with the direct blogger feed, I do strongly suggest that if you're serious about blogging, you register at http://www.feedburner.com.. it's free and it has a lot of extra's that are extremely useful. Like decent stats, you'll know how many people are using your feed - there's no way to find out using the regular blogger feed - and it has several other additional features we might look into later.. or just browse the feedburner.com site if you can't wait.

Anybody that wants to sign up for the feed of this blog will automatically be redirected to my feedburner page.. that's a recent development. Now that Google has acquired Feedburner, it has opened up blogger site feeds as well, so now you can redirect all the requests for the newsfeed of your blog to your Feedburner feed.

You should do so in Settings > Site Feed. Just copy and paste your feedburner URL or link in there and click "Save".. all done.

Adding a favicon...

2007-07-23T18:50:00.001+02:00

The web at work.. even when I wasn't searching for it , I just bumped into it, another great video tutorial from Ryanne Hodson... now on the subject of favicon .. check it out here...

The site she mentions in the video where you can have a pic converted to a favicon is http://www.htmlkit.com/services/favicon/

Add Some interactivity to your blog

2007-07-23T18:47:00.001+02:00

If you are using Feedburner for your RSS feed, they have a whole lot of so called FeedFlares available like the ones you can see used on this blog, in the post footer, and also in the RSS feed. You can add links to so called social bookmarking services like "Digg This" and "deli.cio.us", as well as an "Email this" and an "Addthis" option and many more. By the way, the addthis flare is now pretty well hidden so here's the link to it, should you need it

http://www.addthis.com/feedflares/link.xml

Copy and paste that link on the FeedFlare page over at Feedburner in the "Personal FeedFlare" section. Click the "Add New Flare" button and the first part is already done.

Instructions on how to implement it in your blog are available on the Feedburner site. It should not be a problem setting it up.

Go to Template > Edit HTML and click the "Expand Widget Templates" button, now in the template find the line

<p class='post-footer-line post-footer-line-3'/>

and right after that you paste, the code feedburner gives you, for me that was

<script charset='utf-8' expr:src='"http://feeds.feedburner.com/~s/BloggerMods?i=" + data:post.url' type='text/javascript'/>

You should replace BloggerMods with your own feed name of course. Just copy and paste the code from FeedBurner directly, to be sure.

Click "Save" template and you're done, as soon as Feedburner updates your feed the feedflares will be added to your last post, that can take a while if you don't post too often. You can always go ping your feed at feedburner
http://www.feedburner.com/fb/a/ping

Rating Script
Another interesting item is a Rating script from http://js-kit.com. If you want non standard settings, look at this page

There's a few rating scripts around but this one really stands out in it's ease of use and especially the implementation of it...

It takes two steps to install; go to Template > Edit HTML and click the "Expand Widget Templates" button, now in the template code find the line

<p class='post-footer-line post-footer-line-3'/>

and right after that you paste
<div style='text-transform:none;' class='js-kit-rating' view='split'/></div>

I added the style='text-transform:none;' because of the settings of the default Minima template, the font is too large with all caps, so I turned that off.

Now scroll all the way down and at the bottom, just before the closing </body> tag you paste

<script src='http://js-kit.com/ratings.js'/>

That's it. Save and view your blog.

After adding the feedburner code (see above) the code now looks like this

<p class='post-footer-line post-footer-line-3'/>
<script charset='utf-8' expr:src='"http://feeds.feedburner.com/~s/BloggerMods?i=" + data:post.url' type='text/javascript'/>
<div style='text-transform:none;' class='js-kit-rating' view='split'/></div>

Three Column Layouts...

2007-07-23T18:46:00.000+02:00

This is the relevant section in your template's html, go to the html tab in template tab and scroll almost all the way down and you'll see this code...

<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='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>


<div class='clear'> </div>

</div> 

Basically what this code tells the blogger system is that in the content wrapper div, there's two main sub elements, the "main" section, that's where your posts go, and the "sidebar" section, that's where your blog's archive menu and your profile usually are, in the Minima template we're using those are on the right side. Or to the right of the posts.

So if we want to change the template, so that it has three colums, the easiest way to do that is to add another sidebar... or... since we're smart but lazy, we'll just copy the sidebar code...

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

What is important is to look at the id tags in this code. This tells blogger what to do with it .. so if we want to add another sidebar, we'll have to tell the system that there's two different sidebars now, we must tell the system which is which and we'll do that by changing the id='sidebar" of the copy we just made, to id='sidebar2", you could also call it id='sidebarleft" if you want, it just needs to be a unique name. We'll do that in the code.

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

If you look at this code you'll see that it's not all that difficult to see what is what... <b:section tells blogger this is the start of a section .. and the <b:widget you see is the widgets that are in the default sidebar of any newly created blog. It has the archive menu, the links to the posts you make.. that is
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
and it has a second widget, namely your profile.. or the "About Me box".
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
You can just leave those in here for now, it's better to remove those later from withing blogger's page elements page.

OK.. so now we'll copy the new sidebar code right after the section

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
copy the new code here... but don't save it yet..

that is just before the line
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

The full code should now look like this
<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

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

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>


<div class='clear'> </div>

</div> 

Now this is basically how you add another column to blogger... BUT.. as you remember from other posts, the blogger system uses the CSS declarations to define the size of some of these divs... for example
#outer-wrapper is by default set to width: 660px. Inside that outer wrapper are two sections, namely #main-wrapper set as width: 410px... and #sidebar-wrapper default set at width: 220px. If you add up 410 and 220 that'll give you 630 so that fits in the outer wrapper set at 660 width. But we just added another sidebar, that means we added another element with a width of 220px.. so now the total width is 410+220+220 and that is 850px ... that won't fit in our default 660px width for outer wrapper so we'll have to adjust that. Before you do you should look at the style definitions again and you'll see padding:10px for #outer-wrapper, that means it will add 10px on all sides.. so we should set our outer-wrapper width at least to 850px + 10px padding left + 10px padding right.. so #outer-wrapper width should be changed to 870 px.. I'd add another 10px just to be sure... 880px is the new width for #outer-wrapper.

One more things needs to be changed... before you can save the template and look at it... #sidebar-wrapper is defined as width: 220px; and float: right;, that float needs to be changed, and must be float: left;

Now save your template... or at least try to

oops
More than one widget was found with id: BlogArchive1. Widget IDs should be unique.

Of course just like we had to tell the blogger system that we made a new sidebar, and rename that ID, we'll have to do that for the widgets in there too.. just put an extra 1 behind the ID, we'll delete them from the Page Elements page anyway.. now save the template and take a look...

We're getting there but..we'll need to fine tune a couple of things. First of all the header width is still the old value, we'll have to change that to the new global width that'll look better.

Also to create some white space between the three blocks change the style definition of
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
/* padding:0 0 1.5em; */
padding:5px;
}
you can use another value if your prefer more or less..

To avoid any visual confusion you could change the background color of the sidebars or set them apart from the main section by using the border CSS definition of the main section.

This setup is basically, from left to right: sidebar - main - sidebar2
Of course there's no reason why you would not be able to have the two sidebars side by side next to each other... main - sidebar - sidebar2.. that's a setup used on a lot of recent wordpress templates.. here's an example

Welcome

2007-07-23T18:44:00.000+02:00

Hi,

Welcome to BloggerMods..

here you'll find some interesting modifications for the Blogger Platform..

Why not just get a template from somewhere I can hear you think?

Well your blog is still gonna look like a couple of hundred others, who also got that template where you got it.

And the challenge of learning... ;)