Thursday 6 April 2017

Positioning AdSense Unit below the Post Title in Blogger

Positioning AdSense Unit below the Post Title in Blogger

Now let’s try position it better with CSS codes so that it looks good in the template. Add the CSS codes in the Blogger template just before </head>.
If you are using a rectangle or square unit (i.e.. 300 x 250, 250 x 250, 336 x 280) then you should add this CSS code in your blog.

<style>
#pheadads{
float:right;
padding:5px;
}
/* for responsive templates */@media only screen and (max-width: 767px){
#pheadads{
float:none;
padding:5px;
text-align:center;
}
}
</style>
This will make the ads float in the right side of your post body. Change float: right; to float: left; if you want it on the left side of your post body under the post title. Also if you are using a responsive template then you want the ad unit to be aligned in the center on smaller screen. That is why @media only screen and (max-width: 767px) is added. Change (max-width: 767px) according to your blog’s template design.
If you are using a banner or leaderboard units (970 x 90, 468 x 60) then you may want them to be center aligned in the post body. For this you need to add a center tag with given code like this:-
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pheadads'>
<center>

insert you ads code

</center>
</div>
</b:if>
Now the unit will be center aligned. Replace insert your ad code with AdSense unit code. These positioning tips will work in most blogger templates even the extreme custom ones.
That’s the gist of adding an AdSense Unit just below the Post header or title. Hope you have understood the tips and solutions well. In case you have any question or facing any issue regarding this do put forward them in the comments section. Thank you all and wishing you have a high CTR.

No comments:

Post a Comment