How to make an image clickable/link in blogger posts

You are here: Home / Tutorials / Blogging / How to make an image clickable/link in blogger posts

Thank you for visiting this web page. On my recent two posts I wrote about what the hyperlink or link is and how to create text hyperlinks/links in blogger/blogspot.com. We create links for making it possible for our visitors to navigate and access our content easily.

Today I am going to teach you how you can make an image clickable or as a link in your blog posts. However, you've to keep in your mind that creating image links in blogger posts is some how trickier than text links especially if you always edit and post your content by using the compose mode of the post editor.

In fact, creating image links in a blogspot blog is done by using HTML codes, the web authoring language which is some what complicated for an average web designer. But don't worry about HTML as I am going to make it easy for you and I am sure in a few minutes, you will be able to make your photos and other graphics clickable in your posts.

Follow the simple steps below that will make you capable of creating image links:

1. Log into your Blogger account and open the blogger's post editor.

Type the main blogger's Uniform Resource Locator on the address bar of your favorite web browser and hit the Enter button on your keyboard or on the search button. You will see the Google log in page requiring you to provide your log in details such as Email address and passwords. Type in your google email address and passwords and click on the sign in button.

2. Open the post editor.

Navigate to the post editor. If you always create your posts in the compose mode, your current active editing mode will likely be Compose mode. This mode will not allow you create image links on your pages simply because it's featured with a capability called What You See Is What You Get abbreviated as WYSIWYG. Hence you will need to switch to HTML Mode.

3. Switch to HTML Mode and insert your image

If you're in the Compose Mode, then you will have to click on the HTML tab at the top of the post editor. But if you are already in the HTML Editor mode you'll not be required to click on the HTML Tab. Insert your image on your post editor by following the procedures you always do whenever you are inserting a graphic or photo into your post. After inserting your image, the following code will be displayed on your post editor.

Note the two URLs: the link and the image URLs. The link URL is inside the First anchor tag (<a>) and it's used for linking web pages or website's content. Image URL is inside the Image tag (<img>) and it's used for printing/displaying an image on the web page in the web browser. In our example code above, the link URL is typed after the href= attribute and also inclosed by the double quotaion marks to both sides.

4. Replace the Link URL with any web address/URL

Delete the current link URL and type or paste the web address of the page where you want your user visit after clicking on your image. See how I have changed the above link url to the one shown on the code below:

Note how the URL's extension has changed from .jpg (extension for images) to .html (extention for web addresses).

5. Publish your post

After you have done all the above processes, you will need to view how your link is working: successfully or not? To do that, if you always use HTML you will simply click on the Publish button located on the top right corner of the post editor. But the if the Compose mode editor is your favorite post editing mode, then you have to switch to that mode by clicking the Compose button located on the top right corner of the post editor screen.

After clicking on the compose mode, you will see your image, but you will not see any signs of link on your image till you publish your post. Click on the publish button and view your post to see if your link works well.

Use the same techniques whenever you want to link your images, such as if you want to create image buttons on your navigation menu for your visitor to navigate to your targeted posts/pages on your blog. Below is a results for our example code above, clicking this image, you will be able to watch the Video song called Usiniseme produced by a Tanzania Bongo flavour Artist, known as Alikiba.

Computer basics tutorials!

Learn the computer basics on our free tutorials. All about software, hardware, and other related matters. Get started now!

Advertisement!

Internet basics tutorials!

Learn the Internet basics on our free Internet tutorials. Learn how to surf the web and a variety of other related matters we offer on this blog. Get started now!

The latest posts!