dicas blog
Home » , , » Como adicionar no blog um gadget de parceiros com imagens trocando automáticas

Como adicionar no blog um gadget de parceiros com imagens trocando automáticas

3
Nesse tutorial  vou  mostrar como  adicionar  no  blog  um  gadget   de  parceiros  estilo  lista  em  movimento  que fica  trocando  automático  parecido  com  uma  slider   de  imagens,    que é  de  banners  de  parceiros.  ter parceiros  ou  firmar  parcerias  é  uma  boa  opção para  aumentar   as  visitas   do  blog  ganhar  mais espaço  e  ganhar  mais dinheiro  se  você  tiver  publicidade  no  blogger,  a  instalação  desse  gadget   é bem  simples  tendo   apenas   que  adicionar  em   seu  layout  um gadget  javascript   e  arrastar  para  o  local   onde  deseja  visualizar  os  banners  de  parceiros  ou  se  preferir você  pode  chamar  de gadget   de  parceiros  com  imagens trocando  automáticas  ou  sozinhas  bom  deixa  de  papo  e  siga  o tutorial  abaixo.

veja a demo abaixo:





Copie  o  código  abaixo e  adicione  dentro de  um gadget  java script.

<div class='botright'>
<marquee behavior='scroll' direction='left' height='60' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='4' width='300'>
<a href='http://www.meublogdicas.com.br' target='_blank'><img border='0' src='http://i.imgur.com/ftEjWU1.png'/></a>
<a href='http://www.meublogdicas.com.br' target='_blank'><img border='0' height='60' src='http://i.imgur.com/ftEjWU1.png' title='Meu Blog Dicas' width='120'/></a>
<a href='http://www.meublogdicas.com.br' target='_blank'>
<img border='0' src='http://i.imgur.com/ftEjWU1.png'/></a>
<a href='http://www.meublogdicas.com.br' target='_blank'><img border='0' src='http://i.imgur.com/ftEjWU1.png'/></a>
<a href='http://www.meublogdicas.com.br' target='_blank'><img border='0' height='60' src='http://i.imgur.com/ftEjWU1.png' width='120'/></a>
<a href='http://www.meublogdicas.com.br' target='_blank'><img border='0' height='60' src='http://i.imgur.com/ftEjWU1.png' title='Meu Blog Dicas' width='120'/></a>
<a href='http://www.meublogdicas.com.br' target='_blank'><img border='0' src='http://i.imgur.com/ftEjWU1.png'/></a>
<a href='http://www.meublogdicas.com.br' target='_blank'>
<img border='0' src='http://i.imgur.com/ftEjWU1.png'/></a>
<a href='http://www.meublogdicas.com.br' target='_blank'><img border='0' height='60' src='http://i.imgur.com/ftEjWU1.png' title='Meu Blog Dicas' width='120'/></a>
<a href='http://www.meublogdicas.com.br' target='_blank'><img border='0' height='60' src='http://i.imgur.com/ftEjWU1.png' title='Meu Blog Dicas' width='120'/></a>
<a href='http://www.meublogdicas.com.br' rel='nofollow' target='_blank'>
<img border='0' height='60' src='http://i.imgur.com/ftEjWU1.png' width='120'/></a>
</marquee>
<br/>
</div>
<!--end .right-->
<div class='clear'></div>
</div>
<script src='https://sites.google.com/site/menunomedois/ultimospostagens56/fadelist.js' type='text/javascript'></script>
<script>
$(function () {
  $('.go-top').click(function () {
    $('html,body').animate({
      scrollTop: 0
    }, 1000);
    return false;
  });
});
</script>

Tutorial Atualizado:código na caixinha abaixo para copiar!

Imagens  dos  parceiros: cor vermelha:

Links dos  parceiros: cor amarela:

Ajuste  a  largura  para encaixar  melhor no  seu  layout: procure por width='300' e altere como preferir aumentando os valores  mais  largo diminuindo você diminui  o  espaço.

Largura das  imagens dos  parceiros 120 de  largura  por 60  de  altura.

3 comentários:

  1. Olá,meu nome é gilcimar, seu blog tem sido muito importante para o crescimento do meu blog Blog Poema & Versos -http://poemaeversos.blogspot.com.br/ .... embora eu já conhecesse este moto de expor imagens tipo slide...mas peguei seu código e coloquei lá no meu blog...está lá..se puder faça-me uma visita...e seu baner vai rodar lá até que eu vá conseguindo os parceiros para o blog...muito obrigado

    ResponderExcluir
    Respostas
    1. Obrigado gilcimar pelo elogio, fico feliz que tenha usado meu blog para personalizar o seu. logo que puder vou visitar seu blog e comentar, novamente obrigado pela visita.

      Excluir
  2. Fiz o mesmo colei o seu código mas o tamanho da imagem é muito pequeno, outra coisa como faço para ter o código da loja com a qual tenho parceria? obrigado visita modernmusic-ao.blogspot.com

    ResponderExcluir