How To Add Opacity Effects to Your Blog Images

How To Add Opacity Effects to Your Blog Images

1.Log in to your dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this </head> Tag

4.Copy below code and paste it just after above code.

<style type='text/css'>
a.opacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.opacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

5.Click on Save Your Template.

6.Now go blogger dashboard and go to Desing --& Page Elements.

7.Click on 'Add a Gadget' on the sidebar.

8.Select 'HTML/Javascript' and add the one of code given below

<a class="opacity" href="http://btricks-tools.blogspot.com/"><img src="Add Image URL Here" /></a>

Note: Replace Add Image URL Here with your image url.

Now Save your HTMLJava Script you are done.

Cheers.