Monkeying with the code

Plopping down an AdSense ad right in the middle of a blog post — rather
than between posts — is a little more involved than just adding it using the
widget feature, but it can be done. The result is an ad that floats off the left
side of the post, above the fold.
I may as well come right out and say it: Getting an ad to float off to the side
of your blog post requires that you monkey-around with the HTML template
of your blog. Sounds a bit dicey, I know, and if you’re not careful, you could
really mess up your blog, but I’m here to show you the way.
Before you make any changes at all to your blog, save a copy of the template
to your hard drive, in case you mess up royally. I messed up the first time I
tried to put the code into my blog. Fortunately, I had saved the template, so all
I had to do was upload it and nothing was lost.
To save your template to your hard drive, follow these instructions:
1. Log in to your Blogger account and go to the Layout tab.
2. Click the Edit HTML link below the tab,
The Edit HTML screen appears.
3. In the Edit HTML screen, click the Download Full Template link.
A Save As dialog box appears.
4. Using the Save As dialog box, save the template to a place on your
hard drive where you can find it.
After you’ve saved the file to your hard drive, you can play around with the
template without fear of irreparably damaging your hard drive. Time to get
elbow deep in HTML!
The HTML page that’s displayed when you click the Edit HTML link is everything
that makes up your blog. It’s a monster document that could keep you
busy for hours if you don’t know what you’re looking for. Don’t worry though;
I know what’s what. Follow me and you won’t lose your way.
1. Go to AdSense and generate the code for the ad unit you want to place
in your posts.
For the purposes of this illustration, I use the 125x125 square format.
By the way, Chapter 5 gives you all the gory details on generating code.
2. Open NotePad (or any other text editor) and paste this code into a
new document:
div style=’float:left;’>
AdSense Code
/div>
3. Copy the code generated by AdSense and paste it into the document
in place of AdSense Code.
Replace those two words completely. When you’re finished, the complete
piece of code looks something like this:
div style=’float:left;’>
script type=”text/javascript”>!--
google_ad_client = “pub-00000000000000”;
/* 125x125, created 2/25/08 */
google_ad_slot = “000095560”;
google_ad_width = 125;
google_ad_height = 125;
//-->
/script>
script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_
ads.js”>
/script>
/div>
Your code won’t look exactly like that, but it should be very similar. In
particular, some of the numbers will be different, and the design of the
ad may also be different.
4. Open a Web browser, surf over to your Blogger account, and log in.
This should be second nature by now.
5. Go to the Layout tab and then click the Edit HTML link below the tab.
The Edit HTML screen makes an appearance.
6. In the Edit HTML view of your blog, search for the following line of
code with the search function on your browser:
div class=’post-header-line-1’/>
You could scroll through pages and pages of HTML code to find what
you need, but here’s an easier way. In Firefox and Internet Explorer
browsers, press Ctrl+F to open a search box on your browser. When it
appears, search for the line of code above.
7. When you find your little snippet of code, go back to your text editor,
copy the code that you put together, and then paste that code immediately
below the line you located.
When you’re finished, your code looks like this:
div class=’post-header-line-1’/>
div style=’float:left;’>
script type=”text/javascript”>!--
google_ad_client = “pub-6630304584312230”;
/* 125x125, created 2/25/08 */
google_ad_slot = “9092795560”;
google_ad_width = 125;
google_ad_height = 125;
//-->
/script>
script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_
ads.js”>
/script>
/div>
div class=’post-body entry-content’>
Notice in this code that the first and last lines are exactly what you
see in your template. That’s because those two lines were pre-existing.
Everything in between is what you’ve pasted from your text editor.
8. Before you save the template, click the blue Preview button.
This opens a new window that displays the results of the changes you
made to the template.
9. After you preview the results of your cut-and-paste job and you’re
satisfied with the results, click the Save Template button to make the
changes to your blog permanent.
With the code in the previous steps list, you’re adding AdSense to all the
posts that are displayed on your main page. The only problems that you
might encounter are if you have more than two or three posts displayed on
the page, or if you have multiple ad units displayed in different places on
your site. AdSense allows only three ad units to be displayed on any one
page, so if your configuration puts you over that golden number, some of the
ads won’t display properly.
For example, if you have an AdSense widget in your sidebar and at the top
of the page, when you use this method to add AdSense to your posts, some
posts will have blank spaces where the ads should be. To combat this blank
space, either remove AdSense widgets or reduce the number of posts that
you show on the main page of your blog.