Imagens rotativas

Hospedagem para Blogs

Exatamente como está na barra lateral aqui do [ FerramentasBlog.com ], para passar os banners do parceiros, vamos mostrar. Muita gente me escreve pedindo para explicar como fazer as imagens passarem, mas muitos não viram que já tem um tutorial aqui que ensina exatamente isso e basta adaptá-lo. Veja abaixo a adaptação e como usar.

 

Mestre Blogger Plano Beta Image Hosted by Redk

 

Como pode ver acima no modelo repetido dos meus banners parceiros, esse é o feito esperado.

Ensinamos como criar textos em movimento no artigo “Texto animado – Mais movimento no Blog”. A técnica e os códigos são exatamente os mesmos para qualquer coisa, no caso, imagens. Veja o Código:

 

<marquee direction="right" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="5">

<img src=”URL da Imagem 1” border="0" />

<img src=”URL da Imagem 2” border="0" />

<img src=”URL da Imagem 3” border="0" />

</marquee>

 

Para o que está indicado em azul, se trocar “rigth” por “left”, você pode mudar a direção. Se quiser ver outras direções, veja o artigo citado acima.

Você ainda pode colocar outras imagens, quantas quiser. Vale lembrar que é bom colocar imagens do mesmo tamanho para não ficar estranho.

Se não souber onde pode colocar esse código para virar um gadget da barra lateral, veja o artigo “Onde colar código HTML” e, para saber mais sobre esses códigos HTML para criar links, imagens e edição de textos, veja também o artigo “Códigos HTML para editar Blog”. Nada impede, como aqui neste artigo, que o código seja colocado dentro de textos também.

 

Para as imagens ficarem na mesma linha, certifique-se de que não há códigos de quebra de linha como “<br>” ou “<br/>” ou “<p></p>”.

 

Não deixe de ler outros artigos importantes que podem te ajudar de assuntos semelhantes:

15 Comentários

  1. Acho esse o melhor jeito de se colocar parceiros sem comprometer a estética do Site/Blog o meu eu tirei do seu tutorial ‘Textos Animados’ só que faço diferente ao invés de hospedar a imagem já coloco direto o código HTML do banner dentro do código de ‘Textos animado’ só retiro a parte da Fonte (Tipo de Letra),achei mais fácil do que ter que hospedar imagem por imagem.

    ABRAÇOS: http://www.clinper.com

    Responder

  2. Então eu fiz todo o procedimento, deram alguns erros mais eu consegui resolve, só que quando eu oLHA o blog pelo IE, fica dando uma imagem “x” no meio dos banners, já no firefox fica perfeito, como eu posso resolver?

    Responder

  3. meu amigo esse seu blog é maravilhoso muita informação valiosas quanto mais a gente le mais da vontade de saber mais vc esta de parabéns é certo que indicarei pra varios amigos que esta começando como eu um abraço .

    Responder

  4. quando eu copio os codigos para insersão de novos url de imagens no blog ele só aparece 3 imagens, já tentei de tudo como vc fez? não achei nada no codigo que vc me deu que comprometa esse calculo, por favor me dá um help
    abraços
    Luci
    Ps. Vcs são d+ valeu muiiitooo apena ter me inscrito em sua newsletter..

    Responder

  5. Remir

    Basta vc adicionar o código da mais imagens.
    Aqui no código só coloquei 3 linhas de códigos de imagem, se você adicionar mais linhas, terá mais imagens rolando na tela. Só isso!

    Obrigado por acompanhar o blog e que bom que podemos ajudar você!

    Responder

  6. Poxa valeu a muito tempo, procurava essa dica, agora poderei arrumar um cantinho qualquer para colocar banner de parceiros e outrar publicidades.
    Forte Abraço

    Responder

  7. Muito bom. me quebrou um galhao até que eu consiga isso em flash. Valeu. Mas queria tirar uma duvida.. tem como eliminar esse espaço que fica entre uma sequencia e a outra? se tem, como faço?

    Responder

  8. Vale video,

    não entendi bem o que seria esse “espaço”. Mas acredito que, se for o espaço que fica entre duas aplicações do mesmo código, então não sei como tirar ou diminuir.

    Responder

  9. Resolvido depois de uma sugestão simples da minha mulher “Porque você não repete a sequencia das fotos várias vezes” repeti todo o conjunto de códigos das 15 imagens inseridas umas 3 vezes e pronto. O intervalo ainda está lá mas demora pra chegar nele. rs E fiz no front page, funciona direitinho no I.E. e firefox. Vi em outros foruns que outras pessoas tiveram problema para firefox. então vou descrever como fiz… No front page mesmo, criei uma tabela de 1 linha e uma coluna e depois fui em “inserir , avançado, HTML. no quadro que abríu coloquei exatamente o marquee fornecido aqui; Depois foi só aumentar a sequencia dos códigos de inserção das imagens. Pronto tudo funcionando belezinha. Abçs

    Responder

  10. gostei muito deste tutorial.. ficou perfeito esse código junto com widget apenas na p´pagina de apenas um marcador.. obrigado pelas dicas.. seu blog.. está sendo muito útil.. nesse começinho de blog pra mim..

    Responder

  11. Marcos Lemos
    Muito mas muito grata mesmo por todas as dicas e sua boa vontade em responder as minhas duvidas.
    Você não tem ideia o quanto tem me ajudado e ajudado inconscientemente ao asilo de cegos,para onde eu dou 50% da renda que recebo,de cada blog que monto.
    Nós vibramos por você meu amigo!
    Muito mas muito grata mesmo por tudo meu caro!
    Taillard sua fã inveterada

    Responder

  12. Pingback: Trocando imagens automaticamente | [ Ferramentas Blog ]

  13. Excelente tutorial. Simples, fácil e rápido. Para nós, leigos em html, foi o melhor que consegui encontrar para colocar imagens em movimento.
    Parabéns, Marcos Lemos, tive alguma dificuldade no inicio, mas depois usei as informações de textos animados e troquei os textos pelas imagens.
    Foi só eliminar as quebras de linhas, no meu caso a url da imagem terminava com a largura, o resto eliminei e deu muito certo. coloquei várias imagens apenas acrescentando mais urls.
    Preciso agora de um tutorial para por imagens das postagens em uma janela que troca as imagens automaticamente e abre a postagem com um clique.
    Se souber, por favor me retorne.

    muito grato

    Responder

Deixe um comentário

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