Blogging Basics – Putting Up A Simple Ad in WordPress or Blogger

blogger basics creating ads

A company has sent you a button image and asked if you could use it as an ad for them in the sidebar of your website.  Or maybe you’re just throwing in an ad for a friend’s handmade business to help them out.  Either way, with a little coding you can get it up in no time.

determined to save 125 buttonWe’re going to do a basic button like this one.

Starting On WordPress

To place the ad on WordPress, you’re going to need to put it in a text widget.  This is typically accessible in your sidebar on the right side of your admin panel under appearance > widgets.  Then find the text box and drag it into the appropriate spot on the right side of the screen.  Usually this will just say “sidebar” or “primary sidebar”.

Starting On Blogger

To start the process on Blogger, you will need to go to “layout” from your blog’s dashboard.  Then find the place where you’d like to place the ad and choose “add a gadget”.  Look through the list of gadgets until you’ve found the “html/javascript” gadget.  Choose it.

Storing Your Image

Now the process is the same.  You will need to have your image uploaded somewhere.  For WordPress, you can just add this to your media through the sidebar in your admin panel.  For Blogger, there’s no media section to separately upload your photos (unless you directly access Picasa).  I’ve found the easiest way to do this is to start a post and add the photo into it as if you were using any other photo.  Then right-click the photo and choose “Save Image URL”.  You do not need to publish or keep this post after you’re done.

The code for placing your ad is:

<a href=”THEIR URL”><img src=”URL OF THE IMAGE HERE”></a>

If you would like it centered (if say, it doesn’t quite fill up the whole space) add <center> to the beginning of the code snippet above and </center> to the end of it.  Save you widget or gadget and it should appear where you’ve placed it on the live website.

Hover over the image to watch it change.

Advanced – Hover Images

If you would like for the ad to show two different photos, one regularly and one when they hover, use the code below.  It adds some flair to the ad and makes it interesting.

<a href=”THEIR URL”><img src=”URL OF FIRST IMAGE HERE” onmouseover=”this.src=’'” onmouseout=”this.src=’URL OF FIRST IMAGE HERE'” /></a>

And that’s all there is to it!

If you liked this post, make sure to use the bar on the left to share it with friends or add it to your work-at-home board on Pinterest.


I'm busy diving into motherhood stilettos-first while earning a modest living from my couch. I have an obsession with baking and a passion for handmade products. Connect with me on Google+.

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge