Friday, 23 October 2009

Blur effect for images in Blogger

Blur is one of popular effects for WEB 2.0 . When applying blur effect to image in website , inactive images will be blur and only show if mouse over .

you can check demo here

to do this effect ,follow these steps :
login to Blogger ,go to Layout and continue to Edit HTML
insert this code before </head>

<!--LINK-OPACITY-STARTS-->
<style type="text/css">

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=50);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

</style>
<!--LINK-OPACITY-STOPS-->

Save template ! Blur effect is added to your blogger .
To added Blur effect for each image ,use this structure :

<a class="linkopacity" href="your_URL"><img src="Your_image_url" /></a>

Ok,you are done .


huy signature

3 comments:

  1. Good job and really nice template.

    I'm going around the web to this different templates makers but never find one template for RADIO STATION (specially with a templates how look like some "radio station template"

    If you don't have any idee for some next templates, what not think about this ;-)

    Thanks to consider my proposition

    God bless !

    STM

    ReplyDelete
  2. thanks for your idea .
    I will consider it in my next template . Could you give me more detail about what you really want ? Base on it ,I can make a template better .
    Hope you come back and give me more comments
    thanks again

    ReplyDelete
  3. Nice info brother, o yeah can you tell me how to make drop down or sliding title on sidebar, like this template to view your free template, just title to view,, sorry my english bad, do you know my question? Please,..help me

    ReplyDelete