Add Opacity Blur Effect to all images of Blogger blogs

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

Popular posts from this blog

13 Best Forum CMS/Script to use

Easily Get 50000 free Backlink for your website

Read Download ePub Harry Potter Books & Apk

Add Cool Social Media Sharing icons below posts in Blogger

7 best CMS/script for building Social networking website

12 best free Article Rewriter/Spinner you can use

Read Download Stephen King's Novels ePub & Apk

Top 6 Best Alternatives to ZBIGZ

10 Best Free Flash Editor software to use

Top 10 best Financial app for Payday loans