Add Opacity Blur Effect to all images of Blogger blogs

Some days ago I wrote a tutorial about Adding 5 popular CSS3 effect on images of your Blogger blog. Those effect’s are Shadow, Opacity, Tilt, Jump and Morph. These effect’s you can use on any individual image. After that tutorial I though about to publish a tutorial about How to use any of effect batch on all images of your Blogger blog. Started with Opacity Blur Effect, you maybe seen this effect on many many blogsites. With CSS3 Opacity Effect was not working fine, so tried with jQuery, and it working just cool. Let’s see how to add this jQuery Opacity Blur Effect to all images.

Add Opacity Blur Effect to all images of Blogger blogs with jQuery

Live Demo- (Click here)

Codes for copy-

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0);
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.5);
},function(){
$(this).fadeTo("slow", 1.0);
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow", 1.0);
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 0.5);
},function(){
$(this).fadeTo("slow", 1.0);
});
});
</script>

How to add-

• First log into your blogger, select your blog, 

• Go to ‘Template’ tab, select ‘Edit HTML’

• Now find (Using CTRL+F or CMD+F) into code snippet </head>

• Above </head> copy and paste given codes, and ‘Save Template’

• Check your blog out for live action.

Compatibility

• The code completely on jQuery-JavaScript universal codes so this effect is compatible with any web browser (Except-IE)

• If your template already have the first line of my code (or a different version of it Like 1.7 or 1.3) don’t copy and paste it twice.

Last words: have any question, feedback leave with comment, New effects I will publish soon stay touch. Chill….