Tuesday, May 31, 2011

Simple Fog Effect for Blogger Image

Maybe you are boring with the image on your blog. Because the image does't has any effect. Now we will add some effect to your image. That's Simple Fog Effect for Blogger Image. Usually fog effect can be called with "Blur". The effect is when you put your cursor on the image, the image will be foggy. See the demo

blogger icon


Nice right? OK, if you want to try Simple Fog Effect for Blogger Image, just follow the steps below.

1. Log in to your blogger icon
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above ]]></b:skin>
.FBT-blur img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.FBT-blur:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}
4. Click SAVE TEMPLATE

Then to "call" the effect just add some code, so the image code will be like this
<a class="FBT-blur" href="http://full-tricks.blogspot.com/"><img alt="blogger icon" border="0" src="http://3.bp.blogspot.com/-a0b5TxNurp8/TeW6QAGDFVI/AAAAAAAAAaU/MBH8_54AreY/s200/fullblogtricks-blogger-icon.jpg" /></a>

So easy right?

No comments:

Post a Comment