Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

24/09/2013

Tutorial - Gadget de parceiros ou afiliados (imagens lado a lado)

Alados, a ideia para este turorial surgiu quando a Francine do blog "My Queen Side" pediu o meu auxílio para fazer uma espécie de imagens em grade com links para colocar seus "Autores Parceiros", que seria o gadget que muitos conhecem como "Afiliados" ou "Parceiros". Isso nada mais é do que colocar várias imagens diferentes uma ao lado a outra e depois seguir com mais linhas de imagens, cada uma com um link diferente. Não entendeu? Bom, o que vamos aprender a fazer hoje é isso aqui:




Gostou? Para ter um, basta seguir com muita atenção o tutorial abaixo, espero que seja útil para vocês!

Gadget de parceiros ou afiliados (imagens lado a lado):

Fazer o gadget que eu mostrei acima é tão fácil que qualquer principiante pode fazer, mas você terá que seguir as minhas dicas à risca. Já vou avisando que há uns detalhes que podem estragar seu gadget, caso você não dê atenção a eles. Mas chega de conversa, vamos ao tuto!

Preparando as imagens:

Antes de tudo, você precisa ter as imagens de cada link que você colocará. Só que elas não podem ser em qualquer dimensão, tem que ter de um tamanho suficiente para que todas as imagens somadas caibam na sua sidebar com uma pequena margem de sobra.

Resumido: divida a largura da sua sidebar pelo número de imagens que você quer em cada linha, menos uma margem de 5 ou 10 pixels. O resultado é a largura que cada imagem sua terá.

Por exemplo: se você tem uma sidebar de 300px de largura e quer colocar duas imagens em cada linha, você terá que fazer imagens com a largura de 145px cada. Agora, se quiser três imagens, coloque cada uma com 95px.

Sei que é chato fazer cálculo matemático, mas se a largura não couber você não vai ter seu gadget perfeito. Ah, quanto a altura não se preocupe! A imagem pode ter a altura que você quiser.

Hospedando as imagens:

Depois de prontas as imagens, hospede em um servidor de sua confiança. Se quiser saber quais eu recomendo, acesse este link e veja uma lista com os melhores!

Montando o código:

Para montar este gadget, usaremos um código simples de colocar imagens por HTML. Isso mesmo, não há mistério algum! Então, entre no seu Painel do Blogger e clique em "Layout", depois clique em "Adicionar um Gadget" no lugar onde você colocará o gadget. Na janela poup-up que abriu, escolha a opção "HTML/JavasScript".
Se quiser, escreva um título para o seu gadget (não é necessário). No quadrado maior, vamos colocar o seguinte código:

<br /><a href="http://SEU_LINK1" target"_blank"><img src="http://SUA_IMAGEM1"/></a>

Sendo que você deve substituir o SEU_LINK1 pelo primeiro link que você quer colocar, e o SUA_IMAGEM1 pela primeira imagem. Ambos os endereços precisam começar com http://, ou seu gadget não funcionará do jeito certo.
Para colocar uma imagem ao lado dela, é só dar um espaço e colocar o mesmo código, só que trocando os links. Abaixo, coloquei um exemplo com três imagens na linha:

<br /><a href="http://SEU_LINK1" target"_blank"><img src="http://SUA_IMAGEM1"/></a> <a href="http://SEU_LINK2" target"_blank"><img src="http://SUA_IMAGEM2"/></a> <a href="http://SEU_LINK3" target"_blank"><img src="http://SUA_IMAGEM3"/></a>

Se fosse com duas fotos, pararia no "SUA_IMAGEM2"/> </a>

Para adicionar uma nova linha, tudo o que você precisa fazer é apertar a tecla "Enter" e iniciar a nova linha de códigos com <br />. Exemplo:

<br /><a href="http://SEU_LINK1" target"_blank"><img src="http://SUA_IMAGEM1"/></a> <a href="http://SEU_LINK2" target"_blank"><img src="http://SUA_IMAGEM2"/></a> <a href="http://SEU_LINK3" target"_blank"><img src="http://SUA_IMAGEM3"/></a>
<br /><a href="http://SEU_LINK4" target"_blank"><img src="http://SUA_IMAGEM4"/></a> <a href="http://SEU_LINK5" target"_blank"><img src="http://SUA_IMAGEM5"/></a> <a href="http://SEU_LINK6" target"_blank"><img src="http://SUA_IMAGEM6"/></a>

E repita o mesmo processo para cada linha que você quiser adicionar. Para centralizar o gadget, escreva o código entre as tags <center></center>. O código de um gadget igual ao que eu coloquei no início da postagem (com nove imagens) ficaria da seguinte forma:

<center><br /><a href="http://SEU_LINK1" target"_blank"><img src="http://SUA_IMAGEM1"/></a> <a href="http://SEU_LINK2" target"_blank"><img src="http://SUA_IMAGEM2"/></a> <a href="http://SEU_LINK3" target"_blank"><img src="http://SUA_IMAGEM3"/></a>
<br /><a href="http://SEU_LINK4" target"_blank"><img src="http://SUA_IMAGEM4"/></a> <a href="http://SEU_LINK5" target"_blank"><img src="http://SUA_IMAGEM5"/></a> <a href="http://SEU_LINK6" target"_blank"><img src="http://SUA_IMAGEM6"/></a>
<br /><a href="http://SEU_LINK7" target"_blank"><img src="http://SUA_IMAGEM7"/></a> <a href="http://SEU_LINK8" target"_blank"><img src="http://SUA_IMAGEM8"/></a> <a href="http://SEU_LINK9" target"_blank"><img src="http://SUA_IMAGEM3"/></a></center>

Entendeu? Em cada linha, coloque o código da imagem separado do outro por espaço; e para formar uma nova linha dê "Enter" e coloque <br /> na frente.
Quando tudo estiver pronto, clique no botão laranja "Salvar". Pronto, você já tem o seu gadget!

Espero que tenha sido útil! Continue ligado no DSA, teremos muitas postagens boas nos próximos dias!!!

Beijinhos Alados,
7 Comentários
Comentários

7 comentários:

  1. Ótimo tutorial! <3 Obrigada por me ajudar, flor! Fiquei bastante feliz com suas dicas.
    Beijos!!!!

    ResponderExcluir
  2. Tava mesmo precisando de um gadget assim. Poso colocar ele em outro lugar além do sidebar, por exemplo na página de parcerias?

    ResponderExcluir
    Respostas
    1. Claro, sem problemas! Pode ser usado em qualquer área, inclusive em páginas e postagens.

      Excluir
  3. Obrigada Sheila. Eu estava pensando em como fazer isso. Você sempre me ajuda muito com os seus tutoriais. Bjus!

    ResponderExcluir
  4. ótimo tutorial!!! Estava procurando, você explicou muito bem, muito obrigada ><

    ResponderExcluir
  5. Suas dicas são muito fáceis.
    Muito obrigado!

    http://www.arrasandojm.com/

    ResponderExcluir
  6. A imagem não apareceu, mas deu super certo lá no blog. adorei. muito obrigada por esse post. beijos

    Taynara Mello | Indicar Livros
    http://www.indicarlivros.com/

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados