Trocando imagens automaticamente

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

setas01 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:

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”

barra27

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.

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

7 Comentários

  1. Bruno,

    Pegue o arquivo indicado que é .TXT e salve mudando a estenção dele para .JS e salve em seu Host.

    Só isso.

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.