Google Search

Custom Search

Tuesday, January 26, 2010

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.

kang rohman

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

1st 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

2nd 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:



blogspot tutorial


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?




klik saja soalnya ga akan ke mana-mana


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.

0 comments:

Post a Comment

 

Followers

Bloging Tricks Copyright © 2009 Blogger Template Designed by Bie Blogger Template