As already known that Adsense is now the best choice of bloggers to monetize their blogs because it is a contextual-based ad that shows relevance to the content. For you to increase the ad revenue, you should try adding the recommended ads on your blog to get maximum output from advertisement programs. You might have observed an ad below the post title in most of the big blogger blogs as also shown here.
You would have been wondering why they prefer to put ads below the post title. It is just because they want to increase Click-Through-Rate (CTR). But you should not rely on what others follows. You should keep trying to add Adsense at various locations to check which spot works best for you.
Have already search for how this can be done but it took me some days before I got it done, so that's why I just wish like sharing how I got it done.
Today, I would be introducing to you how you can add Google Adsense Ad below post titles on your blogger blogs.
How to Create Google Adsense Ads Unit
1. Go to your Google Adsense Account. You would be provided with Adsense Dashboard just click on Ads tab.
2. Click on “by ads unit” to Create a New Ad Unit.
3. For better results choose responsive ads units. You can also Preview to see how the ads would look like when it reached where you needed them.
4. Customize your ad colors and click on the save and get code button.
5. Select Synchronous in the code type and copy the ad code shown to you.
7. Now copy the ads code and save it somewhere i.e. you can save it in your notepad.
How to Put Adsense Parsed Code into Blogger Template.
1. Point your browser to Blogger > Blogger Dashboard > Template
2. Back up your template before making any changes as it can be uploaded back if you made any mistake. You can read here on How to Backup Blogger Template before continuing.
3. After successfully backed up and downloaded. Click on “Edit HTML”
4. Click anywhere inside the template editor and press CTRL F on your keyboard. A search box is provided at the top right side of the template text area.
5. Search for <b:includable id='post' var='post'>
6. Inside it look for <div class='post- header-line-1′> or <div class='post-body entry-content' ….> you should find either both or one of the two.
7. Now paste the below code after <div class='post-header- line-1′> or before <div class='post-body entry- content' ….> in the template.
<div id=”hiideemediaads”>Insert Parsed Adsense Ads Code</div>
8. Change Insert Parsed Adsense Ads Code with the Adsense Ads Code you kept earlier.
9. Finally Click save the template and you are done.
Note: With this trick, your Ads would only show when your blog is visited in web/PC view mode.
To make Adsense show below Post Title on Mobile View Click Here.
Positioning the Adsense Ads
Most ads are made to float either left or right below the post title while some also wrap it inside blog posts.
If you are using a rectangle ads unit like 250×250, 250×300, 336×280 it’s advisable for you to float the ads to either right or left. Copy the below code and add it before </head>
<style>
#techblogngads{
float:right;
padding:5px;
}
/* hiideemedia.com ads settings for responsive templates */
@media only screen and (max-width: 767px){
#hiideemediaads{
float:none;
padding:5px;
text-align:center;
}
}
</style>
This will make the ads float on the right side of your post body. Change float:right to float:left to make it float to the left.
Does this apply to only default blogger templates? or can it work on custom templates too. I’ve tried this from several sources and it didn’t work for me
This works for mostly all templates. If you are having issues with it, the only thing you have to do when searching for the codes is to remove the less than (<) and the greater than (>). Hope this will help you fix the issue you are having.