[Blogger - Gadgets] - Como colocar um banner de parceria no seu blog

Na blogosfera é bem comum a troca de banners entre blogs — principalmente entre blogs iniciantes ou blogs de humor. A troca de banners foi um meio que os blogueiros encontraram para conseguir atrair mais visitas para seus blogs, e em alguns casos funciona muito bem. Porém, em outros casos a troca de banners pode apenas poluir o blog, mas isso não vem ao caso. Neste artigo eu mostrarei como adicionar uma caixinha com o seu banner — também conhecida como: "caixinha link-me" — na sidebar (barra lateral) do seu blog, para que as pessoas que tenham interesse possam divulgá-lo!


Antes de mais nada você precisa ter o seu banner, é claro. Você pode criá-lo utilizando qualquer programa de edição de imagens que preferir, tais quais: Photoshop, PhotoScape e até mesmo o Paint. Que eu saiba, o tamanho padrão de um banner de parceria é 120x60 pixels, mas o tamanho pode variar caso o blog que vá divulgar o seu banner, tenha um template personalizado ou preferência por um tamanho específico.

Adicionando o banner de parceria à sidebar do blog


1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Layout > Adicionar um Gadget > HTML/JavaScript.


2. Adicione o código mostrado abaixo dentro do campo de conteúdo do gadget.

<div style="text-align:center;">
<img src="link-da-imagem" border="0" alt=""/>
<br />(120x60)<br/>
<textarea cols="20" rows="3" onclick="this.select()">
&lt;a href="link-do-seu-blog" target="_blank" title="nome-do-seu-blog"&gt;&lt;img src="link-da-imagem" border="0" alt="nome-do-seu-blog"/&gt;&lt;/a&gt;
</textarea>
</div>


3. Altere somente as partes que foram destacas em colorido, modificando de acordo com o que é pedido. Veja as explicações abaixo:
  • link-da-imagem: link da imagem do seu banner;
  • link-do-seu-blog: endereço (URL) do seu blog;
  • nome-do-seu-blog: nome do blog.

Se quiser, você pode mudar também o tamanho da caixa do código, alterando os valores das tags "cols" e "rows", como ilustra a imagem abaixo.


4. Clique no botão Salvar e vá no seu blog para ver se o banner está aparecendo corretamente.

INFORMAÇÃO: você pode adicionar o código em qualquer lugar que aceite HTML, como por exemplo, artigos, páginas estáticas e até mesmo direto no template, não precisa ser necessariamente dentro do gadget HTML/JavaScript.

Abaixo, você pode conferir um exemplo de como ficará o banner após instalado no blog.

Banner de parceria do Bloggando Na Web
(120x60)

Repare que ao clicar na caixa do código, o texto é selecionado automaticamente, isso serve para facilitar a cópia do mesmo, evitando que a pessoa que irá divulgar seu banner precise selecionar o código. Então, ela só terá que clicar com o botão direito do mouse sobre o código e escolher a opção "Copiar".

Atualização — 04.08.2011 às 01h45
O artigo foi atualizado pare refletir mudanças realizadas no painel de controle da plataforma Blogger.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 27 comentários neste artigo!

  1. ótimoooo, ajudou muuito, problema resolvido!!

    obrigado !!!

    ResponderExcluir
  2. Oi Igor!

    Tudo bom?

    Eu estava super perdida para colocar um banners no meu blog mas sua explicação foi a melhor que eu encontrei.
    Consegui fazer certinho.
    Espero sua visita no meu blog ok.

    Ainda tem coisas que preciso aprender, mas ta dando pra levar.

    Veja la.
    abraços,

    Giro do Sucesso.

    ResponderExcluir
  3. Bom, aconteceu com o banner que você colocou de teste o mesmo que no meu: por ser no formato .png, ele não fica com link. O problema é o formato mesmo, né? Então vou ter que passar pra gif ou jpg pra usá-lo linkado?

    ResponderExcluir
  4. Sob-incognita: o banner de exemplo que é colocado acima da caixa do código, não está com link, pois é apenas uma demosntração para o leitor. E como ele estará no seu blog, é desnecessário você linká-lo. Porém, quando o leitor copiar o código e colocar no blog dele, o seu banner apareceá com link!

    ResponderExcluir
  5. Valeu. Gostei da resposta rápida, muito bom. Ah, e parabéns pelo blog. É o que mais gostei desses de dicas, se tratando tanto de visual quanto delas literalmente falando. Espero que aumente seu leque das mesmas.

    Abraço.

    ResponderExcluir
  6. Uauuuuuuuu adorei, muito obrigado!!!!!!!!!

    ResponderExcluir
  7. Po Mano Valeu Mesmo, Muito Boa a Explicação! Bem Detalhada e Super Eficiente !

    ResponderExcluir
  8. Muito Bom Tutorial muito Obrigado muito bem explicado

    ResponderExcluir
  9. obrigado, ajudou bastante xD

    ResponderExcluir
  10. Bom turorial, vlw! Mas o meu banner tem duas frases, primeiro mostra uma dps outra, só q la aparece travado só numa, oq fasso igor?

    ResponderExcluir
    Respostas
    1. Olá Daniel, como assim o seu banner possui duas frases? Você se refere àqueles imagens que ficam se movimentando (imagens GIF)?

      Excluir
  11. muito bom muito obrigado por me ajudar parabens adorei

    ResponderExcluir
  12. Valeu Igor,

    Me ajudou muito esse tutorial. Coloquei até um banner seu no meu blog, em forma de gratidão.

    Abraço

    Daniel Lima - http://blogdaniellima.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Olá Daniel, fico feliz que o artigo tenha sido útil para você, e agradeço a divulgação do meu banner! Espero que encontre outros artigos úteis, e que volte mais vezes. Abraços.

      Excluir
  13. Ola Igor, deu quase certo, apenas ficou assim: " border="0" alt=""/>
    (120x60) ao lado do banner, alguma explicação pra isso?

    ResponderExcluir
    Respostas
    1. Olá Ícaro, isso deve ter ocorrido por você ter apagado alguma aspa quando substituiu a frase "link-da-imagem". Certifique-se de que o código está sendo inserido exatamente como mostrado no passo 2. E que ao substituir as frases pelo que é pedido, você não está apagando nenhum código a mais. Isso com certeza resolverá o problema, mas se ele persistir, informe o endereço onde ele está ocorrendo. Agradeço a visita e o comentário, volte sempre!

      Excluir
  14. Respostas
    1. Olá Nanda, fico feliz que a explicação tenha ficado clara. Espero que o artigo tenha alguma utilidade para você. Agradeço a visita e o comentário. Volte sempre.

      Excluir