In The Scratch Pad – Fancy Text And Links In Your Sidebars, we covered how to use a scratch pad to create some fancy text and links in the sidebars or any other available widget areas your theme might have.
Using the same techniques, you can easily add images in those same widget areas.
How to do it
Here is a screen capture of SYNAPTICI at the time of writing this post. Notice the 3 images below. The Craigdarroch ad is in the ‘Header Right’ widget container. The Salish Sea and Equine Designs ads are in the ‘Primary Sidebar’ widget container.
The Craigdarroch adÂ
To create this ad, follow these steps.
TIP: Knowing the size of your widget container is very helpful. I know that in this particular theme (News Theme), the Header Right widget area is 493px wide. So, the maximum width it will support is 493 pixels.
1) Create an image using Corel’s Paint Shop Pro that is 468 x 60. This by the way is one of the standard IAB (Interactive Advertising Bureau) ad sizes for banners. The other is 728 x 90. Use whatever image software you have to create the image you want to use.
2) Upload the image using your Add Media function. Use the following settings and then click Insert into post. (Note … the size will be different for different images. Full Size is the setting to use.)
3) With the image now in your scratch pad, add the URL you want the image to link to. In this case, it’s http://www.thecastle.ca
4) While you are entering the link, give it a title. In this case it’s ‘Visit Craigdarroch Castle!’
5) Be sure you click on Open link in a new window/tab
You should now have this in your scratch pad.
6) Click on your Text tab (top right hand side of your editing area) and copy this HTML ( the stuff highlighted in blue. You don’t need the <p> and </p> )
7) Now, go to Appearance / Widgets / and open the Header Right widget area.
8) Slide a Text widget in to that widget area and paste the HTML into it. You do not need to give it a title.
9) Save it, refresh your home page and have a peek. If you did everything right, you will see your image and it should link to the intended URL.
That’s it! Play around with this and see how you make out. Remember, if you have questions, ask them below in a comment 🙂
Note on alignment and size:
When we inserted that image, I suggested you use “Alignment None”. Depending on what you need, you may want to select Left, Right or Center.
Also, we used an image that was the right size to begin with because we created it to fit. So, what happens if you have a great image already but it’s a bit to big?
We’ll cover that in part 2 … coming soon!
Leave a Reply