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>
------------------------------------------------------------------------------------------------------------------------------------
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.
Ajudou? Comente!
Tutoriais
Sem Comentários
Regras dos comentários
1. Todos os comentários são lidos e se possível respondidos.
2. Não serão toleradas faltas de respeito.
3. Se possível comente e faça de nós um grupo feliz.
4. Caso o link não Esteja Pegando Deixe um comentário avisando!
Obrigado