Showing links to other blogs and sites is a common way to help your readers connect with more of what they are interested in. Making those links interesting and easier to use with graphics adds a nice touch. Most blogs have sidebars for displaying information, details and links. In a WordPress blog, the Links Widget is a versatile and useful tool and can display images. This post tells you how to do it.

First you need images. These need to be stored on the Internet so they can be accessed and displayed. Lastly they need to be an acceptable size.

Let’s start with that last item, the size. Sidebars come in various sizes. You want images that fit the sidebar of you blog. Don’t know how wide your sidebar is? In your WordPress Dashboard, click Themes (under Appearance in the navigation pane on the left). Your current theme is shown on the top. There is a link, “Read more about …”, click it and scroll down to find the “Quick Specs” panel about your theme.

It will list the column width, the sidebar width and the header image size. Note the sidebar width. I suggest you make your images about 10 pixels narrower than the sidebar so that they will fit nicely. For this blog, the sidebar width is 212 pixels, I make my images 200 pixels wide. The height is not so important, but the Links list looks best with strip images so it does not get to be too long.

Now what images should you use? If you link to other blogs or sites, the headers of those pages make excellent images. They show a visual of the target page even before your visitor gets there.

Making the logo images

Open your browser to your target page. Do a screen capture. I use the tools built into Windows 7, so Alt-PrintScreen captures the open window. Next open Paint and click Paste. The image of the browser will now be shown in Paint.

Click Select and drag a frame around the header image or header area of the page. Click Crop. The header image is now the only thing in Paint.

Click Resize. In this dialog click Pixels. Then enter the size for the width of the image. In my case that is 200. Leave the checkmark on Maintain aspect ratio so the image will not get distorted. Click OK.

The image will now be shown in the small size that you have selected. Save it into your Pictures folder (or another location) giving it a name that tells you what it is later on.

Do this with your other target pages that you will want to link to on your blog.

Windows 7 Paint saves the images as PNG format – that is fine for this intended use.

Upload the images to your WordPress Media Library

Once you have made your link logo images, upload them to the Media Library. In your WordPress Dashboard expand the Media section (click on Media) then click Add New. The Upload New Media page opens.

Click Browse. In the File Upload dialog locate the folder with your link logo images. Click on one of them. Click Open. Then click Upload in the Upload New Media page.

Repeat for your other images.

Now the images are in your Media Library.

Add images to Links

Open your Media Library – click Media -  Library in the navigation bar. All your images are listed. Click on the one you want. The Edit Media page for that image opens. Under File URL you can see the full web address of the image. Select it (hold down the left mouse button and drag over the address). Press Ctrl+C to copy the address.

Now click Links – All Links, then the one of interest. Scroll down until you see Advanced – Image Address. Click in the address text space then press Ctrl+V to paste the address. Click Update Link. That’s it. Do this for the others.

Be sure to check your Links Widget to make sure that the the Show Link Image box is checked. If it is not, click it so it’s checked and click Save.

Now your Links Widget displays your links with the logo images you prepared. Hurray!

Also see:

How do I show links to other blogs in the sidebar of my WordPress blog?

© 2011 Ludwig Keck

.:.