Hoje vamos aprender a criar uma caixinha "Link-me". Já falamos por aqui sobre o que é um banner, mas antes de mais nada, para ser sincero eu nem me lembro mais onde aprendi a fazer essa caixinha, uma vez que comecei a ver isso com HTML e JavaScript antes mesmo de pensar em criar o meu primeiro blog. Mas de qualquer forma, dei uma pesquisada e não encontrei em nenhum blog uma explicação muito detalhada, então vamos lá!
Para começar, vamos entender que a caixinha Link-me nada mais é que um elemento textarea com um código dentro. O código por sua vez serve para fazer aparecer a imagem do banner ao mesmo tempo em que linka essa imagem ao blog.
Para quem não entende nada de html é importante saber que a tag <textarea> precisa ser fechada para evitar erros. Na prática é algo assim:
<textarea>
Seu código aqui
</textarea>
Criando Seu Banner
Antes de criar a sua caixinha você vai precisar de um banner pronto. Existem serviços on-line que oferecem a criação de banners grátis. Em uma pesquisa rápida encontrei pela rede:
Crie seu Banner online
Uma lista com serviços on-line escrita pelo Celso Lemes do Criar Sites.
Uma outra opção é fazer um banner com o logotipo do blog. Bastando utilizar um programa de edição de imagens para acertar o seu tamanho.
Um programa que recomendo e já escrevi um tutorial de como usá-lo para fazer montagens com fotos dos seus amigos aqui é o PhotoFiltre.
Enfim, como fazer o banner é você quem decide, o que vamos ver aqui é como criar a caixinha Link-me.
Hospede o banner em algum lugar, basta que você tenha cuidado porque a ideia é que essa imagem seja mostrada em vários e vários blogs (que vão linkar o seu blog né?). Então você não pode se dar ao luxo de hospedar essa imagem em um lugar qualquer.
Criando Sua Caixinha Link-me
Com a imagem hospedada e a url (endereço) dela em mãos, vamos ao código da caixinha Link-me:
Copie o código abaixo e cole na sua sidebar:
<br/><br/><textarea rows="3" cols="21" onfocus="this.select()" onmouseover="this.focus()"><a href="URLDOBLOG" target="_blank"><img border="0" src="URLDAIMAGEM"/></a></textarea>
<a href="URLDOBLOG" target="_blank" title="NOMEDOBLOG"><img border="0" alt="Banner" src="URLDAIMAGEM"/></a>
Faça as alterações necessárias:
URLDOBLOG – Substitua pela url (endereço) da página inicial do seu blog.
Exemplo: http://www.novonarede.com.br/blog
URLDAIMAGEM – Substitua pela url (endereço) da imagem que você hospedou.
NOMEDOBLOG – Substitua pelo nome do seu blog! 
Exemplo: Novo na Rede
Onde está escrito Copie o código abaixo e cole na sua sidebar: você pode escrever o que quiser para a "chamada" da sua caixinha Link-me.
Dica: se você quiser centralizar a caixinha e o banner, basta adicionar o <center></center> ao código, assim:
<center>
Código da caixinha
</center>
Instalação
Blogger
Crie um campo HTML/JavaScript na sua sidebar (barra lateral) e adicione o código da sua caixinha Link-me!
WordPress.org ou WordPress.com
Vá em Appearance –> Widgets e adicione um campo Text a sua sidebar. Aí é só colar o código lá e salvar.
Entendendo o código
Tanto o onfocus="this.select()" e onmouseover="this.focus()" eu aprendi com JavaScript básico e eles são responsáveis pela seleção do código quando o mouse do leitor passa por cima do código e sai dele.
O rows="3" cols="21" se refere a altura e a largura da textarea, que é a área onde está o código aparente para o leitor (a caixinha propriamente dita). Se você quiser uma caixinha mais alta, mude o rows para 4, 5, 6… você que sabe. Se quiser mais larga mude o cols para 22, 23, 24… ou 20, 19, 18… se quiser mais estreita.
Dica: Lembre-se sempre de tomar muito cuidado na hora de alterar o código para não apagar nenhuma aspa, caso contrário o código não vai funcionar!
Boa sorte e aproveite a sua caixinha Link-me!
Faça bom uso!
Imagem: Konstantin Schneider
PS: Este é mais um tutorial do antigo Novo na Rede que foi atualizado e republicado.
Olá tico no começo eu encontrei dificuldade em criar minha caixa link-me, mais agora agente ver que é muito simples, só devemos prestar atenção direitinho que não tem erro.
Olá Tico!!
).
Finalmente estou de volta, aqui no Novo na Rede. E em boa hora voltei, porque estava à procura de um tutorial de como criar uma caixinha link-me e, como sempre, arranjas-te a resposta (deves ser vidente ;D). Como está tudo muito bem explicado, só tenho mesmo uma questão, queria saber como colocar o banner e o código lado a lado, emoldurados por uma espécie de borda personalizada (qualquer coisa diferente do simples traço preto).
Aproveito para agradecer a dica do favicon, estou só a criar o novo banner do blog para aproveitar a imagem para o favicon, estou a fazer tudo em Photoshop e quero que saia perfeito (como reparaste também ando a aprender edição de imagem… e não vou ficar por aqui
Um grande abraço, meu amigo.
P.S.- A resposta ao teu mail não está esquecida… é só as minhas filhas darem-me uma folga
.
@Concentrado: É isso mesmo! E pode ter certeza que muita coisa no blog que parece difícil no começo, depois vai ficando mais fácil! O negócio é não desanimar! Um abraço e obrigado pela força de sempre!
@Luca: Até que enfim! Mas tá perdoado!
Sério, eu sei que a correria aí está grande, então fica tranquilo! Agora, respondendo sua pergunta quanto a borda, a maneira mais fácil de fazer isso é usando uma div com estilo em css, como já se usa no Blogger. Algo mais ou menos assim:
<div id=”texteareabanner” style=”border:3px solid #cccccc; width:200px;”>
Código da textarea e do banner aqui
</div>
Aí você já conhece os “esquemas”. O número do border para a largura da borda, o “solid” porque queremos uma borda sólida, o código #cccccc referente a cor (é só escolher o seu) e o número do “width” referente a largura da div. Basicamente é isso meu amigo! Qualquer dúvida estamos aí!
E quanto a edição de imagens, já vi sim e pelo visto já, já eu vou ter mais um concorrente!
Grande abraço para você também e muito obrigado pela força viu? Aqui e lá!
Até já!
PS: Não esquenta!
PS2: Nos comentários aqui as aspas são substituídas por acentos, então troca para dar certo, ok?
Pingback: Link-me: Como Criar Uma Caixinha Para o Seu Banner | diggBlog
Tico Esteves, muito obrigado por essa dica “desenrolada”. Valeu e funcionou perfeitamente.
Um abraço.
Manoel – Blog do Óbvio
http://blogdoobvio.blogspot.com
foi otima a explicaçao mas mão comsigo fazer meu banner
de geito nenhum…tenho um blog queria o banner para fazer parcerias com outros ,sabe onde consigo um banner pronto ????
Oi eu amei a dica, ajudou mesmo. mais uma coisa a caixinha fica em baixo da imagem ao invez de fica a imagem em cima da caixinha me ajuda
grata.
Se possivil mandar a resposta pelo meu email coloquei lá em cima! by
Boa tarde, estou tentando colocar essa caixinha no meu blog ja faz tempo, e não dá certo. Sai a imagem e a caixinha, mas não tem nada escrito nela, e dá para se escreve qualquer coisa depois ja no blog.
Oque fazer, Obrigada pela atençao
Muito bom!!!!!!!!!!! Parabéns e muito obrigado!!!!
Agora sim eu consigo postar meu banner!!!
Já está fucnionando!!!!
Valeu!!!!!!!
Muito legal o post. Me ajudou bastante.
Eu já havia elaborado um TEXTAREA, mas o resultado final não era nada do que eu esperava. Era mostrado o meu banner ao invés do código.
Muito sucesso para o novonarede.com.br e continuem produzindo este ótimo material
Olá…
Consegui fazer a caixinha, mas, embaixo dela, onde deveria aparecer o banner, ele não aparece, aparece um quadradinho vazio e qdo coloco o mouse em cima, escreve o nome do meu blog direitinho, só que a imagem não aparece. Fiz o banner no creator banner e salvo, mas, não sei o endereço certo pra colocar, onde ele está hospedado.
Ajude-me, por favor!
ótimas dicas, estamos ligados!
Eu tentei botar a caixinha mais o aparece as duas imagens do banner :S o que eu faço?
valeu,cara ótimas dicas!
Cara tava há um tempão procurando como por esta caixinha!!
Fiz umas pequenas modificaçãoes a partir dos macetes que vc deu, e eu nem sei mexer em HTML direto!!
Muito obrigado!!