Most of you would have already started to monetize your blogs by using some of the ad networks out there 🙂. If not sign up for Google Adsense and start monetizing your blog. Else try out some of the Best Google Adsense Alternatives out there. Now most of the WordPress blogs out there will not have sufficient amount of ad spaces. You will always get a good CTR(Click To Rate) when you place your ads between your content or wrap your content around the ads(the best). You can also try monetizing your blog using Google consumer surveys as well.

This post is about wrapping your content around ads in your posts or pages.

Ad placement

I will discuss more about the best ad placement practices to maximize your revenue from ads in my upcoming posts.For now I will help you to create a custom ad space in your wordpress blog.

Some of the WordPress templates will be having custom ad spaces in their theme panel, where you just have to place the ad code in the space provided by your theme. Easy isn't it? But most of the themes I have seen have only provided ad spaces for Header and for Footer but not within the content. Something like the one shown below,

I will explain for Google Adsense codes, this implies for all other ad codes as well. Say you selected a rectangle(300*250) size code. If you try pasting the ad code directly into the post, say the beginning of your post, you will get something like the image shown below.

This is not the right way to place the ad. You would want to place the ad such that the content wraps around it. This is easy, just use css to wrap the text around the ad. Just assume that your google ad code or any other ad code for that matter is like this,

<script async src=”xxxxxxxxxxxxxxxxxxxxxxx”></script>
<ins class=”adsbygoogle” style=”display:inline-block;width:336px;height:280px” data-ad-client=”xxxxxxxxxxx” data-ad-slot=”xxxxxxxx”></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

You just have to add a div tag and style it to make the text to wrap around the ad.

<div style=”clear: right; float: left;”>
	<script async src=”xxxxxxxxxxxxxxxxxxxxxxx”></script>
	<ins class=”adsbygoogle” style=”display:inline-block;width:336px;height:280px” data-ad-client=”xxxxxxxxxxx” data-ad-slot=”xxxxxxxx”></ins>
	<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>

This will result in your ad to appear at the left and the text to wrap around it. Something like this,

Now if you want to position the ad to right with the text wrapped around it in the left, you can change clear :left; and float: right.

<div style=”clear: left; float: right;”>
	<script async src=”xxxxxxxxxxxxxxxxxxxxxxx”></script>
	<ins class=”adsbygoogle” style=”display:inline-block;width:336px;height:280px” data-ad-client=”xxxxxxxxxxx” data-ad-slot=”xxxxxxxx”></ins>
	<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>