Imagens rotativas – troca automática

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

É sempre bom ter coisas novas no blog e sempre que um visitante retorna é bom que ele perceba mudanças, se não for do conteúdo, que seja ao menos nas imagens e/ou links e serviços oferecidos. E o que mais demonstra mudanças é o visual, a aparência do blog. Por isso, faça todo o esforço para mostrar que seu blog está em constante atualização, não só com novos artigos, mas tb no layout.

Assim, descobri uma ferramenta útil: rotatividade automática de imagens.

 

É simples:

Vc só precisa criar ao menos duas imagens diferentes, mas com as mesmas medidas, hospedá-las na internet. Com isso vc terá uma URL das imagens (eu uso o Picasa da web – http://picasaweb.google.com/home – é leve, já é um serviço do Blogger e é fácil de usar). Depois que fizer isso, vá ao blogger para editar o layout do seu site e crie um gadget do tipo “HTML/JavaScript”. Lá copie o código abaixo com as devidas mudanças.

<script language="JavaScript">
var quotes=new Array()
quotes[0]='<a href=”URL DO SEU BLOG”><img alt="NOME DO BLOG" src="URL DA IMAGEM 1"/></a>’
quotes[1]='<a href=”URL DO SEU BLOG”><img alt="NOME DO BLOG" src="URL DA IMAGEM 2"/></a>’
quotes[2]='<a href=”URL DO SEU BLOG”><img alt="NOME DO BLOG" src="URL DA IMAGEM 3"/></a>’
var whichquote=Math.floor(Math.random()*(quotes.length))
document.write(quotes[whichquote])
</script>

Com esse código num gadget, sempre que a pessoa entrar no seu blog, a imagem será trocada. A mudança é randômica, ou seja, não segue uma ordem lógica e só muda quando a página é reacessada. Vc tb pode trocar o conteúdo de imagens por textos ou links, definir mensagens de boas-vindas ou apresentar o conteúdo do seu site sem ser repetitivo e com constantes novidades, por exemplo rotacionando links de suas postagens ou mensagens.

No código acima é possível adicionar três elementos diferentes, mas vc pode colocar mais, funciona sem limite máximo. Basta, onde tem a ordem numérica, lembrar sempre de começar com zero e ir aumentando os números. No exemplo, basta modificar e acrescentar a linha q segue e onde estiver “X” coloque o próximo número.

quotes[0]='<a href=”URL DO SEU BLOG”><img alt="NOME DO BLOG" src="URL DA IMAGEM 1"/></a>’
quotes[1]='<a href=”URL DO SEU BLOG”><img alt="NOME DO BLOG" src="URL DA IMAGEM 2"/></a>’
quotes[2]='<a href=”URL DO SEU BLOG”><img alt="NOME DO BLOG" src="URL DA IMAGEM 3"/></a>’
quotes[3]='<a href=”URL DO SEU BLOG”><img alt="NOME DO BLOG" src="URL DA IMAGEM 3"/></a>’

quotes[X]='<a href=”URL DO SEU BLOG”><img alt="NOME DO BLOG" src="URL DA IMAGEM 3"/></a>’

É simples de usar, mas precisa atenção e criatividade. Também pode ser colocado diretamente no código fonte do seu blog, como um elemento fixo ou mesmo para modificar a imagem do título do seu blog.

Teste todas as possibilidades antes de incrementar este recurso no seu blog e lembre-se: bom gosto é fundamental.

.

20 Comentários

  1. Gostei muito do recurso imagens rotativas e acrescentei ao meu BLOG. Muito obrigado!
    Realmente dá um grande diferencial!

    Responder

  2. Vc precisa adicionar ese código acim, dentro do HTML do seu blog logo onde é definida a imagem q aparece.
    Não sei aqui como te indicar a linha do HTML a ser encontrada, mas não é difícil de descobrir.

    Responder

  3. Eu não sei como faz isso, mas já vi muito usarem e não deve ser difícil de encontrar.
    Tenta visitar o Usuário Compulsivo (tá na minha lista de links no final da página).
    Se eu achar como faz, coloco aqui pra vc num novo artigo.
    Se vc descobrir antes, me manda um e-mail q vou disponibilizar para os outros.

    Obrigado!

    Responder

  4. como fazer para (links) ao inves de imagens, ficarem em movimento (pra cima/p baixo) como faz no banner? Ai vc ta ensinando a colocar os banners em movimento certo? Eu gostaria de colocar um link ou lista de links em movimento. É possível??

    Responder

  5. Opaa tenho um blogue de musica e gostaria de usar esse banner tbm mas em vez dos parceiros queria colocar imagens tipo capa de cds em movimentos com links que redirecionassem para a postagem do cd por exemplo!Jah vi isso em outros blogs e queria ter!Me ajudaaa!rs
    Obrigado!ateh agora tem sido util!

    Responder

  6. Opa! Instalei o código no cabeçalho de nosso blog e ficou supimpa. Muito obrigado!

    Só não entendo pq as letras dos posts estão garrafais no IE (no Chrome e Firefox estão normais).

    Abraços do Dag!

    Responder

  7. Só Lembrando que também da para fazer isso com os videos; YouTube, etc..
    é só colocar o código de incorporação do Video no lugar de < a href=”URL DO SEU BLOG” >< img alt="NOME DO BLOG" src=" URL DA IMAGEM 1"/ >< / a >

    eu fiz isso no meu Blog =D
    http://hiphop-sound.blogspot.com/

    Um Abraaço e um ótimo feriado pra vc.

    Responder

  8. Ola Marcos td blz?
    Bem primeiramente muito grata por todo o conteudo aqui postado,que desde 2008 tem sido uma mao na roda,para nòs blogueiros de primeira viagem.
    È o seguinte meu querido,eu copiei e coloquei em um widget de java/html mas nao funfa.
    Simplesmente nem as imagens aparecem meu querido!
    O que eu fiz de errado ?

    Responder

  9. @Buteco,

    Acho q vc pode ter deixado alguma parte do código de fora. Certifique-se de que procedeu com tudo corretamente, principalmente verificando se os links das imagens estão corretos.

    Verifiquei aqui e funcionou perfeitamente comigo.

    Responder

  10. Marcos obrigada mais uma vez e fica ai a dica,que eu precisei de quase 1 dia inteiro,para descobrir que o frick,nao da mais chances de linkas para um site externo,e sendo assim nao vale a pena jamais comprar um host com eles.
    Eu no caso esperei 1 e vejo que fiz muito bem,em nao contratar os serviços de hospedagem.
    Existe uma ova politica de uso de imagens do frickr.
    Amigos blogueiros atençao!

    Responder

  11. Valeu, estava proucurando isso a muito tempo, so que eu nun sabia proucurar, quando eu ia proucurar eu digitava no google assim: "como trocar imagens do header automaticamente" ai eu nun ca achava. hum certo dia (hj: 06/11/10) eu estava vazendo um busca completamente diferente e achei "imagens do header rotativa no wordpress" ai eu olhei o tutorial e vi que era exatamente o que eu queria, ai porucurei no google assim: "imagens rotativas no blogger" ai, seu blog estva em primeiro e ai ja foi… so felicidade… cara estou agradecendo mais uma vez :D, e parabenizando seu blog e dizer que o SEO esta perfect!!! Valeuu!

    Responder

  12. Pingback: Artigos mais visitados do Ferramentas Blog | [ Ferramentas Blog ]

Deixe um comentário

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