Understanding the importance on flexibility in Adsense placement

Adsense placement in Blogspot in general is relatively easy and straightforward, but the concern is Adsense ads only allow you to place them at the sidebar section or top/bottom section of the post. Placement of ads are needed to be highly optimized in order to achieve best result and of course good source of income. From all the researches I have done, I figure out that you need to blend your ads well into your contents, and it also means that the ad cannot look like an ad. Neither placing Adsense Ads above/below the post is going to tell people “Hey, I’m not an advertisment. Don’t shy away from me”, or placing at the sidebar will help.

Example: Absense Ads above the post

Overcoming the barrier

Step 1. Save your precious template
Before attempting to change the coding, please save your template.

Step 2. Copy and paste on your trusty notepad
Copy and paste your Adsense Code (Customized for your template) onto the notepad.

Step 3. Use replace all function
Now replace all the < to <lt and > to >gt using the replace function (Ctrl+H).

Replace All function

Step 4. Create a #post-left class in CSS
Back to Blogger, go to Template > Edit HTML and make sure to check the box next to Expand widget templates. Under the ‘Posts’ classes, you need to add the new CSS class and name it according to where your Adsense Ads will be placed (either left or right). In this example, I used #post-left, floated the ads on the left and gave it a right margin of 5px. The margin is to allow spacing between the the ads and the posting. If you float your Adsense ads on the right, you need to change the margin to margin-left: 5px;

/* Posts
———————————————– */
#post-left {
float: left;
margin-right: 5px;
}

Step 5. Insert the newly-created class into the post
To insert the adsense into your post, you need to find and change the code accordingly to the below image. Copy your Adsense Code (Step 3) and paste it after “”.

id=’post-left’ is referring to the CSS code created (Step 4)

Step 6. You are done!

This is what you see after editing the code. Happy tweaking!

Related posts:

1. Classic Blogger Template vs New Blogger Template
2. How to insert Bookmarking links at the bottom of each Blogger’s post?
3. How to hide or remove the Blogger navbar?
4. Make yourself disappear in MSN