add links | Ask Ludwig

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?

.:.

Technorati Tags: blogging,WordPress,blogroll,blog links,add links,show links,images,make logos,Windows 7,Paint

WordPress offers an array of “Widgets’” hat can be placed in sidebars to show a wide variety of material. The “Links” widget is one of those and shows links to other blogs and sites. This is one widget that is not too easy to use as a number of steps are required to set it up the way you like.

Your blog already has a number of links in a category called “Blogroll” that were set up along with your blog. You can modify this group, but it is easier to add a new “Link Category”. You need to add the links you want, and finally you need to place the Links Widget into the sidebar. Lets take these up in order.

Set up a Link Category

On the WordPress Dashboard, in the navigation pane on the left, find Links. If it is not expanded click it so the tabs “All Links”, “Add New”, and “Link Categories” show. Click Link Categories to display the Link Categories page.

In the Name field enter the title you wish to show above the link list in the sidebar. You can enter a description to explain the list in more detail. Then click the button below the fields, “Add New Link Catergory”.

This will add the category to the listing on the right.

Add new links

Click the Add New tab to bring up the Add New Link page. Fill in the spaces with the name of the blog or site, the full URL, that includes the “http://” part, and some description of the link.

In the Categories field click the category that you set up earlier.

Be sure to click the Add Link button.

You will see a message “Link added.”

Continue adding the other links that you wish to show in the same way until you have entered them all.

You can go back to make correction and changes at any time. Click the All Links tab, then move the pointer to the link name. The Edit and Delete links will show up as you hover there.

Just click Edit to bring up the Edit Link page which looks just like the Add New Link page. You can make all the needed changes.

Of course you can go back at any time to add additional links or to remove some from your list.

With the list of links completed, the final step is to add the widget to the sidebar.

Add the Links Widget to the sidebar

Under Appearance in the navigation bar find the Widgets tab – you may have to expand the group. Click the Widgets tab.

In the main widget area find the Links bar and drag it to the sidebar. You can position it up or down in the sidebar by just dragging it like any other widget.

Click the down arrowhead to show the options. The default category will be Blogroll, click the down arrow and click your category.

You can check the other options. You can also define how many links to show.

Thne click the Save button and the widget will be shown on your blog.

Note: If you had your blog open in another browser window, you may have to click the refresh link to see the latest changes.

You clicked Show Link Image and there is no image with the listing there? That another good question and calls for its own answer. It is covered in another post:

How do I add images to my WordPress Links Widget?