I have been experimenting with image and ad placement these days. When I tried to put ad block in a post and tried to warp post content around it… man it did not work. But with little research and Googling around, was able to do so in few minutes. I am sure some of you, want to know how? In fact, it is very easy, for both image and AdSense block one has to use different tags.
Warp Text around an Image
Make sure your image size in not bigger than the post column width. After you save and upload image to your server, get the hyperlink for that and then add the following code for the placement.
<img align=”left” src=”IMAGE URL/ADDRESS” width=”120″ height=”130″></a>
For placement on right change ‘align’ value to right. In case you want to add hyperlink and other values to the image being played around with, then use following code with lot of other variables:
<a target=”_blank” style=”text-decoration: none; color: #8B31C7″ href=”URL OF THE WEBPAGE“><img align=”left” style=”border-left: 14px solid #FFFFFF; border-right: 14px solid #FFFFFF; border-top: 4px solid #FFFFFF; border-bottom: 4px solid #FFFFFF” src=”URL OF IMAGE SOURCE” width=”120″ height=”130″></a>
Wrap Text around a Google AdSense or any other Ad
First get the ad code from your AdSense account or control panel. Then just insert the following code, with your actual ad code.
<div style=display:block;float:right;margin: 5px 5px 5px 5px;> Google or any other code</div>
To play around with ad placement you change the ‘float’ value to left, right and center as per requirement. 5px 5px 5px 5px is margin spacing top, right, bottom and left respectively.
Result of this should be like as above. Image is left aligned, while Google ad on the right. Snapshot via Nazaraone