Trocando Imagens Automaticamente - Tutorial

Alguns detalhes:
É preciso que as imagens a serem usadas tenham as mesmas dimensões, já que uma será substituída pela outra e esse tamanho ficará definido no código-fonte do seu blog.
Outra coisa é que é possível colocar links clicáveis nessas imagens que apontem para partes do seu blog, para parceiros ou mesmo para outras páginas. Vai da sua criatividades.
Também é uma ótima opção para criar apresentações de imagens.

Agora a parte difícil: Essa é uma ação ativada por JavaScrit, ou seja, será preciso hospedar um arquivo em algum host de sua preferência para gerar uma URL do arquivo Java original que fará o mecanismo funcionar.

Instalando a ferramenta:

1. Salve o arquivo Java em seu PC e depois hospede em um host e obtenha o endereço URL dele. Precisa ser um host que permita a execução do arquivo. Baixe o arquivo aqui: xfade2.js.

2. Vá no painel do Blogger, abra “Design” ~> “Editar HTML” e procure dentro do código-fonte a linha “</head>”. Acima dela, fazendo a devida modificação indicada em vermelho, cole:

<script src='URL do Arquivo JAVA' type='text/javascript'/> 


3. Agora copie o código CSS que vem a seguir, ainda dentro do código-fonte do seu blog, ANTES da linha “]]></b:skin>”:

/* IMAGENS AUTOMATICAS
----------------------------------------------- */
{
margin: 0;
padding: 0;
}
#rotator
{
border: 2px solid #CC0000;
overflow: hidden;
margin: 10px ;
padding:2px;
position: relative;
width: 200px;
height: 50px;
}
#rotator img
{
border: 0;
width: 200px;
height: 50px;
}

As partes indicadas em vermelho é que determinam o tamanho das imagens que serão usadas. Por isso, modifique essas dimensões conforme o tamanho das imagens que você criar para essa função.

4. Para terminar, salve as modificações feitas em seu código fonte e vá em “Design” ~> “Elementos da Página” e crie um gadget do tipo “HTML/JavaScript”.

Dentro desse elemento de página, cole o seguinte código com as devidas modificações:

<div id="rotator">
<img src="URL da Imagem 1"/>
<img src="URL da Imagem 2"/>
<img src="URL da Imagem 3"/>
</div>

Para alternar apenas imagem com outras imagens. Se quiser colocar mais imagens, basta adicionar a linha “<img src=”URL da Imagem 4″/>” e assim por diante, com o endereço de outras imagens, quantas quiser.

Se quiser fazer o mesmo para imagens com links, então:

<div id="rotator">
<a href="Endereço desejado 1"><img src="URL da Imagem 1"/></a>
<a href="Endereço desejado 2"><img src="URL da Imagem 2"/></a>
<a href="Endereço desejado 3"><img src="URL da Imagem 3"/></a>
</div> 

É um pouco complicado e vai levar um tempo, mas o resultado é ótimo e agradável para aproveitar espaços dentre de seu template e sem atrapalhar o seu layout com excesso de imagens. 

 Ajudou? Comente!