Search This Blog

26 Apr 2013

How To Add Clickable Images/Pictures In Blogger

Replace YOUR IMAGE DIRECT LINK with image's direct link that you copied before (make sure it would be start from http://). This is the code for an unclickable image. Now, copy the whole code and use it anywhere, where the HTML code allowed (look at the bottom section for using in Blogger).
Look at the below code,
<img src="YOUR IMAGE DIRECT LINK" />
Here <img> tag represent that you want to show the image, but which image will be show I will use src attribute with the value of your image direct link. See a preview of unclickable image.

2. To Add Clickable Images To Your Blogs /Blogger/Websites:


<a href="URL WHERE YOU WILL GO AFTER CLICK"><img src="YOUR IMAGE DIRECT LINK" /></a>

Replace URL WHERE YOU WILL GO AFTER CLICK with the URL where you want to redirect, and replace YOUR IMAGE DIRECT LINK with your direct image link. Look a live preview of this code,

3.Adjust Height and Width of Images in Blogs/Blogger/Websites:


You can adjust the height and width of your images by adding some attributes, called height and width in img tag. When you include the height and width attributes in this tag, then doesn't matter the original image size. It will show the size what you have mentioned in the newly added attributes. If you don't use height and width attributed in this tag, then the original size of the images will be display. Look the below code,

<a href="URL WHERE YOU WILL GO AFTER CLICK"><img src="YOUR IMAGE DIRECT LINK" height="VALUE" width="VALUE" /></a>
Replace VALUE with your image size as width and height. if you want to show 300px in width then replace VALUE with 300 corresponding to width, similarly do for height. Look at the below preview, In the above preview, I am using width="400" height="200" so image is bigger than the original one as you can see the top of the above preview image. You can adjust width and height of images as your need.

4. Adjustment of Images to Left, Right or Center in Blogs/Blogger/Websites:


You don't have to do anything special for doing it, just add an additional attribute align in img tag, and assign a value to this attribute. Let you give left value to this attribute, which will lead your image to left. Look at the following code,

<a href="URL WHERE YOU WILL GO AFTER CLICK"><img src="YOUR IMAGE DIRECT LINK" align="VALUE"/></a>
Look at the preview with align="right" attribute.
you can use align="left" for left
align="center" for center

No comments:

Template developed by Confluent Forms LLC; more resources at BlogXpertise