1.Log in to your dashboard--> layout- -> Edit HTML
2.Scroll down to where you see </head> Tag
3.Copy and Paste below CSS code above </head> Tag
<style type="text/css"> a.linkopacity img { a.linkopacity:hover img { </style> |
4.Now Click on "Save Templates"
Now whenever you embed your image in blog or blog posts you use codes like below.
<a href="target URL of your image" target="_blank" alt="Any name you like"><img src="Link of your image"/></a> |
Look at the Example below.
<a href="http://bloggertipandtrick.blogspot.com" target="_blank" alt="Blogger Tips"><img src="http://i626.photobucket.com/albums/tt346/wam8387/toyotacar-2.jpg"/></a>
5.Replace above code with below code to have hover effect..
<a class="linkopacity" href="target URL of your image" target="_blank" alt="Any name you like"><img src="Link of your image"/></a> |
It will look like this.
<a class="linkopacity" href="http://bloggertipandtrick.blogspot.com" target="_blank" alt="Blogger Tips"><img src="http://i626.photobucket.com/albums/tt346/wam8387/toyotacar-2.jpg"/></a>