Link-me - Como se faz uma caixinha assim

O título mostra bem o que constatei com relação as pesquisas feitas por blogueiros sobre o termo. Na verdade, falo da textarea com o código do banner do blog que utilizo na sidebar.

Apesar de ser bem simples, muitas pessoas ainda não sabem como fazer e a maioria costuma ficar envergonhada de perguntar. Coisa que não faz sentido, afinal, todos tiveram que aprender um dia e para aprender, tiveram que buscar por tal informação e claro, perguntar.

Para acabar com isso, vou apresentar a maneira mais fácil de se fazer:

Primeiro, você vai precisar de um banner.

Para o banner, costuma-se usar uma imagem de 120 por 60px (pixels). Você pode utilizar um programa de edição de imagens ou até mesmo o paint do windows para tanto.

Em seguida, você precisará hospedar o seu banner em algum lugar. Cabe a você escolher qual o melhor lugar para isso.

Com a imagem em mãos, vamos ao passo-a-passo:

01 - Copie o código abaixo e faça as alterações necessárias

<textarea rows="3" cols="15" onfocus="this.select()" onmouseover="this.focus()" name="link" wrap="hard"><a href="URL DO BLOG" target="_blank" title="TÍTULO DO BLOG"><img border="0" widht="120px" alt="TÍTULO DO BLOG" src="URL DA IMAGEM DO BANNER" height="60px"/></a></textarea>

Como você pode notar, os locais onde as mudanças devem ser feitas estão em negrito.

Para que o link-me funcione, você vai precisar fazer a substituição do que está em negrito pelas informações do seu blog e pela url da imagem do banner que você criou e hospedou. Apenas preste atenção para não apagar as aspas, caso contrário, você terá problemas com o código.

02 - Adicionando o código ao blog

No painel de controle do seu blog, clique em Layout e na página Elementos da página clique em Adicionar um gadget e em HTML/JavaScript.

Adicione o código que você modificou e clique em SALVAR.

Uma última dica:

Caso você queira colocar tudo centralizado como eu fiz, basta adicionar as tags <center> e </center>. Ficaria assim:

<center><textarea rows="3" cols="15" onfocus="this.select()" onmouseover="this.focus()" name="link" wrap="hard"><a href="URL DO BLOG" target="_blank" title="TÍTULO DO BLOG"><img border="0" widht="120px" alt="TÍTULO DO BLOG" src="URL DA IMAGEM DO BANNER" height="60px"/></a></textarea></center>

Sucesso!