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.

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.

Related Posts

• Color Elements of AdSense Ad Units
• HOWTO: Find the RGB Values of a Color
• Customizing AdSense Ad Units
• Standard Ad Units

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)
  

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

<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>
</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>

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

Related Posts

• Three Column Templates Explained