In today's post you will leran how to add jquery fade effect for your images in blogger or any other web sites. I will explain you the very simple step to do so. its very easy and it takes less than few minutes. But I am sure this effect will add a very attractive appearance to your blog or web site.
Now without taking much more time I am giving you the steps.
Step 1:
Login to your blogger dashboard >> layout >> Edit HTML
Now Scroll down see " </head> " tag
Step 3:
Now copy the code and paste it just before the </head> tag
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
Posts
