Modify homepage image animation in Blogger Galauness template

One of the blog reader and user of Galauness blogger template recently asked how to change the homepage image effect to just a  "static image"  or some different animation of choice. I thought to post the solution so that it helps others too.

{ SETPS TO FOLLOW }

• Back-up (export) your template before any modification. In-case something is messed-up you can restore (import) it from the backup. You can find the "Export Blog" (and Import Blog) option under: 

Settings -> Other -> BlogTools -> Export Blog

• Edit the template. You can find the option "Edit HTML" under:

Template -> Edit HTML

• Now in the HTML code find (CTRL+F) the code snippet similar to the below snippet:

$(function() {$('.snips-image').hover(function(){$(this).find('img').animate({top:'220px'},{queue:false,duration:200});}, function(){$(this).find('img').animate({top:'0px'},{queue:false,duration:200});});})

That's the code responsible for the image animation in the homepage.

• If you want no animation and just need static image:  comment the snippet and save the template. You can comment a JavaScript snippet with  /*  */ characters

So the commented snippet should look like this :

/* 
$(function() {$('.snips-image').hover(function(){$(this).find('img').animate({top:'220px'},{queue:false,duration:200});}, function(){$(this).find('img').animate({top:'0px'},{queue:false,duration:200});});})
*/

• What if you want to change the animation instead of displaying just a static image ? For example, you want to fade-out the image on mouse hover and fade back in on mouse out. 

You need modify the snippet like this:

$(function() {
	$('.snips-image').hover(function() {
		$(this).find('img').animate({
			opacity: 0
		}, {	
			queue: false,
			duration: 500
		});
	}, function() {
		$(this).find('img').animate({
			top: '0px',
			opacity: 1
		}, {
			queue: false,
			duration: 500
		});
	});
})

Of-course there're many other ways of doing it. I've implemented the above code in this blog too, just check out the homepage.

• For more animation & effects, follow the official JQuery documentation:

http://api.jquery.com/animate/
http://api.jquery.com/category/effects/