19 de abril de 2012

14

como criar Banner Rotativo com imagens



Neste Tutorial ensinarei a organizar os Banners de parceria de forma mais fácil, e que não ocupa muito espaço em seu Blog...



Bom pessoal, vamos agora criar o nosso banner rotativo
Veja o seguinte Exemplo de um banner rotativo, observe que o efeito esta em direção a direita, que eu mesmo coloquei, e você pode também escolher a direção desejada também...

















Primeiro:
Esse código a baixo será o nosso banner rotativo, e vou destacar o código aí pra você entender melhor. Agora copie esse código e em seguida no painel do seu Blog clique em Design depois em Clique em Adicionar um Gadget e escolha a opção HTML/JavaScripts, e cole o código lá em conteúdo.


<marquee direction=" left " scrollamount="2" width="400" height="130" behavior=" Scroll " onmouseover="this.stop()" onmouseout="this.start()">

<a href=" LINK DO SITE AQUI " target="_blank"> 
<img 
src=" http://3.bp.blogspot.com/-vpbm8myaZng/T5A1xPdCz3I/AAAAAAAAAYU/mBvDrANX1zY/s1600/uyygf.png " 
title="TITULO"
height="80" width="200"/>
</a>


<a href=" LINK DO SITE AQUI " target="_blank">
<img
src="
http://3.bp.blogspot.com/-vpbm8myaZng/T5A1xPdCz3I/AAAAAAAAAYU/mBvDrANX1zY/s1600/uyygf.png
title=" TITULO 
height="80" width="200"/> 
</a>

<a href=" LINK DO SITE AQUI " target="_blank">
<img
src="
http://3.bp.blogspot.com/-vpbm8myaZng/T5A1xPdCz3I/AAAAAAAAAYU/mBvDrANX1zY/s1600/uyygf.png
title="  TITULO  
height="80" width="200" /> 
</a>

<a href=" LINK DO SITE AQUI " target="_blank">
<img
src="
http://3.bp.blogspot.com/-vpbm8myaZng/T5A1xPdCz3I/AAAAAAAAAYU/mBvDrANX1zY/s1600/uyygf.png
title="  TITULO  
height="80" width="200" /> 
</a>

<a href="LINK DO SITE AQUI" target="_blank">
<img
src="
http://3.bp.blogspot.com/-vpbm8myaZng/T5A1xPdCz3I/AAAAAAAAAYU/mBvDrANX1zY/s1600/uyygf.png
title="  TITULO  
height="80" width="200" 
</a>
</marquee>



Segundo:
Vamos agora pra a alteração do código
com forme o destacado, essa parte em vermelho é a onde fica os efeitos:

<marquee direction=" left " scrollamount="2" width="400" height="130" behavior=" Scroll " onmouseover="this.stop()" onmouseout="this.start()">

Altere o efeito:
Direção

em direction você alterará a direção em que o banner será movimentado, para cima: up ,  para Baixo: down , para esquerda:  left ou para Direita: right
nesses seguintes valores você colocará entre aspas direction="left"

Velocidade:
em scrollamount você altera aquele valor que estar perto dele, pois aquele valor significa a velocidade, quanto maior o numero mais rápido ficará.

Altere tamanho onde a animação do banner ficará:
em  width="400" altere a largura de onde ficará aparecendo a animação
em  height="130" a altura de onde ficará aparecendo a animação

behavior : significa o tipo de animação que será mostrada, tem três tipos de valore que você pode usar, e são:

  • Scroll a rotação dele passa direto

  • Slide a e o slide ele só se movimenta uma vez e depois para

  • Alternate a fica alternando de um lado pra outro, ou seja, indo de um lado pra outro

Agora em relação a parte que eu destaquei em Azul, é a parque em que ficará o Banner

<a href=" LINK DO SITE AQUI " target="_blank"> 
<img 
src=" http://3.bp.blogspot.com/-vpbm8myaZng/T5A1xPdCz3I/AAAAAAAAAYU/mBvDrANX1zY/s1600/uyygf.png " 
title="TITULO"
height="80" width="200"/>
</a>
Essa segunda parte destacada, você vai ajustar a imagem, em  href=" LINK DO SITE AQUI "  que você vai colocar o link do site: 

src=" Você vai colocar a URL da sua imagem, vaia trocar pela sua URL:

src=" http://3.bp.blogspot.com/-vpbm8myaZng/T5A1xPdCz3I/AAAAAAAAAYU/mBvDrANX1zY/s1600/uyygf.png " 

Agora aqui você vai alterar o titulo da imagem, pra quando passar o mouse sobre a imagem aparecerá o titulo que você dará a imagem.
em:  title="TITULO"  em Anuncie: Clique aqui você colocara o seu titulo.

Você pode também ajustar a imagem de acordo com o tamanho que fique adequado com o seu site:

height="80" o valor representa a altura, é só você alterar o número 80
width="200" o valor representa a largura, é só substituir  o número 200

Pronto pessoal é só isto, espero ter lhe ajudado. queria pedir que comentem sobre essa dica
e também participem seguindo o meu Blog. Obrigado

14 comentários:

  1. Tem como adcionar outro efeitos ao invés destes tres?

    ResponderExcluir
  2. Bem bacana estes efeitos eu to usando no sistema de banner do meu blog vlw

    ResponderExcluir
  3. muito bom post, só queria saber como fazer parar o banner rotativo quando posiciona o mouse em cima. agradeço desde ja.

    Email:Kwaykaa@gmail.com

    ResponderExcluir
  4. Deu certinho... estava procurando algo assim... uma pena q ele alterou o meu layout e não vou poder usar... obrigada pela dica :)

    ResponderExcluir
  5. é possível adicionar um banner rotativo (foto panorâmica) na imagem de capa do facebook?

    ResponderExcluir
  6. Bom Dia!
    Amigo, fico até sem graça de perguntar, mas onde é que eu colo a foto em GIF ( do meu anúncio) que já tenho ? Onde é que ela entra?
    Como é o passo-a-passo para montagem do código a ser inserido ?
    Desculpa a minha burrice, mas,um dia aprendo,se Deus quiser!

    ResponderExcluir
  7. Ficou muito massa e agora uso frases desenhos tudo q a imaginação manda. muito obrigado

    ResponderExcluir
  8. Foi muito útil , só tive um problema, apliquei no meu blog, mas ele precisa ser o ultimo gadget da sidebar, pois se não toda a sidebar rola com ele. Mas, o código funciona.

    Obg!

    ResponderExcluir
  9. oi colega. valeu mesmo.
    Será que é possível alterar a velocidade?
    Talvez colando o código no flash? num sei...
    será que v. pode orientar?

    brigado

    Fred
    fredigital@gmail.com

    ResponderExcluir
  10. Muito legal a dica
    ----------------------------------------
    Conheçam o site de dicas, códigos e hospedagem www.guiadohost.com

    ResponderExcluir
  11. AMIGO COMO FAÇO P FICA UMA FOTO AO LADO DA OUTRA N ESTOU CONSEGUINDO ...TIPO P FICA EM FILEIRA UMA APOS A OUTRA LADO A LADO COMO SERIA ?

    ResponderExcluir
  12. Olá,

    Escrevo porque tenho uma dúvida. No meu blog, www.revistapulpito.com.br, eu utilizo um código de banner rotativo que, por acaso, peguei aqui mesmo. O problema é que estou com facilidade em mexer no código para colocar os banners dos meus anunciantes, mas o fato é que fica aparecendo uma chavinha de edição, do lado esquerdo dos banners, e eu não sei por quê.


    Desculpe-me escrever por aqui, mas não encontrei outro lugar.

    Obrigado.

    ResponderExcluir
  13. Tenho banner rotativo em eu blog: http://www.blogtopsertanejo.com.br/ mas quando vou compartilhar algum post no Facebook ele não aparece a imagem no post em si e sim as imagens do banner, tem como alterar ?

    ResponderExcluir

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook