3-column templates for new Blogger

I got a specific request from a blogger asking whether 3-column templates are possible with Blogger Beta. If you have a lot of items in your sidebar, you would naturally want 3 columns like him so that you can balance your items across 2 sidebars. I found that it is in fact easier to convert Beta templates to 3 columns than older templates. This is because the condensed form of template shown by Beta is easier to work with. In addition, once you add another sidebar, you can move page elements between the two sidebars easily using the Layout editor.

If you need a 3-column template for a new blog or just want to try 3-columns with a test blog, you can right-click, save one of these templates and upload it to Blogger. If you want to use these with your active blog, please note that it doesn't have all your widgets. So, you will have to add them again.

3-column Minima



3-column Denim



3-column Dotsdark



If you already have a functional Beta blog with some other template, here are the steps that you could use to convert your template to 3-columns.

Disclaimer 1: I am assuming that you have already played with CSS a bit.
Disclaimer 2: You may need to do additional adjustments in CSS like adjusting width, margin etc if one of the sidebars is pushed downwards. This instruction is just to highlight the general method of converting to 3-columns. As I don't have much free time nowadays, I may not be able to help you there.

1. Beta template has 3 CSS wrapper definitions as follows:
#outer-wrapper - This defines the entire blog
#main-wrapper - This defines the main column
#sidebar-wrapper - This defines the sidebar.

Now, to insert a new column, we need to define a new wrapper, say #newsidebar-wrapper. Find the definition of #sidebar-wrapper, copy/paste and rename it to create this new wrapper.

2. These wrappers might have different widths depending on your template. We need to fix the widths of these 4 wrappers so that they appear as expected. I suggest setting the width of outer-wrapper as 750px, main-wrapper as 400px and each sidebar-wrapper as 150px (750 > 400+150+150).

3. We should also set the float property of these wrappers appropriately. i.e. if sidebar-wrapper was set as float:right, we should set the newsidebar-wrapper as float:left and vice versa (unless you want both of them on one side). Also, setting the left or right margin of main-wrapper ensures there's space between the new sidebar and the main column.

Summarizing, here is an example of settings:

#outer-wrapper {
width: 750px;
...
}
#main-wrapper {
width: 400px;
margin-left: 20px;
...
}
#sidebar-wrapper {
width: 150px;
float: right;
...
}
#newsidebar-wrapper {
width: 150px;
float: left;
...
}

In the definitions above, ... refers to all other properties within the wrapper.

4. Now that our CSS is ready, let's get to the changes needed in the body of the template. Find the div sections with main-wrapper and sidebar-wrapper and add the code in red either above or below the main-wrapper (i.e. if sidebar-wrapper is below, newsidebar-wrapper goes above and vice versa).


div id='newsidebar-wrapper'>
b:section class='sidebar' id='newsidebar' preferred='yes'>
b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
/b:section>
/div>

div id="newsidebar-wrapper">
b:section class="sidebar" id="newsidebar" preferred="yes">
b:widget id="NewProfile" locked="false" title="About Me" type="Profile">
/b:widget>
/b:section>

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

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

(After Copying ADD "<" before code)for close code

If you now goto Template->Page Elements, you will see two sidebars. You could move elements between them and add new elements too. Have fun :)

The Importance of Blog Design

Blogs have increased popularity over this past months. Many people have started to create their personal blogs to express their thoughts and feelings. Internet companies have also started their blogs to inform consumers on the latest product news and reviews.

Because of this, blogs are also being used as internet marketing media. Before, internet marketing is done by placing banners and links on popular websites, such as news and information sites. Links were also included on newsletters and marketing letters sent to the members of their mailing lists.

Many people spend time reading blogs. People read their friend's blogs, their favorite author's blogs, blogs on topics that they are interested in, and blogs on product reviews. With the increasing popularity of blogging, it is even feared that people rely on blogs to get the latest news.

While getting news reports from blogs isn't reliable, some people look for product reviews through blogs. In some cases, this is more dependable. While it is true that some media persons are being paid to write good reviews about a certain product, blog writers write about their actual experiences on products and services from a company.

Since there are many people who read and start their own blogs, blogs are a good medium to market a product. With the increasing blog traffic means increase in product sales.

Blog traffic can be increased by joining affiliate programs and sites, which will list your blog under a certain search category or name. You can also have your blog advertised in popular websites. This, however, will cost some money and is not advisable if you have just started blogging.

A writer who has just launched his/her blog will want as much traffic as possible to increase advertisements on the site. Also, some advertisers pay every time their link is clicked or the page that has their link is viewed.

When you have increased traffic on your blog, you should try to keep you visitors coming back and recommending your blog to friends and colleagues.

This can be done by having informative or amusing content and good blog layout and design. You may develop your blog's content or you can also acquire the services of a web content writer to provide you with the blog articles.

The blog's layout and design also plays a big role. While most of the companies offering free blog hosting offer pre-selected templates, there are also some that allows customization that if you utilize this feature correctly can increase your blog's traffic.

Here are a few tips to make your blog stand out from the millions of blogs out there that have standard designs.

* Customize the banner

The banner usually has the most generic designs that are common to the blogs from a blogging company or service.

You can personalize this banner by having a graphic with the dimensions of the banner. You can also edit the graphic so that it will also include the title of your blog.

In this case, you can create your own graphic or you can purchase professional looking graphics online for less than $10.

* Personalizing photos

Of course, most of the photos that you will be posting will be your own. However, if you don't customize the photos before posting them, you may miss maximizing the enhancing benefits graphics can add to the page. Adding photo borders can help the photo stand out from the page.

It can also add to the design of your blog. You can choose a standard border or you can also create your own border which can be associated with your blog's templates.

* Add a favicon

Don't you think sites with icons on the address bar before the website's URL are cool? Many people do. These favicons add a professional look to the URL. These easy to do using photo or graphic editing softwares.

* Check out blog templates, layouts, backgrounds, textures and skins from sites

There are sites that offer free blog templates, layouts, backgrounds, textures and skins. You can make use of these so your blog will not look generic like most of the blogs hosted by the service provider.

* Include RSS feeds

This is a cool way to inform people with newsreaders about your blog headlines. Tutorials on RSS feeds are available on the internet.

* Audio makes your blog more personal

Not only does audio personalizes the blog; it can also keep your visitors coming back. You can try having streaming radio stations, mp3 file or playlists loading with your blog.

* Advertisements

If you have signed-up with Google Ad-Sense, which I am sure you would like to do, make sure that the ads are conveniently placed that these will not hinder your readers' ease in accessing the information on your blog.

Try using these tips and you can definitely increase and retain traffic on your blog.