The Blogger Guide: February 2009

Thursday, February 26, 2009

3 Column Templates : Rounders 3 : Left and Right Sidebars

Article Series: 3 Column Templates Step by Step Guides

The Rounder 3 template that comes by default with Blogger has only two columns. However, in the blogosphere, there is tremendous demand for three column templates. If you are one of such bloggers, this tutorial will give you the steps to modify a default 2 column Rounders 3 template in to three columns with left and right sidebars.

(For the more curious readers, the article series Three Column Templates Explained covers the behind the scene details.)

This guide is specific for Rounder 3. For other Rounders templates, check the article series home. Also note that this guide will only work for a new sidebar of 240 pixels wide. This is due to the required background images provided in this tutorial are being set to that size. If you need specific conversions, please contact me.

1) Define a new CSS id selector for the second sidebar.

Switch to Layout -> Edit HTML
Find the #sidebar-wrap selector
Copy that full section and paste below the existing sidebar section (it doesn't have to below) and rename it to #left-sidebar-wrap
Change the float to $startSide of the #left-sidebar-wrap selector (See the code snippet below)

#sidebar-wrap {
width:240px;
float:$endSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long ... IE */
overflow: hidden; /* fix for ... float */
}

#left-sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long ... IE */
overflow: hidden; /* fix for long non-text ... float */
}

2) Add a new div element, which will be the placeholder for the second sidebar

Locate the <div id='main-wrap1'> element.
Copy the code shown in red, above that section (this has to be above)

3) Expand the width of the parent wrappers to accommodate the newly added sidebar

Find the CSS section called #outer-wrapper
Modify its width property to 980 pixels

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

4) Adjustment the required margins, padding etc

Locate the #left-sidebar-wrap section
Insert a right margin of 7 pixels. Don't remove the existing 15px. This padding is in addition to that.

#left-sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 7px 0 0;
...
}

5) Add the required CSS selectors for the new sidebar.

Locate the #sidebar h2 selector
Copy the code shown below, after that selector.

#sidebar h2 {
color: #aabbcc;
border-bottom: 1px dotted #aabbcc;
}

#left-sidebartop h2 {
line-height:1.5em;
color:#ffffff;
border-bottom: 1px dotted #ffffff;
font: normal bold 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
margin-bottom: 0.5em;
}

#left-sidebartop a {
color: #ffffff;
}

#left-sidebartop a:hover {
color: #ffffff;
}

#left-sidebartop a:visited {
color: #ffffff;
}

#left-sidebar a {
color: #99ddbb;
}

#left-sidebar a:hover,
#left-sidebar a:visited {
color: #ffffff;
}

#left-sidebar h2 {
color: #aabbcc;
border-bottom: 1px dotted #aabbcc;
}

/* Footer
----------------------------------------------- */
#footer-wrap1 {
clear:both;
margin:0 0 10px;
padding:15px 0 0;
}

6) Replace the existing background images with the expanded one as shown below.
All the Rounders templates use images for the rounded header and footer. We need to expand these images to accommodate the new sidebar.

Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
Locate the following CSS selectors.
Replace the URLs of the images with the ones shown in red below.

#header-wrapper {
background: url("$imageHost/rounders3_corners_cap_top_w.gif") no-repeat $startSide top;
...
}

#header {
background:url("$imageHost/rounders3_corners_cap_bot_w.gif") no-repeat $startSide bottom;
...
}

#footer-wrap2 {
background:$titleBgColor url("$imageHost/rounders3_corners_cap_top_w.gif") no-repeat $startSide top;
color:$titleTextColor;
}

#footer {
background:url("$imageHost/rounders3_corners_cap_bot_w.gif") no-repeat $startSide bottom;
padding:8px 15px;
}

7) Modify the CSS rules for the wire frame layouts editor.

Locate the section that starts with "/** Page structure tweaks for layout editor wireframe */"
Replace that entire section with the following code.

/** Page structure tweaks for layout editor wireframe */

body#layout #header-wrapper,
body#layout #outer-wrapper,
body#layout #footer-wrap1 {
width:830px;
}

body#layout #main-wrap1 {
width: 485px;
margin-right:10px;
}

body#layout #sidebar-wrap,
body#layout #left-sidebar-wrap {
width:150px;
}

]]></b:skin>

Save the template. Switch to Page Elements view and enjoy your 3 column template! (The new sidebar might not be visible until you add some gadgets to it)

Note: You are free to use the images provided by me. But if you change your template according to this tutorial and use those images, please add the following code shown in red, right to the end of your template, in the place shown. It will simply link to this blog.

</div>

<a href="http://www.bloggerguide.lk/2008/02/3-columns-step-by-step-guides.html">Three Column Modification</a> courtesy of <a href="http://www.bloggerguide.lk">The Blogger Guide</a>

</body>
</html>

Wider Header for Dots Template

The Dots (or the Dots Dark) template, which is a default Blogger template, has its Header widget inside the left sidebar. Since the Header widget carries the title and the sub title (or description) of a Blogger blog, this arrangement brings about a somewhat congested appearance. This tutorial will illustrate how this Header widget can be moved to the more usual, across-the-top placement.

First let’s take a look at the Before and After views of what we are going to do.

Before:

After:

As you can see, the After view has the blog title running across the blog, instead of being stuck at the left sidebar.

(Note: Please backup your template before trying out this modification)

Go to the Layout -> Edit HTML mode and first make sure that the ‘Expand Widget Templates’ option is NOT selected. Then apply the following steps.

1) Delete the background property in the #outer-wrapper CSS selector.

#outer-wrapper {
~~background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat 250px 50px;~~
…
}

2) Delete the existing line “display:none;” in the #header-wrapper and add the following rules.

#header-wrapper {
background:url("http://www.blogblog.com/dots/bg_3dots.gif") no-repeat bottom right;
width:700px;
height:90px;
margin:0 auto 10px;
}

For the Dark Dots template, change the URL as follows.

background:url("http://www.blogblog.com/dots_dark/bg_3dots.gif") no-repeat bottom right;

3) Change the first padding value in the #main-wrapper to 10 px from 100 px

#main-wrapper {
width:450px;
float:$endSide;
padding:10px 0 20px;
…
}

4) Change the first padding value of #sidebar to 10 px from 40 px

#sidebar {
...
padding:10px 10px 15px;
…
}

5) Delete the existing <b:section> element for the header contained inside the sidebar-wrapper.

6) Copy the code shown below in red, in between the outer-wrapper and the crosscol-wrapper, to get the new header. (You will have to re-type your blog title after copying this code)

Save your template and now you should have your header going across the top of your blog.

Centering the Dots Header

Friday, February 20, 2009

3 Column Templates : Rounders 4 : Left and Right Sidebars

Article Series: 3 Column Templates Step by Step Guides

This tutorial will provide the steps to modify a Blogger default 2 column Rounders 4 template in to a three column template. This modification will add a new sidebar to the left side of the main post column.

(If you really want to know the under the hood details of what's happening here, read the article series Three Column Templates Explained.)

This guide is specific for Rounder 4. For other Rounders templates, see the article series home. Also note that this guide will only work for a new sidebar of 240 pixels wide. That's because the required background images provided in this tutorial are set to that size. If you need custom sizes, please contact me.

1) First we need to add a new CSS id selector for the new sidebar wrapper.

Go to Layout -> Edit HTML
Locate the #sidebar-wrap selector (Do a Find using your browser)
Copy that full section and paste below the existing sidebar section (it doesn't have to below) and rename it to #left-sidebar-wrap
Change the float: $endSide to float:$startSide of the #left-sidebar-wrap selector (See the code snippet below)

2) Now we introduce a new div element, which will be the placeholder for the second sidebar

Locate the <div id='main-wrap1'> element.
Copy the code shown in red, above that section (this has to be above)

3) Next step is to increase the width of the parent wrappers so that the new sidebar fits in them

Locate the CSS section called #outer-wrapper
Change its width property to 980 pixels

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

4) We also need to do some adjustments to margins, padding etc

Locate the #left-sidebar-wrap section
Insert a right margin of 7 pixels. Don't remove the existing 15px. This padding is in addition to that.

#left-sidebar-wrap {
width:240px;
float:$startSide;
margin:15px 7px 0 0;
...
}

5) Add the required CSS selectors for the new sidebar.

Locate the #sidebar h2 selector
Copy the code shown below, after that selector.

6) Then we have to apply the expanded background images as necessary.

All the Rounders templates use images for the rounded header and footer. We need to expand these images to accommodate the new sidebar.

Add a template variable to define the image host location as explained here. (This step will open up in a separate window. Return to the next bullet point after that)
Locate the following CSS selectors.
Replace the URLs of the images with the ones shown in red below.

#header-wrapper {
background: url("$imageHost/rounders4_corners_cap_top_w.gif") no-repeat $startSide top;
...
}

#header {
background:url("$imageHost/rounders4_bg_hdr_bot_w.jpg") no-repeat $startSide bottom;
...
}

#footer-wrap2 {
background:$titleBgColor url("$imageHost/rounders4_corners_cap_top_w.gif") no-repeat $startSide top;
color:$titleTextColor;
}

#footer {
background:url("$imageHost/rounders4_corners_cap_bot_w.gif") no-repeat $startSide bottom;
padding:8px 15px;
}

7) Finally, modify the CSS rules for the wire frame layouts editor.

Locate the section that starts with "/** Page structure tweaks for layout editor wireframe */"
Replace that entire section with the following code.

Blogger Three Column Templates Explained

Friday, February 13, 2009

Happy Birthday Blogger Guide!

Today marks the first birthday of The Blogger Guide! It’s been one full year since the very first article, titled Understanding Blogger Templates, was posted here. What a year it has been!

This post is the 80th on TBG and, looking back, it has been quite an effort to write that much in the space of a single year. I’ve written extensively about the under the hood details of Blogger templates , many popular tutorials on how to convert default Blogger templates in to three columns and how to make them wider and also a lot of tips on template customizations. Since of late, TBG touched on the topic of blog monetization as well.

Over the past year, TBG had nearly 27,000 thousand visitors and over 55,000 page views. The subscriber base, through both Feed Burner and Blogger Followers, has gone over fifty. During this time, I’ve helped thousands of Blogger users at many forums such as the Blogger Help Group and also have solved problems of numerous readers who reached me via email. And what’s more, in a single year, TBG has achieved a Google Page Rank of 3!

Thank you all the readers out there for all the suggestions, comments and feedback given to bring TBG to this level. TBG will continue to provide the articles, tutorials, howtos etc that you’ve valued so much, whilst keeping with its moto of empowering Blogger users with simple and clear guides with illustrations.

Sunday, February 8, 2009

AdSense Tips

Google AdSense is the dominant provider of contextual advertising services. If you are also using AdSense as a means of monetizing your blog, this article will provide you a set of tips for maximizing your revenue.

Eye Catching Positions
A typical visitor to a web page scans its content in what’s called an F-shaped pattern. According to an eye-tracking study conducted by the Nielsen Norman Group, the dominant scanning pattern of readers consists of a starting horizontal scan at the top of the page, followed by a shorter horizontal scan slightly below the first scan and finally a vertical scan along the left edge of the page. These three scans form a general F shape pattern.

This is an important advice given by many web design gurus when it comes to deciding the layout of a site. Web designers are generally advised to place their important content to fall in this field of view. The same tip is useful for ad placement, a fact also confirmed by the heat map published by AdSense Help.

According to that map, ads placed below an article also performs well because readers generally look for where to go next?. The study referenced above says that this behavior forms an E-shaped scanning pattern, which is also common.

Complementing Ad Design
Ads that complement the color theme of your blog tend to perform better than those that contrast. Even though this AdSense Help article explains three forms of color schemes, namely Blend, Complement and Contrast, ads that contrast don’t perform that well. This fact is confirmed by an optimization tip published on the AdSense blog and also a guest post by pro blogger Darren Rowse on the same blog.

Find the Right Size
Ad size also plays a crucial role in catching the readers’ eyes and also in attracting better ads. Generally, bigger ads perform better. However, too big is also bad. According to Darren, the Medium Rectangle size (300 x 250) tends to perform better than the Large Rectangle. This is due to the fact that more advertisers tend to prefer the Medium Rectangle because of its wide use.

The AdSense blog, too, recommends the Medium Rectangle along with the Leaderboard (728 x 90) and Skyscraper (160 x 600) formats.

Number of Ads
This is another useful advice by the blogging guru Darren. General belief is that higher the number of ads, higher the chances of readers clicking on them. But too much ads can drive away the readers.

Use of different ad formats such as Link Units, Image and Video ads, and using Google Analytics to find out which content generates the most revenue are the other tips offered by Darren. Last, but not least, experimenting with different ad sizes, color schemes and positions etc is the best way to find out which ads works well on your blog/site, says Darren.

3 Columns : Harbor : Left and Right Sidebars

Article Series: 3 Column Step by Step Guides

Here are the steps to convert a default 2 column Harbor template in to a three column template with two sidebars on left and right hand sides of the main post area.

(If you really want to understand what's happening here, read the article series Three Column Templates Explained.)

1) Add a new CSS id selector for the 2nd sidebar wrapper.

Go to Layout -> Edit HTML
Locate the #sidebar-wrapper section (Do a Find using your browser)
Copy that full section and paste below the existing sidebar section (it doesn't have to be below) and rename it to #right-sidebar-wrapper
Change the float:$startSide to float:$endSide of this newly copied section (See the code snippet below)
Set the width of both sidebar selectors to 24%

#sidebar-wrapper {
width:24%;
float:$startSide;
word-wrap: break-word; /* fix ... IE */
overflow: hidden; /* fix ... float */
}

#right-sidebar-wrapper {
width:24%;
float:$endSide;
word-wrap: break-word; /* fix ... in IE */
overflow: hidden; /* fix ... float */
}

2) Introduce a new div element to be the placeholder for the 2nd sidebar

Locate the <div id='main-wrapper'> element.
Copy the code shown in red, above that section (this has to be above)

3) Adjust the width of the other wrappers to accommodate the new sidebar

Locate the CSS section called #outer-wrapper and change its max-width property to 1175 pixels
Locate the #main-wrapper section and change its width property to 48%

#outer-wrapper {
max-width: 1175px;
...
}

#main-wrapper {
width: 48%;
...
}

4) Do necessary adjustments to margins, padding etc

Locate the #main-wrapper section
Insert a right margin of 20 pixels.

#main-wrapper {
width: 48%;
margin-right:20px;
float: $endSide;
...
}

5) Adjust the max width of the header description to fit the new expanded header

Locate the .Header .description section
Change the max-width property to 1000 pixels.

.Header .description {
...
max-width:1000px;
...
}

6) Modify the CSS rules for the wire frame layouts editor.

Locate the line reading as "/** Page structure tweaks for layout editor wireframe */"
Replace that section with the code shown in red below.

/** Page structure tweaks for layout editor wireframe */

body#layout #outer-wrapper,
body#layout #sidebar,
body#layout #wrap4,
body#layout #header {
margin-top: 0;
margin-bottom: 0;
padding: 0;
}

body#layout #sidebar-wrapper,
body#layout #right-sidebar-wrapper {
width: 180px;
margin-$startSide: 0;
}

body#layout #wrap4, body#layout #outer-wrapper {
width: 800px;
}

/* Header
----------------------------------------------- */

Save the template. Switch to Page Elements view and move some of the widgets to the new sidebar on the right. (Without adding widgets, the new sidebar won't be visible on the blog).

Three Column Templates Explained

The Blogger Guide

Thursday, February 26, 2009

3 Column Templates : Rounders 3 : Left and Right Sidebars

Tuesday, February 24, 2009

Wider Header for Dots Template

Friday, February 20, 2009

3 Column Templates : Rounders 4 : Left and Right Sidebars

Friday, February 13, 2009

Happy Birthday Blogger Guide!

Sunday, February 8, 2009

AdSense Tips

Wednesday, February 4, 2009

3 Columns : Harbor : Left and Right Sidebars

Support The Blogger Guide

Favorites

Best Articles

Blog Archive

Contact Me

Subscribe

Followers

About Me

Sponsored Links

Visitor Locations