Home » » How To Add Clickable Image in Blogger

How To Add Clickable Image in Blogger

I'm sharing this post to shows you how to add pictures, clickable images, images which opens in a new window),etc.Let's see how to do it.
Now it is for adding a picture which is (unclickable one):
First upload your photo to any free image hosting site like photobucket.com. You can upload your photo in any site. They will provide an url (link) directly to the photo.Take a note of the url and use the code below replacing the url( from http to jpg) in the code to your original one.(Set your own dimensions to suite your needs)

<img src="http://i219.photobucket.com/albums/cc286/7kranthiswaroop/john1.jpg" alt="john cena" width="160" height="134" />
The image looks like this (unclick-able)
john cena

Now it is for adding a picture which is  click-able:
Here is the code to add a clickable image(open in the same window)
<a href="http://premiumadmin.blogspot.com/"><img src="http://i219.photobucket.com/albums/cc286/7kranthiswaroop/john1.jpg" alt="john cena" width="160" height="134" border="0" /></a>
In the above code, premiumadmin.blogspot.com is the target url (replace that url with your desired target url) and the image url aswell (set your own image dimensions).
The output image will looks like this

john cena

Now it is for adding a picture which is click-able and opens in new window:
Here is the code for it
<a href="http://premiumadmin.blogspot.com/" target="_blank"><img src="http://i219.photobucket.com/albums/cc286/7kranthiswaroop/john1.jpg" alt="john cena" width="160" height="134" border="0" /></a>
The output image looks like
john cena
(click on the images if you want to test)

If you want to add the pictures in sidebar,sign into your blogger account > add a page element > html/javascript > paste the code and save the changes.

If you have any question or any problem you can ask your questions via comments and get the answers.

No comments:

Post a Comment