Creating a Graphic Link using a Screenshot


In my last life (before Lyme disease) I was a web designer, goat mom, home educator, gardener, and head cook and bottle washer. In my life before that I was a legal secretary. In other words, I have been exposed to tiny little details and technical stuff (lots and lots of technical stuff).

I had to give up my web design business when I could no longer design websites because of severe cognitive issues: short-term memory problems, inability to focus, lost my visual design ability — I designed websites in my mind before they were created — I could no longer do this. I still have mental visual difficulties but they are somewhat better.

That said, I want to share some little tricks and tidbits that can make your blog look much nicer, even professional using some simple graphic design tricks and html and css code. I will also share some of my online resources with you. If you want to do something but have no idea how to do it you can find code and explanations on how to use that code. I do recommend that you spend a day or so learning basic html, css, and xhtml. It will serve you well in the years to come.

Take, for example, the graphic above. If you mouse over it you will see that it has a link attached to it. If you click on the graphic it doesn’t take you to a larger version of the graphic; it takes you to the website represented by that graphic. And it opens a new tab. It took several different tasks to create this graphic and link. I will go step by step through the processes I used.

Text or HTML Mode

If you click on the screenshot you will see that I am working in “Text” mode and I use a lot of html/css. You will need to do the same thing if you want to customize your blog this way.

Screenshot of this post

Screenshot of this post

Unfortunately, you cannot switch back and forth from Text or HTML mode to Visual mode without losing some of your custom code, at least using Google’s Blogspot.

That’s okay. You get the visual mode when you Preview your blog post. I have two browser windows open. One has the Edit Post page and the other has the Preview. After making any changes I click Save Draft, alt-Tab to the other browser window and hit F5. This refreshes your browser. Check your changes and then alt-Tab back to Edit Post to continue working on your blog.

Capture Screen

All computers have a method for taking a snap-shot of what is on the monitor at any given time. It is call a screenshot. On my laptop I hold down the Function key (Fn) and press the Numlock key (Num Lk – Prt Sc). Num Lk is in white while Prt Sc is in blue. On my desktop computer I just press the PrtScn key. If you have Windows 7 Premium, Professional or Ultimate you can use the Snipping Tool: Programs – Accessories – Snipping Tool. The instructions below are for those who do not have the Snipping Tool.

Okay, time for you to try it. Press the button for your computer. I know: nothing seemed to happen. The screenshot is now in your computer’s memory or Clipboard. Time to put it someplace where you can edit it. I use Paint Shop Pro 8.1 (PSP) but you might have Photoshop or another graphic or photo editing program. You can even use Windows Paint for this step. Open the application and after it has loaded click on the workspace. Now you are going to paste your screenshot onto the workspace: Ctrl-V. Hold down Control (Ctrl) and press the “v” key.

Screenshot in Paint Shop Pro 8.1 ready for editing

Screenshot in Paint Shop Pro 8.1 ready for editing

Above is a screenshot of a screenshot in PSP.

In your graphic design application choose the Crop Tool (see below):


Starting in the left hand upper corner of your screenshot (or wherever you would like to place it) place your crop tool and drag across and down. The crop tool is adjustable after you make your selection. Adjust it so that only the portion of the screenshot you would like to keep is inside. Double click on the selection and your graphic should only show what you chose (if you have an older computer with limited memory and harddrive space, give it a few seconds to crop).

Cropped screenshot

Cropped screenshot

Now resize your screenshot graphic to any size you like within reason — resizing larger will result in loss of quality. I typically have a minimum of 800px wide for my blog graphics with photos a minimum of 1200px up to 1500px. I then sharpen once for a crisper graphic.

Would you like a simple border around your graphic? For Paint Shop Pro 8.1: Image – Add Borders. I like grey or black borders best. For my blog graphics I actually created a script in PSP to add multiple borders to each of my photos and graphics, saved it and just run it with a click of my mouse.

Save your graphic to a preferred folder (be sure to note where that folder is) and it is time to insert it into your blog post.

WordPress Insertion

Click Add Media button – Upload FileSelect Files. Choose your graphic file and click Open.

Screenshot of upload

Uploading graphic to blog

Fill in the information on the right, choose alignment (right and left text wraps around graphic; center it stands alone), URL: Media links to a larger version of the graphic. Click Insert into post.

Image options: caption, alt, description, URL, alignment and size.

Image options: caption, alt, description, URL, alignment and size.

Save Draft and then Preview.

Graphic as Visual Link

Okay, you know how to upload a graphic to your blog, align it and add a caption. But let’s say you want the graphic to be a link to another website, and in this case, the screenshot is of another blog or a favorite website. It is easy to do before you click Insert into post.

Go through all of the steps again to add a graphic to your blog but before inserting the graphic into your post click on the drop-down menu for Link to. Its default is Media. Choose Link to: Custom URL. Copy and paste the URL for the blog or page you want visitors to be sent to when they click on the graphic into the field. Make sure your caption is filled in, you have the size you like, and click Insert into post. Save Draft and Preview. Click on your graphic. Does it send you to the address you indicated? Awesome! But does it open in a new tab so your blog doesn’t get lost as your visitor surfs along? Time for the final bit of code. You will hand code this one. Copy this html snippet:


Paste that bit of code at the end of the html “a href” as illustrated below. Okay, you need to be careful here. Don’t be afraid, but be careful. Watch your quotation marks, always use lower case with all code, and don’t delete anything important.

Link opens in new tab using Target

Link opens in new tab using that little target code

Click on the graphic below. It should open a new tab and send you to the main page of my blog.

Serendipity: Life is a Garden Blog

Serendipity: Life is a Garden Blog

And there you go. Easy as pie! I will be adding more tutorials: creating boxes with curved corners and colored backgrounds will be next.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s