dicas blog
Home » , , » Como adicionar no blogger um gadget de parceiros com efeitos

Como adicionar no blogger um gadget de parceiros com efeitos

24
Apedido do abraão fiz esse tutorial  de gadget   de  parceiros  com  efeito neon, esse gadget  é  totalmente  personalizado  e de fácil  manuseio mesmo  você  sendo  iniciante  não  encontrara  dificuldades  para adicionar  em  seu  blogger  um  gadget  de  parceiros  com imagens  e  efeitos. ter  um gadget   de  parceiros   hoje   em  dia  para  que  um  blog  ganhe  mais  visitas  e  cresça   entre  os  outros  milhares  de concorrentes   é fundamental,  firmar  parceiras  tanto  como  listas de  links   como galeria  da  imagens bom acompanhe  os passos abaixo  e  vamos ao  tutorial.

Modelo  utilizado  aqui   no  blog.

copie o código  abaixo  e  cole  dentro  de  um  gadget javascript.

<style> #fbmbd {margin-left:10px;background:url(http://i.imgur.com/TjKYZvf.png);width:100%;padding:0;margin:0 auto;
width:292px;
    height: 496px;

} </style>


<style> #parceiros-blog a:hover {opacity:0.7;} #parceiros-blog img { border: solid 3px #333 margin-left:0px;margin-top:4px; } #parceiros-blog img:hover { border: solid 3px #03F;-webkit-box-shadow: 0 0 40px #03F, inset 0 0 40px #03F;    -moz-box-shadow: 0 0 40px #03F, inset 0 0 40px #03F;    box-shadow: 0 0 40px #03F, inset 0 0 40px #03F;margin-left:0px; } </style> <center>
<div id="fbmbd">
<div id="parceiros-blog">
 <!--começo parceiro 1--> <a title=" colmeia: O melhor dos blogs" href="http://www.meublogdicas.com.br/" target="_blank"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--fim parceiro 1--> <!--começo parceiro 2--> <a rel="nofollow" title="todos os blogs juntos.clique e divirta-se! " href="http://www.meublogdicas.com.br/" target="_blank"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--final parceiro 2--> <!--começo parceiro 3--> <a rel="nofollow" title=" calango do cerrado" href="http://www.meublogdicas.com.br/" target="_blank"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!-- final  parceiro 3--> <!--começo  parceiro  4--> <a rel="nofollow" title=" cotovelo de formiga" href="http://www.meublogdicas.com.br/" target="_blank"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--final parceiro  4-->
<!--começo parceiro  5--> <a title="ah tabom" href="http://www.meublogdicas.com.br/" target="_blank"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--fim parceiro 5--> <!--começo parceiro 6--> <a rel="nofollow" title="Cutuca não" href="http://www.meublogdicas.com.br/" target="_blank"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--fim  parceiro 6-->
<!--começo  parceiro  7--> <a title=" Insôônia" href="http://www.meublogdicas.com.br/" target="_blank"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--fim parceiro 8--> <!--começo parceiro 9--> <a rel="nofollow" title="Resto Do Nada " href="http://www.meublogdicas.com.br/" target="_blank"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--final  parceiro  9--><a title=" parceiros" href="http://www.meublogdicas.com.br/" target="_self"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--fim parceiro 10--> <!--começo  parceiro 11--> <a rel="nofollow" title="parceiros " href="http://www.meublogdicas.com.br/" target="_self"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--final parceiro  11--> <!--começo parceiro  12--> <a rel="nofollow" title=" parceiros" href="http://www.meublogdicas.com.br/" target="_self"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--final parceiro  12--> <!--começo parceiro 13--> <a rel="nofollow" title=" parceiros" href="http://www.meublogdicas.com.br/" target="_self"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--final parceiro  13-->
<!--começo parceiro  14--> <a title=" parceiros" href="http://www.meublogdicas.com.br/" target="_self"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--fim parceiro 14--> <!--começo parceiro  15--> <a rel="nofollow" title="parceiros" href="http://www.meublogdicas.com.br/" target="_self"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--fim  parceiro  15-->
<!--começo parceiro  16--> <a title=" parceiros" href="http://www.meublogdicas.com.br/" target="_self"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--fim parceiro 16--> <!--começo parceiro  17--> <a rel="nofollow" title="parceiros" href="http://www.meublogdicas.com.br/" target="_self"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--fim parceiros 17-->
<!--começo parceiro 18-->
<a title=" colmeia: O melhor dos blogs" href="http://www.meublogdicas.com.br/" target="_blank"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--fim parceiro 18--> <!--começo parceiro 19--> <a rel="nofollow" title="todos os blogs juntos.clique e divirta-se! " href="http://www.meublogdicas.com.br/" target="_blank"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--final parceiro 19--> <!--começo parceiro 20--> <a rel="nofollow" title=" calango do cerrado" href="http://www.meublogdicas.com.br/" target="_blank"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!-- final  parceiro 20--> <!--começo  parceiro  21--> <a rel="nofollow" title=" cotovelo de formiga" href="http://www.meublogdicas.com.br/" target="_blank"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--final parceiro  21-->
<!--começo parceiro 22--> <a title="ah tabom" href="http://www.meublogdicas.com.br/" target="_blank"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--fim parceiro 22--> <!--começo parceiro 23--> <a rel="nofollow" title="Cutuca não" href="http://www.meublogdicas.com.br/" target="_blank"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--fim  parceiro 23-->
<!--começo  parceiro  24--> <a title=" Insôônia" href="http://www.meublogdicas.com.br/" target="_blank"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--fim parceiro 24--> <!--começo parceiro 25--> <a rel="nofollow" title="Resto Do Nada " href="http://www.meublogdicas.com.br/" target="_blank"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--final  parceiro  25--><!--começo  parceiro  26--><a title=" parceiros" href="http://www.meublogdicas.com.br/" target="_self"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--fim parceiro 26--> <!--começo  parceiro 27--> <a rel="nofollow" title="parceiros " href="http://www.meublogdicas.com.br/" target="_self"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--final parceiro  27--> <!--começo parceiro  28--> <a rel="nofollow" title=" parceiros" href="http://www.meublogdicas.com.br/" target="_self"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--final parceiro  28--> <!--começo parceiro 29--> <a rel="nofollow" title=" parceiros" href="http://www.meublogdicas.com.br/" target="_self"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--final parceiro  29-->
<!--começo parceiro  30--> <a title=" parceiros" href="http://www.meublogdicas.com.br/" target="_self"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--fim parceiro 30--> <!--começo parceiro  31--> <a rel="nofollow" title="parceiros" href="http://www.meublogdicas.com.br/" target="_self"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--fim  parceiro  31-->
<!--começo parceiro  32--> <a title=" parceiros" href="http://www.meublogdicas.com.br/" target="_self"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--fim parceiro 32--> <!--começo parceiro  33--> <a rel="nofollow" title="parceiros" href="http://www.meublogdicas.com.br/" target="_self"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--fim parceiros 33-->
</div></div>
</center>


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


Ajuste a  largura da cor do  fundo para os lados esquerda e direita.
width:292px;
Ajuste a largura  para  baixo de   acordo com  o  numero  de parceiros  janelas.
height: 496px;

De  um CTRL+F para facilitar  a busca  das  partes indicadas   abaixo dentro  do código já  no  gadget javascript.

Os parceiros  estão  marcados tipo parceiro 1 parceiro 2 etc. para facilitar a  busca.

Para trocar  a cor da   borda solida #03F

Para trocar  a cor da  borda neon são  6 vezes  #03F

Caso   o  gadget fique  um  pouco  desalinhado   no  seu template ajuste  a  margem
margin-left:10px;
esquerda  ou  direita  aumentando os  valores  ou  diminuindo.

São 32 janelas de  parceiros.

De  um  CRTL+F e procure  pela  imagem  abaixo altere  pela do parceiro.

http://i.imgur.com/b4crV7N.png

Procure   pelo  URL e  altere  pelo  do  parceiro.

http://www.meublogdicas.com.br/ 

Passe  o  mouse  por cima  dos botões  de  um CTRL+F no gadget e altere  os textos  a serem   exibidos em cada  parceiro.

Para trocar  a cor do  fundo procure  pela  imagem  no  começo  do  código  e  altere  pela  imagem cor  preferida.

http://i.imgur.com/TjKYZvf.png

Para diminuir  o numero  de  parceiros janelas retire o código começo  e final de cada  parceiro  como  no  exemplo  abaixo marcado  em  vermelho.

<!--começo parceiro  33--> <a rel="nofollow" title="parceiros" href="http://www.meublogdicas.com.br/" target="_self"><img border="0" src="http://i.imgur.com/b4crV7N.png" style="margin-right:0px;" alt="Icon"/></a> <!--fim parceiros 33-->  

Tamanho das  imagens dos parceiros 67 de largura 53 altura,você  pode  escolher  outros tamanhos fica  a seu critério.

24 comentários:

  1. BOA NOITE BROTHER !! EU GOSTEI MUITO DO SEU BLOG!!! EU CURTI VARIAS DICAS. ATÉ ENTÃO EU NÃO CONHECIA ELE !!Mas vamos a duvida, eu to querendo botar os comentarios do facebook no blog, eu vi que vc tem uma postagem relacionada sobre o assunto eu fiz o teste e deu certo. Mas na verdade eu gostaria de aplicar o outro formato de comentarios por exemplo a desse blog pra vc ter uma ideia:http://demoniacsoul.blogspot.com.br/2012/07/0-contos-de-terror-o-pequeno-anjo-caido.html ja revirei varios códigos mas não dão certo, ve se vc quebra esse galho pra mim. Um abraço:http://bettowertcontosefatosdeterror.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ele usa os dois sistemas nesse caso, é só você adicionar o sistema de comentários do facebook no blog e não o estilo de comentários blog e facebook juntos o do blog você já tem basta pesquisar no Google (como adicionar o sistema de comentários do facebook no blog) disse jeito ira ficar assim os dois. agora do jeito que esta ali tudo preto só um programador mas vamos fazer o seguinte, me da uns dias que vou tentar criar esse sistema para você,aguarde alguns dias se eu conseguir eu posto para você nos próximos dias.
      Tipo acho que você quer ter os dois sistemas de comentários abertos no blog pagina é isso ?

      Excluir
    2. boa tarde brother!! obrigado pela atenção! Eu fiz o seguinte eu peguei o aplicativo do face e apliquei o código no meu blog claro que tive que botar o código dentro de outro porque se não a maioria de comentarios iria expandir o meu blog né. Mas eu queria aplicar aquele formato como vc deve ter visto,dentro das postagens como o da quele blog que eu te mostrei. Sim mano eu quero os dois sistemas ativados. vou ficar a sua espera qualquer coisa vc prende o grito pra mim ta!!!! uma abraço:http://bettowertcontosefatosdeterror.blogspot.com.br/

      Excluir
  2. bom dia brother!! essa noite fui um sufoco eu visitei milhares de blogs ajuda e não tive nem um resultado,a maioria dos códigos dão erro ou nem funcionam ai eu voltei para o seu código que pelomenos ele dava conta do recado ai eu comecei a martela em cima dele com varios testes e vc não vai acreditar deu certo o que eu queria erá super simples o modo: simplesmente eu anulei o primeiro código e no terceiro eu também tirei mas eu apliquei o segundo código do aplicativo do face e funcionou corretamente. nossa meu essa foi de matar em depois vc va la no meu blog pra ver como ficou tá !!! a e mais uma coisa nesse segundo código da para aplicar um outro que não expande os comentarios da postagem mas isso eu não vou aplicar.http://bettowertcontosefatosdeterror.blogspot.com.br/

    ResponderExcluir
  3. bom meu essa parte ja esta quase finalizada, só tem mais uma coisa os comentarios estão se repetindo em todas as postagens !!! como vamos sair dessa em???? http://bettowertcontosefatosdeterror.blogspot.com.br/

    ResponderExcluir
  4. sou eu de novo mano !! ja resolvi o problema de duplicação de comentarios nas postagens que estava ocorrendo !!!

    ResponderExcluir
    Respostas
    1. Deu trabalho em mas que bom que conseguiu fico feliz,essa sua descoberta vai ser importante para outros blogueiros que passarem por isso vou anotar obrigado.

      Excluir
  5. Respostas
    1. Obrigado abraao fico feliz que tenha gostado.

      Excluir
  6. Meu blog bugo tudo cara quando coloquei, não tinha visto agora que vi vim falar, em todo lugar que clico aparece uma janela de logar no facebook.
    Quando tirei volto normal.

    ResponderExcluir
    Respostas
    1. Não sei o que pode estar dando errado, tente colocar novamente e veja se da certo. Pode ser que os códigos estejam entrando em conflito.

      Excluir
  7. Tipo to tendo que colocar 13 parceiros para aparacer 12, sempre um a mais do tanto que eu quero, é assim mesmo?

    ResponderExcluir
    Respostas
    1. Não é para ser assim, mas dei uma olhada e acho que você já resolveu!

      Excluir
  8. Respostas
    1. Que bom que deu tudo certo abraao, fico feliz obrigado pela visita.

      Excluir
  9. boa tarde brother !!! sou eu de novo. vc se lembra sobre o lance dos comentarios do face no blog ta numa boa!! mas tem uma coisa que está me intrigando. o sistema do face só aparece se a postagem não tiver nem um comentario do sistema do blog e no caso de quando o sistema do face esta la e vc comentar pelo os comentarios do blog o do face some!! se possivel da um pulo no meu blog pra vc ver isso, va numa postagem com comentarios e na outra que não tem comentarios pra vc ter uma ideia do que eu estou falando. Eu espero por uma dica sua do que eu devo fazer! http://bettowertcontosefatosdeterror.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ola betto bom acredito que o real problema é o local que você colocou o sistema de comentários do faceboook, ele esta entrando em conflito com o do blog, e isso gera esse problema chato que esta incomodado você tente colocar o código dos comentários um pouco mais abaixo ou acima do local que você adicionou, e faça os testes e vamos ver como fica!

      Excluir
  10. boa tarde brother !! eu fiz os testes que vc me falou mas não deu certo !! como vc fez pra esse teu atual funcionar?? Não o da sua primeira dica! mas sim esse que esta nessa postagem !!!!

    ResponderExcluir
    Respostas
    1. Eu coloquei abaixo dos marcadores, é só procurar no HTML marcadores, ou o que estiver escrito no seu blog, e ira ver um código no final dele você vera uma div abaixo dela eu coloquei o código do facebook somente a parte que é responsável pelo local onde vai aparecer os comentários, onde vai o ID numero entendeu?

      Isso depende em alguns templates funciona em alguns locais em outros não funciona tem que testar em vários locais ou trocar de template.

      Excluir
  11. valeu brother !! mas isso ta dando muita dor de cabeça !! ai eu apliquei um outro modo abaixo das postagens fica mais simples !! depois vc da um pulo la no meu blog pra ver como ficou !!http://bettowertcontosefatosdeterror.blogspot.com.br/

    ResponderExcluir
  12. Obrigaado éra oque estava procurando a um tempo
    abrão aplico no header curioso que eu vi no blog dele e axei interessante queria fazer algo parecido rsrs :))

    ResponderExcluir