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.
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
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.
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=’http://determinedmomma.com/wp-content/uploads/2014/12/sweepstakes-and-real-savings-button.jpg'” 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.