Inline Ads Blogger Template

UPDATE: 4/24/2010

At this time I strongly recommend that you avoid use Blogger blogs for any internet marketing purposes. It seems that Google has changed the rules and even totally legitimate blogs with good content are being flagged as spam and are being taken down and deleted.

I’ve been doing some work with Blogger blogs recent and I’ve developed two templates, based on the popular Minima template, that will allow you to show Adsense or affiliate ads in-line on the left side as seen in this example layout.

As you might expect, this template is ugly. It is designed intentionally that way to emphasize the advertising block while de-emphasizing the content. Your content must still be of reasonable quality in order to pass a visual inspection, of course, but it doesn’t have to be deep and meaningful. Think World Weekly News rather than National Geographic.

For this template I have both a White and Black version. I went with a Courier font because it’s hard to read while giving a dull newspaper feel to the page on the white template and an ugly techno-retro feel with the black. I removed other widgets except for the archive widget which I moved to the footer. If you use Adsense you will also want to add a privacy policy statement down here as well. I gave it this one column look to reduce the chance for visitor distraction from the single ad prominently displayed on the page.

Setting It Up

There is a little trick you have to use in order to set this template up due to some limitations within the Blogger template design interface. Basically, you have to create a sidebar widget and move it into the main blog post area.

Our first step is to create your advertising widget on the sidebar. You would do this in the regular way on the Page Elements tab. If you have any questions on this part, let me know in a comment.

Next, we have to move your sidebar widget to the main content area. To do this, go to the Edit HTML tab. You’ll see the code for the template (don’t let it scare you, it’s just code!). Look for the section I added that says “Your Ad Here”. It’s near the bottom. Here’s what it looks like:

<div id='main-wrapper'>
<div class='inlineadblock'>
  <p>Your Ad Here</p>
</div>
<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=’HTML1′ locked=’false’ title=” type=’HTML’/>
 </b:section>
</div>

Now we will want to copy the HTML1 sidebar section up to the inline ad block area where the “Your Ad Here” paragraph is located, like so:

<div id='main-wrapper'>
<div class='inlineadblock'>
   <b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
<b:widget id=’HTML1′ locked=’false’ title=” type=’HTML’/>
</b:section>
</div>
<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’>
</div>

Now the template should be ready to run once you click save. Make sure that you don’t get any errors here. You shouldn’t if you copied everything correctly. Now view your blog and make sure it’s what you want. 

Note that you can’t make any changes to the page element after you move it to the ‘inlineadblock’ area. That’s a limitation of the Blogger page element editor. To edit a page element, reverse the procedure above, save the HTML template, then go to the Page Elements tab and make your changes, then repeat the steps above to move the edited element back into the inline block position.

If you want to make so changes to the width and height of the block, look for the inlineadblock style section. Just change the appropriate parameters as you wish. The example below is from the white background template:

.inlineadblock
{
    width: 400px;
    height: 400px;
    float: left;
    display: inline;
    background-color: #ffffff;
    padding-right: 0px;
    padding-left: 0px;
    margin-bottom: 5px;
    padding-bottom: 0px;
    margin-right: 5px;
    padding-top: 0px;
}

Download White and Black Inline Ads Blogger Templates

If you have any questions about these Blogger templates please feel free to ask.

Blogging
Blogger Template, Inline Ads, minima