How To Make Blur Effects In The Photo or Image

Hello, my friends, it is weekend again and in this lovely weekend, Kang Rohman wants to follow up one of the question from the bloggers. The question is

“ Kang Rohman, How can I make blur effects in the photo in the blog?”.

Actually, In order to make a blur effect in the photo is not difficult; we only make a little code to create it. Please drop your mouse into the photo below so that you understand my explanation.

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 ]].>, then Copy and Paste the code below above ]].>

   .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;

URL target" class="linkopacity">Image URL source">

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;

http://www.blogspottutorial.com" class="linkopacity">http://24rohman.googlepages.com/Water-06.jpg">

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;

#nogo" class="linkopacity">http://24rohman.googlepages.com/Water-06.jpg">

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.