Como mostrar uma imagem diferente ao passar do mouse

Este método é bastante fácil, 
Para este método há duas etapas:

Primeiro você tem que adicionar algum código para seu modelo, para fazer isso 
Vá em "Layout"seção, clique em"Editar HTML", 
Agora encontre este código
</ Body> (que será na parte inferior)

Então, imediatamente antes desta tag, cole o seguinte código:

<script type="text/javascript">
//<![CDATA[

function pat_getByClass(c){
ems=new Array();e=document.getElementsByTagName('*');pattern=new RegExp('(^|\\\\s)'+c+'(\\\\s|$)');
for(i=0,j=0;i<e.length;i++)if(pattern.test(e[i].className)){ems[j]=e[i];j++;}
return ems;
};

function ps_flipit(){
var c = pat_getByClass('flipit');
for(i=0;i<c.length;i++){
c[i].firstChild.onmouseover=function(){
this.style.display='none';
this.parentNode.lastChild.style.display='';
};
c[i].lastChild.onmouseout=function(){
this.style.display='none';
this.parentNode.firstChild.style.display='';
};
}
}

ps_flipit();

//]]>
</script>

Após fazer isso, salvar o modelo.

Segundo passo:
Agora em diante, ao postar qualquer artigo, sempre que você quer mostrar o efeito, faça o upload de imagens, e as ligações devem ser incorporados corretamente as instruções abaixo:

<table border="1">
<tr> <td><center><div class="flipit">
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="FIRST_IMAGE_TARGET_LINK_HERE"><img style="cursor:pointer; cursor:hand;" src="FIRST_IMAGE_SOURCE_LINK_HERE" border="0" alt=""id="PHOTO_ID" /></a><a style="display:none" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="SECOND_IMAGE_TARGET_LINK_HERE"><img style="cursor:pointer; cursor:hand;" src="SECOND_IMAGE_SOURCE_LINK_HERE" border="0" alt=""id="PHOTO_ID" />
</a></div>
</center></td> </tr>
</table>

Substitua as linhas em vermelho e azul, com ligações adequadas.
E apreciar o efeito...

Referência: http://bloggerstop.net/