How To: Integrate Wrapped Ads into Blogger Posts

I love ads. We're friends. Really good friends. Unfortunately, I've spent the past freakin' hour and a half or so trying to get ads to show up in posts and have text wrap around them. Apparently, this issue is a pain in the ass for a lot of other folks on the innanets as well. True to form, I've decided to write up a quick 'n dirty tutorial teaching YOU how to do this! If for nothing else, this will serve as a reference for *me* if I forget how to do this down the road (these things have been known to happen before). lol. Before we get started, I want to make sure you're set up to stay within Google's TOS when you implement this feature. Likewise, this will help you to not screw up your current AdSense setup if you've already got some ads in your sidebar or something of that nature. After I go over this fun little factoid, I'm just going to go in order - starting with creating an ad - so skip whichever sections you may already be familiar with.

Alright, to make sure this setup works great for you, set up the number of blog posts to appear on your home page to 2. Do this by going to Settings, then Formatting, then set your number next to, "Show" to 2. Then, save your changes. It should look like this:



Now that you have that set up, only 2 posts will appear on your home page (which means only 2 ads will load; 1 per post). That leaves you with the ability to put another ad wherever you want anywhere else on your page and still remain well within Google's TOS!

.:: Creating an Ad ::.

*Note: If you get a, "Security Warning" pop-up box when going through the following process, just click, "Yes"

a. Log in to Google AdSense.
b. Click the, "AdSense Setup" tab.
c. Click, "AdSense fo Content."
d. The choice is yours here; I choose, "Text ads only" from the Ad unit drop-down box since I've had better luck with textual-based ads. Choose whichever you'd like, then click the Continue button.
e. Again, your choice, but I choose, "336 x 280 Large Rectangle" from the Format drop-down box. As for Colors, I like to make my ad units, "pop," so instead of blending them with my template, I make them a bold contrast. Here are the color choices I typically use:

Border #333333
Title #333333
Background #FFFFFF
Text #666666
URL #333333

Whatever you decide to use, if it's a custom color scheme, it's a good idea to save it for future use. So, in the Palettes box, click, "Save as new palette." Name it whatever you want and voila. Now you won't have to redefine your custom color palette every time you create an ad!

I don't personally mess with anything else on this page, so just click the Continue button.

f. Channels are optional. They're great for reports and - if you have a bunch of ads created for a bunch of sites - figuring out which ads are your most successful! So, I recommend you click, "Ad new channel." You might get a yellow drop-down bar in your browser that tells you Google's trying to run a script. Click the bar and tell it to allow scripts on that page. You may have to then click, "Ad new channel" again to get the pop-up to show. When it does, enter a name and click OK. You'll see it show up in your, "All channels" box with, "remove" next to it. That's exactly how it should look. Now, click the Continue button.

g. Create a name for your AdSense unit. I like to use the name of my blog, size of the ad, and what I use it for. For instance: kwyjibo 336x280 blogposts Now click the, "Submit and Get Code" button. Congrats; you've created an AdSense ad! Copy the code into a new text document and save it on your desktop. We're going to be using this next.

.:: Formatting your AdSense Code ::.

Caution: Make sure you pay VERY close attention to this and format your code *exactly* as it should be! If you don't, your ads may not display correctly and you could risk having your AdSense account banned if something screws up bad enough!

Since you're going to be placing this code in your blogs' template, you need to change some things to get it to play nicely with Blogger. Luckily, this is simple enough. There are 3 things you're going to have to change:



Remember how I told you to save your code into a new text file? Now we're going to use that, so open that document if you don't still have it open. Now you're going to use the, "Replace" functionality. I use Notepad for this, so if you do the same, just click Edit, then click Replace. Now, find and replace the three things listed in the image above. What you'll end up with is something that looks like the following:

Before:


After:


Now, you're all set up with your formatted code. All you need to do now is wrap your formatted code with a bit of code that will let you determine which side of your post (left or right) the ad will go on, as well as define how much space you want between your text and the ad. This is the code:



For my posts, I like to have my ads line up on the left. If you want them to line up on the right, then change your float value to right instead of left. The padding values, 0px 5px 10px 0px, are the values you define for how much space you want between your ad and what surrounds it. From left-to-right, the values represent top, right, bottom, and left, respectively. Feel free to play around with those numbers. Anyway, now when you add your code into the equation, what you're going to end up with to finally post in your blogs' template is:

.:: Placing the Code in your Template ::.

Almost done! Now we're going to locate where to place this shiny, new code block of yours within your template. Follow these steps:

a. Log in to your Blogger account.
b. Click, "Layout."
c. Click, "Edit HTML."
d. There are any number of ways to do this, but the way I personally find the quickest is to make sure the, "Expand Widget Templates" box is checked, then right-click in the, "Edit Template" code box and choose, "Select All." Click Ctrl and C to copy it, then paste what you copied into a new text document (use Notepad since Wordpad can screw with your formatting). Now, in Notepad, click somewhere towards the top of the document so that you can search through the text. Now click Edit, then Find, then search for this: div class='post-body entry-content'

Now, when it finds that bit of code, just after it , you should see some code that starts with: data:post.body

What you want to do now is copy your completely formatted code between those two bits of code so that it looks like this:



e. Alright, now that you have that bit of code entered into your template, now choose Edit, then Select All in Notepad. Copy what's selected, then, right-click in Blogger's, "Edit Template" code box, choose, "Select All," then paste what you copied from Notepad and click the Save Template button.

Yaaaaay, now you're all done. If you have any problems, feel free to comment to this post and I'll be glad to answer your questions however I can!

-Stephen