Add Opacity Blur Effect to all images of Blogger blogs
Add Opacity Blur Effect to all images of Blogger blogs with jQuery
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….
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment