How To Make Blur Effects In The Photo or Image

Please read the following steps to make the blur effect like the photo above.


1^st Steps

1. Log in into blogger with your ID
2. Click the Layout
3. Click Edit HTML tab and don’t forget to click Download Full Template and Back up the template first. (very important)
4. Find the following code ]].></b:skin>, then Copy and Paste the code below above ]].></b:skin>
   .linkopacity img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.linkopacityxtra:hover img {
filter:alpha(opacity=1.1);
-moz-opacity: 1.1;
opacity: 1.1;
border:0;
}
               
5. Save the template

2^nd Steps
Every time you want to put a photo or picture, insert this code;

<a href="URL target" class="linkopacity"><img src="Image URL source"></a>

For example, I have the URL address of the photo or picture like this;


http://24rohman.googlepages.com/Water-06.jpg


And I want to link that URL address to http://www.blogspottutorial.com, so I have to put the code below;


<a href="http://www.blogspottutorial.com" class="linkopacity"><img src="http://24rohman.googlepages.com/Water-06.jpg"></a>

and the result will be like this. Please drop your mouse and click the image if you want:
 



But If you don’t want to link the photo or picture anywhere, just change the URL address with the following code #nogo, for example;

<a href="#nogo" class="linkopacity"><img src="http://24rohman.googlepages.com/Water-06.jpg"></a>

and then this is the result, just drop your mouse and click it. It doesn’t happen anything, right?






Ok, my friend, do you understand? I think you do. For showing the pictures in the blog was explained completely by me with the title Google page creator. You can read again if you forget or still do not understand.
I give you a little clue about CSS code above, you can change the level of blurring the picture by adding or reducing the opacity value, for example;


.linkopacity img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}



The opacity value = 30 is reduced into opacity = 30 (this is example only), so the picture will look to have more blur, example;


.linkopacity img {
filter:alpha(opacity=10);
-moz-opacity: 0.10;
opacity: 0.10;
border:0;
}
You can do your own experiments to get better result. Ok, see you at the next posting and don’t miss it dude.