This quick tutorial explains how to add jquery fade effect to your
images in blogger or any other web site.This is very easy and you can do
this less than a minute.But this effect will add some attractive
appearance to your blog or web site.You can look at the
DEMO page of this tricks from here.Now follow the steps below to do this.
1.Login to your blogger dashboard--> layout- -> Edit HTML
2.Scroll down to where you see
</head> tag .
3.Copy below 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>
4.Now save your template and you are done.
