The Blog Doctor.

The Minimalist Minima Photoblog Template.

The Minima Template or Layout is used whenever you want to customize your blog any which way you want. There are no graphics used in the template as are used in the Rounders template. The Rounders and other templates with graphics are more difficult to customize as the images have to be resized to the new dimension.

Here I have attempted to simplify the Minima template further by making it a single-column template. This will enable bloggers to upload large photos or wide videos in their blog without worrying about the sidebar falling down!

This template is useful to bloggers who wish to show off their content without any distracting sidebars. The first step was to increase the width of the template :

This was done by simply getting rid of the sidebar code in the Template Code box :

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

Then I increased the width of the main-wrapper in this code in the Template Code box :

#main-wrapper {
width: 660px;
....
}

This is the column containing the posts. If you want you can increase the width further depending on your monitor resolution. (Start button on Windows Taskbar---->Control Panel------>Display Properties----->Settings tab----->Lower left Screen Resolution in pixels).

Since the outer-wrapper contains the main-wrapper you have to increase width of former by same amount :

#outer-wrapper {
width: 660px;
...
}

The next step was to put in widgets in the footer. I have made three columns in the footer and you can add your widgets there. See picture below :

To outline the main column I have used a yellow color. If you wish to change the color you can change it in this code :

#main-wrapper {
width: 660px;
......
background:#ffff00 !important;
}

Change 'ffff00' to the hex number of the color you want and save template.

You can download the template here. Right click the link and choose "Save Link as" and save the XML template file to your desktop. Then upload template to blog.

This is a Layout template and cannot be used if you have a Classic template blog unless you upgrade blog to Layouts.

Equal Height Columns Template for Blogger.

Three Column Template in Three Steps.

Three column templates are popular because they make more use of the screen real estate. Adding another column to your blog enables you to add more widgets or advertisements to your blog.

In this post I will show you how to transform your blog into a three column blog in three simple steps. Have a look at the before and after screenshots below :

	--->
BEFORE		AFTER

To demonstrate this I have taken the Minima Dark Template of Blogger. I have shown the columns using colors to demonstrate them better...........

FIRST : INCREASE BLOG WIDTH

The first step is to increase the width of the blog. To do this follow these steps :

1. Login at Blogger.com.

2. The Blogger Dashboard page opens on successful login.

3. Click the Layout link under your blog title.

4. The Page Elements subtab of Layout tab will open.

5. Click the Edit Html subtab of Layout tab.

6. The Template Code box page will open. Scroll down in the box to this code :

#outer-wrapper {
width: 660px;
margin:0 auto;
background:#ff0000;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Increase '660px' in the width line in the above code to '880px' and save template. We have increased the width of the outer-wrapper so that it will accommodate a third column. Since we want the second sidebar to have the same dimensions we have increased the width by the same width - 220px - as that of the original sidebar. This is how it looks now :

The outer-wrapper is the red column containing the main posts column (blue) and the yellow original sidebar. Space has now been created to add a third column.

SECOND : ADD THE CSS CODE.

Now that we have created space for the third column we need to define it in the template. This is done by adding code to the CSS part of the template. We want the new column to be exactly like the original sidebar on the right. We want it to be on the left og the posts column. So we add this code between <b:skin><![CDATA[ and ]]></b:skin> tags in the template :

#sidebar-wrapperL {
width: 220px;
float: $startSide;
background:#ffff00;
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 */
}

This is the same code as the original sidebar. To differentiate it we have added a 'L' after 'sidebar-wrapper'. It has the same width. Since we want it to be on the left of the posts column we have changed the float property to be '$startside'.

Since Blogger has enabled support for bidirectional languages the float:left and float:right have been replaced by $startSide and $endSide respectively.

Save template.

THIRD : ADD CODE IN THE PAGE BODY.

Lastly we need to add the code for the new sidebar in the <body> part of the template. Since it has to be the left of the posts column this code will come before it. Scroll down and paste this code :

<div id='sidebar-wrapperL'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='HTML6' locked='false' title='' type='HTML'/>
<b:widget id='HTML7' locked='false' title='' type='HTML'/>
</b:section>
</div>

immediately above this line in the template :

<div id='main-wrapper'>

I have added two Html widgets to the code as examples. Preview and save template. You can change the background color of the columns if you want to. This is the final result :

Enjoy!!

You can also make a Three column Classic Template.

Make Three Column Classic Template.

Bloggers who are on ftp are forced to use the Classic Template as Blogger does not provide Layout Templates to blogs outside Google servers. A reader wanted to add a third column to his blog hosted on ftp and hence this post. Readers with Layout Templates can refer to How to Add Third Column To Blog.

In this example I was able to transform the two column Minima Classic Template into a Three Column template in only three steps. See picture below :

Click on Image to enlarge it.................

INCREASE BLOG WIDTH

The first step is to increase the width of the blog so that it can accomodate the space for an extra column. To do this login at Blogger.com and click Template link on the Dashboard. The Edit Html subtab of Template tab will open.

BACKUP TEMPLATE FIRST :First copy all the code in the Template Code box and paste into a Notepad file. Save that file as ClassicTemplateBackup.txt.

You can see the various columns in your blog by giving them temporary borders. In the Classic Minima template this is what they look like :

Click on Picture to enlarge it.

To alter the code in the Template Code box scroll down to this code :

@media all {
#content {
width:660px;
margin:0 auto;
padding:0;
text-align:left;
}
.......

CHANGE ABOVE CODE TO :

@media all {
#content {
width:880px;
margin:0 auto;
padding:0;
text-align:left;
}
.......

Notice that the width has been increased to 880px. Now I can introduce a new column sized upto 220px. This is because the 'content' container contains the posts 'main' column and the sidebar column. This is how it looks after increasing the width :

DEFINE THIRD COLUMN IN CSS

The next step is to define the size and name of your third column in the CSS part of your template. In your Template code box add this code :

#sidebarL {
width:220px;
float:left;
}

immediately after the code for the 'content' box altered in the first step above.

ADD THIRD COLUMN IN BODY

To add the third column in the body scroll down in the template till you come to this line :



Immediately after the above line paste the following code :

<!-- Begin #sidebarL -->
<div id="sidebarL">
<p>Spacefiller Nonsense Text to Outline New Column</p>
</div>
<!-- End #sidebarL -->

Preview and Save Template. Clear Cache and View Blog. This is how it will look like :

If you want you can increase the width of the header by increasing the width in this code :

#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:#ff0000;
}

Use Preview to see what it looks like before saving.

The Rounders Three Column Template Mod.

Cool Blue Web 2.0 Fluid Template for Blogger.

Fluid Width Three Column Blog Template.

Many bloggers have been asking for a three column template. So I brushed up on my XML and XHTML and made a fluid width three column template.

A fluid width template is one which fits all screen resolutions without breaking. The columns expand and contract as the window is resized. You can test it out by going to The Fluid Width Three Column Blog and then type this in address bar of the browser without the quotes :

"javascript:top.resizeTo(800,600)"

and press ENTER on keyboard. The window will resize to 800 x 600 resolution without having a horizontal scrollbar at the bottom..........

You can see the full view of the blog below :

The widgets seen above are not loaded with the template. You have to add your own widgets after uploading this template. Remember to backup your widgets first before changing templates. After resizing it looks like this :

Download Link : Fluid Width Three Column Template. As you can see there is no horizontal scroll.

Right Click the above link and choose 'Save link as' and save it on your PC. Upload to your blog as shown in How to Change Template.

I have also included a Navigation Bar at the top where you can add links to your important posts. To do this login at Blogger.com and click on Layout on Dashboard. Then click Edit Html subtab of Template tab and scroll down to this code in the template :

<div id='Nav'> <a href='BLOG_URL'>Home</a> | <a href='LINK TO SUBSCRIBE POST'>Subscribe</a> | <a href='LINK LABEL 2'>Label 2</a> | <a href='LINK LABEL 3'>Label 3</a> | <a href='LINK LABEL 4'>Label 4</a> | <a href='LINK LABEL 5'>Label 5</a> | <a href='LINK LABEL 6'>Label 6</a> </div>

Change the code in red to the respective links to your posts. You will have to create and publish these posts first and then copy their links and paste them in the above code.

At the bottom of the template are links to 'About Us', 'Contact', Sitemap and Privacy Policy which you can modify in the template by scrolling further down to this code :

<div id='siteInfo'> <a href='LINK TO ABOUT US POST'>About Us</a> | <a href='LINK TO SITEMAP POST'>Site Map</a> | <a href='LINK TO PRIVACY POLICY POST'>Privacy Policy</a> | <a href='LINK TO CONTACT US POST'>Contact Us</a> | <a href='http://betabloggerfordummies.blogspot.com'>Blog Design</a> | 2007 Company Name </div>
<br/></div>

Change the parts in red in the same way as before. I know you will be gracious enough to leave the credit intact.

Another version of this template for those who do not want the stretch version looks like this :

The download link is Fluid Width Central template.

Search Engine Optimized Advantages

This template is optimized for the search engines as :

1. The posts column comes first and hence the search spiders first feed on the content.

2. NO JAVASCRIPT in the template making all the links in text and indexed by the search engines.

3. Follow further tips for SEO for blogs to further customize this template.

Launch a Minisite | Estore in Blogger.

A Minisite is a small/minimum site with one or only a few pages. It maybe a part of a bigger site or a standalone site by itself. It has a narrow subject focus and is used to target a product or a population segment commonly known as a niche.

A blog on the other hand is a site whose content is constantly updated. Here I have modified the blogger template so as to provide a static HTML frontpage which can also be used as an "Introduction" page for your blog. See the picture below :

Click on picture to enlarge it. I have used it to make a Minisite (Money From Blogs) to introduce this blog. You can also make a similar Minisite in Blogger to sell Ebooks, Audio/Video Feeds or any other niche product.

This method can also be used to make an Introductory page for your blog.

The advantage of making it in Blogger is freehosting and bandwidth and for slightly more you can get your own Domain name also with Blogger Custom Domains............

1. CREATE YOUR BLOG

The first step is to create a new blog. In Step 2 when creating your blog use keyword research techniques to use the appropriate name/url for your blog so that the search engines associate it with your product name. If the name is available try using the same name as your product. When choosing a template pick the Minima template. Make a Test/dummy post in the blog in the final step.

2. MODIFYING HEADER

First go to Template----->Edit Html and backup your template so that you can restart by loading this backup at any time if anything goes wrong. Then scroll down to below the <body> tag. You can delete the header as I have done or you can choose to keep the header and show it only on the post/inside pages. To delete the header simply delete this code and save template :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Simply Technorati (Header)' type='Header'/>
</b:section>
</div>

If you want the header to appear only on the inside pages put it inside conditional tags as described later on this page.

3. MODIFYING BLOG POSTS

The blog posts will appear only on the inside or post pages. Use conditional tags for this. Check the box at the top of the template box to Expand Widgets Template. Then scroll down to the Blog Posts code and add the lines in RED and save template :

<b:includable id='main' var='top'>
<b:if cond='data:blog.pageType == "item"'>

<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
<data:adEnd/>
</div></b:if>

Now the blog posts will be seen on the post pages only.

4. ADDING THE FRONT PAGE

The front page will be shown by a HTML widget in the blog posts column. A widget is the name given to the code of a Page element. To create more widgets in the blog posts column goto Template------>Edit Html and scroll down to the blog posts widget code :

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

Add "maxwidgets='3'" as shown above and also change the 'no' in red to 'yes' and save the template. Click on page elements subtab of Template tab above and in Layout view click on Add Page Element link above the Blog posts page element. Choose theHtml/Javascript option and in the popup window paste the Html code of your introduction page. You will have to prepare it beforehand in your favorite Html editor. Save Changes and Voila! you have the Introduction Page to your blog.

To show this widget only on the home page of your blog again use conditional tags. Go to template------->Edit Html and put a check in expand widgets template box at the top and scroll down to your widget code and add the lines in red and save template :

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/></b:if>
</b:includable>
</b:widget>

Now this page will be shown only on the home page of your blog. You can put your one page code in this to make up your Minisite as in Money From Blogs.

5. SIDEBAR WIDGETS IN POST PAGES

Similarly put all your sidebar widgets in conditional tags to show them only on the post pages. Follow the same technique used for blog posts. Add this line :

<b:if cond='data:blog.pageType == "item"'>

after the main includable line in each widget and then add a <.b:if> tag before the closing line of the includable. Now your sidebar widgets will only be seen on the post pages.

6. CSS NAVIGATION TABS

You have to put CSS Navigation tabs at the top as there is no other system to allow access to the post pages. For this get the code and graphics from exploding boy. Upload the graphics to a freehost and put the code in CSS part of your template :

/*- Menu Tabs E--------------------------- */

#tabsE {
float:left;
width:100%;
background:#000;
font-size:93%;
line-height:normal;

}
#tabsE ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
float:left;
background:url("http://betabloggerfordummies.googlepages.com/tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
float:left;
display:block;
background:url("http://betabloggerfordummies.googlepages.com/tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}

Paste the above code just above the bskin tag below :

]]></b:skin>

Also Paste this code in the outer-wrapper :

<div id='tabsE'>
<ul>
<li><a href='HOME LINK' title='Home'><span>Home</span></a></li>
<li><a href='PAGE1 LINK' title='aStore'><span>aStore</span></a></li>
<li><a href='TEST POST LINK' title='Test Post'><span>Test Post</span></a></li>
<li><a href='CONTACT PAGE LINK' title='Contact'><span>Contact</span></a></li>
<li><a href='#' title='Link 6'><span>Link 6</span></a></li>
<li><a href='#' title='Link 7'><span>Link 7</span></a></li>
</ul>
</div>

Save Template after putting your own links in the above code.

7. FEED LINKS & NAVBAR

There is a Subscribe to Posts Atom link at the bottom of each post. To remove it see the third blockquote from the top in What is Subscribe to Posts Atom. The Blogger Navbar issues are discussed here. To remove the Older Posts/Newer Posts/ Home link see how to Customize the post footer.

8. SETTINGS

Settings of your Minisite/aStore blog should be set as follows :

Settings----->Basic

Add Title and Description for the search engines.

Add Blog to Listings----->Yes

Show Quick Editing on yourblog?------>No

Show emailpost links ?------->No

Settings----->Publishing

Send Pings----->Yes

Settings------>Formatting

Show Title Field----->Yes

Show Link Field------>No

Settings---->Comments

Comments-----?Show/Hide

Settings------>Archiving

Enable Post Pages------>Yes

Archive Frequency----->Any

Settings------>Site Feed

Set all feeds to Full

Settings------->Permissions

Blog Readers----->Who can view this blog------>Anybody

Template----->Page Elements----->Click edit link in Blog Posts widget.

Uncheck Date, Posted By, at Time, Comments, Labels, Show Quickediting, Show Email Post Links

Save Changes

9. aSTORE IN BLOG

You can put an Amazon aStore in any of the post pages. Just get the code from Amazon.com and paste it in Edit Html tab of your post editor. See my Beta Blogger For Dummies aStore See Picture below

You can put a different aStore on each page of your blog (complete with shopping carts) from different sites like Amazon CafePress etc.. and convert your Minisite into a complete Minimall. You can even put up your Advertisements up on the 'walls' of your Minimall and earn from them!!

10. YOUR OWN DOMAIN NAME

The last step is getting your own Domain name and shifting to Blogger Custom Domains. This will remove the "blogspot.com" from your URL and get your own "MyMinisite.com" name. Now people will never recognize that they are on a blog. The advantages are free hosting, free bandwidth, free space, all security and other problems handled by Blogger as well as much quicker indexing and crawling by the search engines due to the blog nature of your site.