Problema con codigo Javascript en blogger

S

Spikcity

Hola a todos, soy nuevo, tengo un problema con un codigo que he formado, mi plan es este: en una entrada poner una imagen la cual cuando el usuario le de clic aparezca otra imagen que al pasar 3 segundos cambie por otra la cual quede permanente y tenga un enlace, es decir:

Imagen1 - Cambia por "Imagen2" cuando el usuario le de clic
Imagen2 - 3 seg
Imagen3 - Permanente con enlace

Accion: Mostrar "Imagen1" hasta que el usuario le de clic, luego mostrar "Imagen2" por 3 segundo y luego cambiar por "Imagen3" que se quedara permanentemente y tendra un enlace.

Estoy utilizando este codigo:
HTML:
  <center>

<div id="cont">

<img id="imagenId" src="Imagen1" />
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' type='text/javascript'>
        $(document).ready(function() {

           $("#imagenId").click(function(event){
            event.preventDefault();
            var nuevaImagen = "Imagen2";
            $("#imagenId").attr("src", nuevaImagen);  // o  $(this).attr("src", nuevaImagen);

          });
        });

      </script>

</div>

<script>
	var imagen = '<a href="Enlace"><img src="Imagen3"></a>';
	setTimeout(function()
	{
		document.getElementById('cont').innerHTML = imagen;
	}, 3000);
</script>
              </center>


El codigo lo guardo como .HTML y lo abro con mi navegador y funciona perfectamente, pero mi objetivo es implementarlo en blogger y lo he hecho de muchas maneras y no funciona, solo muestra la "Imagen1" el usuario da clic y cambia por "Imagen2" y ahi se queda, nunca pasa a "Imagen3", en otras palabras la primera parte del codigo funciona pero cuando tiene que cambiar la imagen al pasar los 3 segundos no funciona en blogger.

Que podria hacer?
 
Arriba