How to float an AdSense Ad to left or right?

How to float an AdSense Ad to left or right and wrap text around it?

When I started this blog several years ago, I had absolutely no knowledge of website designing, coding, HTML, PHP or anything else related. Terms like blog or wordpress were alien to me and I pretty much learned all this over a period of time as I continued updating this blog. All these years, I kept this website as a hobby and never thought to monetize it until recently when I signed up for Google AdSense on a friend’s advice.

Now after a few months gone, one thing that I learnt about AdSense was that the position of your ads is one of the most critical factors to affect your revenue. Your ads have to be in a place where your readers will notice them rather than hidden somewhere in the footer or in an isolated corner of the page. Initially when I implemented AdSense, I myself placed the ads in the footer and at the bottom of the sidebar and there were hardly any clicks at all. I then started changing the position, experimented a little and the ad position that earned me the highest clicks was within the content, like the square you see on the right side of the paragraph below.

I am not really trying to sound like a website expert or someone who has great knowledge of coding. This is something I recently learnt myself and wanted to share with anyone who wants to place the code within the wordpress post, float it to either left or right and wrap text around it. Now for adding AdSense code, there are two ways to do it. Either you use a widget or add the code manually to each page that you want the ad to appear on. I tried several widgets but by far, the official AdSense widget is my favorite. It does the job pretty much by itself and all that you need to do is click your mouse and indicate where do you want the add to appear.  I tried some other widgets as well but nothing quite worked like the official AdSense widget.

The only drawback with the AdSense widget that while it will suggest the places you can put the ad on, it is only limited to the spots that it detected and considered to be the best. If you want to put a code on the spot that you liked but the widget did not included it in its recommended places, there is no way that you can do it with the widget which leaves you with no other option but either to use another widget or manually ad the code to the page yourself. The second drawback was that it does not give you an option to float the ad to the right or left side of the page. The only option is to put the ad in the center and chose its size.

As you can see on this page, I wanted to float the ad on the right side and wrap the text around it. After a lot of reading and fumbling around, it turned out that the task was way easier than I expected. Below is a step by step tutorial on how you can put an ad code within the WordPress post and float it to left or right.

• First thing to do is of course to log in to your AdSense account and create a new ad unit. For this post, I chose a 350*250 medium rectangle.
• Once you have created the ad unit, generate and copy the code.
• Next step is to wrap the code in a div tag. Something like below.

<div style=”display: block; float: right; margin: 0px 0px 0px 20px;”>
your AdSense code
</div>

• Just keep the first and the third line same and whatever code you have copied from AdSense home page, replace the second line with that code. If you want to float the ad to the left, just change the “right” word to “left” in first one. If you want to increase or decrease the margin (space between the ad and your text), just change the pixel values.
• Next step is how to insert this in your WordPress post. I chose to do it individually with each page or post rather than making any changes to the template.
• Open the post that you want to add the ad unit in, or create the new post.
• Click on the edit option if you are updating an existing post.
• You will see this option at top right hand corner of the post block.

How to float an AdSense Ad to left or right?

Click on the text option and that is it. It will open the text editor where you will see the entire post with some codes around it. Just chose the spot where you want to put your ad and copy paste the ad code.

I hope this information was useful. As I said, I am not a coding expert or a web designer. This is just something I learnt myself and wanted to share. You are welcome to comment and ask if you have any questions. If you know of another way to do this, please feel free to comment and share.