This post demonstrates how to insert an image of a document (with a hyperlink) to add visual appeal to a Blogger portfolio page or blog post. This technique is much more effective then using only text with a hyperlink.
Images with key words in a caption also enhance search engine optimization and promote reader interaction. Images also break up large, monotonous blocks of text.
Follow these steps to insert the hyperlinked image. As you proceed through these steps, periodically click the "Save" button to the right-hand side of the page above the rich-text tool bar to save your work.
Step 1. Open your document and take a screen shot of the document's field. Make sure your original document is located in a publicly accessible location, not on your computer's hard drive, a private folder in iLearn, etc. I recommend saving your file to a folder in DropBox, Google Documents, or a similar cloud-based platform.
Step 2. Save or convert the image to a format accepted by Blogger (e.g., jpeg, gif, png).
Step 3. In the Blogger editing window, click on the "Insert Image" (the one that looks like a picture) along the rich-text editor tool bar. You may either upload the file by selecting it from your blog's image gallery, uploading a file from your computer or phone, or from your webcam or URL address. Depending on the layout and design of your post, align the image to the left, center, or right of your post, select the desired size, choose to add a caption if you wish, etc. To open the image properties box, left click on the image. See the image, below.
Step 4. Open your cloud-based file and copy the public link to the document. When you copy the link, make sure the settings allow anyone with the link to view it. Return to your blog post, left click on the document image, left click on the "Add or Remove Link" icon on the rich-text editor tool bar ("Link"), paste the link into the URL text box, choose your setting options, and select "OK." You can also hyperlink the image's caption or selected text in your blog post or page.
Step 5. Add your text, providing a description and background about the document.
Step 6. Select the "Preview" option in the upper-right corner of the page to check your work. When you are satisfied, click "Publish."
That's it! You can use a similar technique to insert a hyperlinked image in a WordPress or Weebly post or page. You can also use this technique to insert hyperlinked screenshots of other tactics, like blog posts, Web pages, and even videos or audio files. See my WordPress Sandbox site for examples.
NOTE: YouTube videos offer the option to copy and insert an "Embed" code in HTML language, instead of a hyperlink. By embedding the code, you will be able to insert an actual thumbnail in your post or page that plays the YouTube video when you click on it.
To copy the embed code, select your YouTube video and click the "Share" icon below the video window. Select the "Embed" option and a window with the HTML code opens. See the image, below.
Copy the code. Return to your blog post and select Blogger's "HTML" editing mode instead of the "Compose" editing mode (upper-left corner of the page, above the rich-text editor toolbar). See the image, below.
Insert your embed code in the desired location and click "Save." Return to the "Compose" mode, complete your edits, click "Save" again, and check your Preview. If the YouTube video window is too wide for your blog post window, reenter the HTML editing mode and adjust the figures for "height" and "width" in the HTML code. When ready, click "Publish." See the example, below. Click on the window to play.
Copy the code. Return to your blog post and select Blogger's "HTML" editing mode instead of the "Compose" editing mode (upper-left corner of the page, above the rich-text editor toolbar). See the image, below.
Insert your embed code in the desired location and click "Save." Return to the "Compose" mode, complete your edits, click "Save" again, and check your Preview. If the YouTube video window is too wide for your blog post window, reenter the HTML editing mode and adjust the figures for "height" and "width" in the HTML code. When ready, click "Publish." See the example, below. Click on the window to play.
