Make Clickable Images In Blogger with Fade Effect

CLICKABLE-IMAGEMost of you requested a tutorial on how to make images clickable in blogger posts, sidebars and footers so the tutorial today will not only teach you that but will also share the beautiful trick of adding the fading effect to the images i.e. the images will fade on mouse hover. So lets get things done!

 

 

 

How to make an image clickable?

The complete clickable image code looks like this,

<a href="LANDING URL" target="_blank"><img src="IMAGE LINK" width="" height=""  alt=""  title="" border="0" /></a>

 

  • Where refers to where will the image take the user when it is clicked.
  • Where IMAGE LINK refers to the URL of your picture
  • width="" and height="" has to be given proper values in pixels
  • alt="" is alternative text tag that you right to tell search engine robots what the image is about
  • title="" is the name of the image that appears on mouse hover. It is always kept the same as the alt=""
  • border="0" ensures that no border or outline appears across the image

For example for the image below I have used the following code,

<a href="http://www.mybloggertricks.com" target="_blank"><img src="IMAGE LINK" width="240px" height="180px"  alt="Clickable Koala image" title="Clickable Koala image" border="0" /></a>

 

clickable Koala image

When you click the image, it will take you to our homepage. Else if you want to link to the original size of image then use this code,

<a href="IMAGE LINK" target="_blank"><img src="IMAGE LINK" width="240px" height="180px"  alt="Clickable Koala image" title="Clickable Koala image" border="0" /></a>

Clicking the image below will show you its original size.

Koala

 

How to make the same image un-clickable?

To make any image un-clickable simply remove the href linking tag. After removing the landing address tag we get,

<img src="IMAGE LINK" width="" height=""  alt=""  title="" border="0" />

You will see that the image is no more clickable. and the code I used this time is the same one but without the href tag,

<img src="IMAGE LINK" width="240px" height="180px"  alt="unclickable Koala image" title="unclickable Koala image" border="0" />

 

unclickable Koala image

 

How to make an image fade in and fade out?

For this you will need to add a tiny CSS3 code to your template. So kindly follow these steps,

  1. Go To Blogger> Design > Edit HTML
  2. Backup your template
  3. Search for ]]></b:skin>
  4. Add the code below just above it

 

/*---MBT FADE OUT CODE ----*/

.Fadeout img {
filter:alpha(opacity=100);
opacity: 0.3;
border:0;
}
.Fadeout:hover img {
filter:alpha(opacity=30);
opacity:1.0;
border:0;
}

/*---MBT FADE IN CODE ----*/

.Fadein img {
filter:alpha(opacity=30);
opacity: 1.0;
border:0;
}
.Fadein:hover img {
filter:alpha(opacity=100);
opacity:0.3;
border:0;
}

 

 

 

    5.  Save your template.

 

Now whenever you wish to add the fading effect to your image then simply insert an additional code to the same Clickable image code that we discussed above.

To make the image Fade out simply insert class="Fadeout" to your image code like this,

<a class="Fadeout" href="LANDING URL" target="_blank"><img src="IMAGE LINK" width="" height=""  alt=""  title="" border="0" /></a>

 

See an example below. (Hover your mouse cursor on it)

Koala fade out

 

To make the image Fade in simply insert class="Fadein" to your image code like this,

<a class="Fadein" href="LANDING URL" target="_blank"><img src="IMAGE LINK" width="" height=""  alt=""  title="" border="0" /></a>

 

See an example,

Koala fade in

 

 

I hope you find it useful. If you wanted to know where to save your images or to get IMAGE Links then read this post,

If you want to learn more image effect then I am sure you would love these tuts,

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

6 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. how to make auto clickable image for all blogger pic?

    ReplyDelete
  2. very useful information....very helpful to the newbies like me
    -thanks

    ReplyDelete
  3. Hi Mohammad - How do you disable this feature? A couple of days ago my blog images started fading on rollover and I don't know what I did to cause this but I would like to disable it. Can you have a look and let me know if there is a quick fix? iartchronicles.com

    ReplyDelete
  4. can i use this for post thumbnail?

    ReplyDelete
  5. this is very useful, mohammad you're great man..,thank you very much..

    ReplyDelete