There are numerous tutorials and tips on increasing revenue on AdSense by using different ad placement techniques and practices, many of them work great, but Ads in the main body content is one of the most vital place.
Ads placed in post body can make a significant difference in the revenue but you have to do it wisely, it is where the main focus of a site's visitor is for most of the time during their visit so it is important to make sure the experience is not obstructed for the visitor due to the ads.
In this tutorial you will learn a simple way to add AdSense ad in your post and have it display in a good manner that is by floating the ad to a direction and have the paragraphs wrap around it.
If you are not sure where to add this CSS code please check the guide on adding CSS to a Blogger blog
Copy the following code and have it saved in your favorite text editor so you can use it in the next steps easily.
The HTML markup is simple, just put your AdSense code between the first and the last line i.e where
You need to know a small thing if you want to have the ad centered to floated to the right as by default it floats to the left. Check the following line of codes trimmed from the HTML markup provided above.
Once you have this markup ready with your AdSense Ad code you may proceed to the new steps that guides you through adding it to the post through post editor.
To put it into your post click on the "HTML" button when you are in the post editor
Ads placed in post body can make a significant difference in the revenue but you have to do it wisely, it is where the main focus of a site's visitor is for most of the time during their visit so it is important to make sure the experience is not obstructed for the visitor due to the ads.
In this tutorial you will learn a simple way to add AdSense ad in your post and have it display in a good manner that is by floating the ad to a direction and have the paragraphs wrap around it.
Set Things Up
You can simply paste an Ad code in the post editor and the ads will appear but that isn't always what you need. How about floating it to the left or the right so the text wraps around it? We are going to learn just that by using simple markup and CSS so you can selectively add the Ads to any post at the best position you like.Add The CSS Styles
We will get onto the main part where you have to work with the ad codes later before that let's set a few lines of CSS that is going to complement the box which is going to contain your Ad. This tutorial is meant for square ads only./* By default it floats to left */
.ad-container {
float: left;
padding: 10px 0;
padding-right: 10px;
}
/* For ads floating to the right */
.ad-container.right {
float: right;
padding-left: 10px;
padding-right: 0;
}
/* Centered Box */
.ad-container.center {
float: none;
padding: 10px 10px;
text-align: center;
}
/* Clearing floats */
.ad-container br {display: none;}
.ad-container:after, .ad-container:before {
content: "";
display: block;
clear: both;
}
If you are not sure where to add this CSS code please check the guide on adding CSS to a Blogger blog
The HTML Container
What does this do? Well, you can, as I already mentioned, paste the Ad Unit's code provided by AdSense in the HTML mode in the post and the ad will start appearing but you get a very little and not-an-easy option to position the ad as you like. With this you can.Copy the following code and have it saved in your favorite text editor so you can use it in the next steps easily.
<div class="ad-container"> <!-- Paste your code here --> </div>
The HTML markup is simple, just put your AdSense code between the first and the last line i.e where
<!-- Paste your code --> is and that is it.You need to know a small thing if you want to have the ad centered to floated to the right as by default it floats to the left. Check the following line of codes trimmed from the HTML markup provided above.
<div class="ad-container center">We added the keyword "center" in side the
class="" attribute. If you want the ad to appear centered then you have to add it too to your markup. <div class="ad-container right">In case you need it on the right just add "right" in there and that's it. Simple!
Once you have this markup ready with your AdSense Ad code you may proceed to the new steps that guides you through adding it to the post through post editor.
Put The Final Code In Post
By now we assume that you have finalized the code i.e edited the markup and included your ad unit code where described.To put it into your post click on the "HTML" button when you are in the post editor
After switching to the HTML mode paste your code around the text where you want it to appear. Mostly ads are put at the start of the blog post but if you wish you can put anywhere for example at a position where you know the readers are going to spend most time reading or focusing.
Make sure that when you paste the code anywhere in the post in HTML mode you paste it outside a
<span> or <div> tag that may be there to contain some other text or paragraph/image.For any further help on this you may use the comment box below to let me know.
