Adding clickable images ( pictures, photos ) in Blogger ( Blogs, Blogspot, websites )
Adding clickable images ( pictures ) to your post or in your blog sidebar is a better idea. Let’s you are writing a long post full of text and after publishing your post read your own long post it will be so boring because your post has full of content and looks spoiled so it is a better idea to add some clickable pictures related to your post in your post body and you can add clickable images to your sidebars because your sidebar always will be here and there of the post body so that your Blogs will look like as a professional Blog.
Let me give you an example check my post How To Create Hyperlink ( clickable links ) text by HTML and look how it looks like and then assuming that there are no images in the post then imagine how to look like and also you will be bored for reading the full post.
Now come to the main point that is how to add clickable images:
First, you will have to upload your images to an image hosting site if you have no image hosting site then you can use a free hosting site which is good as an image shake, and copy the direct link of your image. Now you want to add an image so you have to use <img> HTML Tags. Now let’s see step by step:
TO ADD UNCLICKABLE IMAGES TO YOUR BLOGS ( BLOGGER, BLOGSPOT, WEBSITES ):
Replace YOUR IMAGE DIRECT LINK with your image direct link which you had copied before. (be sure it will start from HTTP://) This is an image that is unclickable. copy this whole code and paste this code please see the bottom of this post.
Here <img> use for adding images and what is the source for your image so use src attribute and the value of your attribute will be your direct link which is in quotes as a green text area. See a preview of the unclickable image.
TO ADD CLICKABLE IMAGES TO YOUR BLOGS ( BLOGGER, BLOGSPOT, WEBSITES ):
Replace the RED text with the URL where you want to redirect and replace GREEN text with your direct image link. Look at in preview below,
ADJUST HEIGHT AND WIDTH OF IMAGES IN BLOGS ( BLOGGER, BLOGSPOT, WEBSITES ) :
You can adjust the height and width of your images by adding some attributes, called height and width in img tags and it doesn’t matter that what is the size of your original photos although if you don’t use any attributes for height and width then the image will be of default original size. Look at the below code,
so replace VALUE with image size which you would look to resize. if you want 300px in width then replace VALUE with 300 corresponding to width. Look at preview,
so in the above preview, I am using width=”400″ height=”200″ so the image is bigger than the original one as you can see at the top of the above preview image. You can adjust the width and height of images as your need.
ADJUSTMENT OF IMAGES TO LEFT, RIGHT, AND CENTER IN BLOGS ( BLOGGER, BLOGSPOT, WEBSITES ):
So there is nothing special only you need some attribute in img tags. why I have taken attribute in img tags because we are talking about the adjustment of an image so only use attribute which is aligned and will give it to some VALUE if you give VALUE left then the image will be in left and so for the rest. Look at the code below,
