Trocando imagens automaticamente

Algumas pessoas já me pediram para ensinar a fazer isso: ter a possibilidade de que uma imagem seja trocada por outra automaticamente no menu lateral de seus blogs. Isso é útil para dar destaque a banners de parceiros ou mesmo botões de links internos do blog ou de serviços. É uma dica para blog bem útil e simples de aplicar.

Ensinei aqui em outros artigos, como fazer textos e imagens rotativas em seu blog, que pode ser aplicados dentro até mesmo de artigos, muito interessante para chamar a atenção de partes e ocupar pouco espaço do layout, veja:

• Texto animado – Mais movimento no Blog
• Imagens rotativas

Então, encontrei no blog El Escaparate, como trocar automaticamente uma imagem por outras, quantas você quiser colocar na rotatividade. As imagens vão se sobrepondo e não ficam em movimento como no tutorial que indiquei acima.

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 (link corrigido!)

2. Vá no painel do Blogger, abra “Layout” ~> “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 “Layout” ~> “Elementos da Página” e crie um gadget do tipo “HTML/JavaScript” (se não sabe fazer isso, veja o artigo: Onde colar código HTML).

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>

Sei que é 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.