Now that you have your HTML code, lets get that added into your blog and formatted correctly.

How to Modify HTML in Blogger

Since I'm using Blogger, I'll keep this specific to Blogger. I haven't transferred to WordPress yet so I'm nut sure of those steps at this time and I don't want to lead you in the wrong direction.

When you start a post in Blogger, it automatically takes you to a version of the post where you can format as if you were writing in Word. At the top of this page on the left side in front of all the normal formatting options, you'll see two boxes. One is titled "Compose" and the other is "HTML."

Since we already have our content begun, make a mental note of where you want to insert your ad. Click on the "HTML" button.

If you've never worked in HTML before, it can be very intimidating at first. Don't fret though. Do you remember where you wanted to add your advertisement? Find that wording. For my example, you can use the bolded font for your reference. I've circled it in the HTML example below so you can find it easier.

I want my item to be displayed directly to the left after my bolded section. I then want the body that goes with this section to "wrap" around my ad.


How to Make Your Ad Look Like it Belongs in Your Post

Now that you have your section, we can insert the HTML for our Amazon item. You should still have the HTML code copied. In front of the text where you want to display your ad, paste in your copied code.

Here's what the full section of my Amazon item code looks like.

I like to test throughout the process to make sure I'm on the right track. Here's what it should look like right now without the formatting we'll put in.

Since I think this just looks awkward, let's get some formatting done. Again, we want our ad to look like it actually belongs.

I do want this to stay to the left. I also want my text to "wrap" around the ad. To do this, we'll need to add the code below:

(I tried to make it so you could copy/paste, but for some reason it keeps removing it. The system probably thinks I'm putting code in the wrong place. I had to take a picture in order to make it stay. If you'd like a version where you can copy/past, just let me know. I have a Word version with the correct codes.)

I'm not sure what the "div" part is but it is necessary. Go ahead and add the first part in front of your item code and get that last part at the end. Your blog code should now look like this.

We're not done. It's wrapped, but it doesn't look like the rest of my article. The words and lines are way too close to my ad. Let's fix that. You'll need to modify that first section to show the margin. You can just copy paste the whole thing again.
You're probably wondering why I had you do that extra step. When I was researching this, I wanted to see what happened with each change. Now you'll know that you can add or change parts of the HTML code to make your article look how you want it. On top of that, you'll know a little about how to go about fixing it.

Your HTML should now look something like this:

And:

You should have something like above with your text wrapped around your ad.


Other Modifications You Can Do

You can change the margin size to 5, 10, 15, 20 or whatever you want it to be. I tried 10 and it was just too small for me so I increased it to 20.

Would you rather have your ad on the right? Just go in and change the "left" to a "right" and viola.

Another cool thing, you can specify which side your sizing effects. This was a little advanced for me at first so I just left it alone once I had it where I wanted it.

These will change which side of your ad will be affected by the margin adjustment. I've put at the bottom what it should look like all together so you don't have to do too much trial and error.

10px value = left margin
5px value = top margin
2px value = right margin
20px value = bottom margin