Pesquisar na Web

Código HTML Para Caixinha Link-me

Não é difícil encontrar geradores de caixinhas para banner de parceria a famosa “Caixinha link-me”, com estes geradores podemos criar caixinhas rapidamente, de uma forma bem prática, porém, neste tutorial vamos aprender a fazer nossa caixinha sem geradores, vamos fazer literalmente, usando o próprio código HTML, mas não pense que vai ser uma tarefa difícil e demorada, veja como é simples...


Primeiro você terá que criar seu banner, uma ótima ferramenta que eu recomendo é o Gimp, um programa fácil de usar e bem eficiente, nele você poderá criar seu banner e depois redimensiona-lo para o tamanho que preferir, geralmente usamos o tamanho 120x60, mas isso fica a seu critério, veja como redimensionar imagem com o Gimp...

Dica: Crie sua imagem com um tamanho grande para depois redimensionar, assim a qualidade da imagem ficará bem melhor...

Agora que você já tem a imagem do seu banner, você deverá hospeda-la, pois vamos precisar do código de incorporação da imagem, “link direto”, eu recomendo o site “imageshack” para hospedagens de imagens...

Tudo pronto, agora vamos ao código, primeiro vamos criar uma imagem com link, neste caso a imagem do seu banner com link, veja abaixo...

1. <img src="LINK DIRETO DA IMAGEM" border="0"  title="NOME DA IMAGEM" alt="DESCRIÇÃO DA IMAGEM"/>

  • Você deverá alterar os trechos em vermelho...

2. Agora amos criar a caixinha, veja o código...

<textarea cols="15" rows="3" onfocus="this.select()" onmouseover="this.focus()"><a href="ENDEREÇO SEU BLOG" target="_blank" title="NOME SEU BLOG"<img src="LINK DIRETO IMAGEM" border="0" alt="NOME SEU BLOG"/></textarea>

  • Apenas os trechos em vermelho deverão ser alterados, agora junte os dois códigos, o código pronto deverá ficar assim...


<img src="LINK DIRETO DA IMAGEM" border="0"  title="NOME DA IMAGEM" alt="DESCRIÇÃO DA IMAGEM"/><br>
<textarea cols="15" rows="3" onfocus="this.select()" onmouseover="this.focus()"><a href="ENDEREÇO SEU BLOG" target="_blank" title="NOME SEU BLOG"<img src="LINK DIRETO IMAGEM" border="0" alt="NOME SEU BLOG"/></textarea>


Para alterar o tamanho da “textarea”, caixinha que fica abaixo da imagem, para deixa-la de acordo com a imagem, basta alterar os valores de “cols” para a altura e “rows” para a largura...

Veja abaixo como deverá ficar sua caixinha link-me...

 Banner


Esta dica foi útil pra você? Deixe seu comentário, se quiser parceria é só deixar seu recado nos comentários, assim que puder entrarei em contato...

4 comentários:

  1. Essa caixinha é muito útil.

    Abraços e sucesso!

    ResponderExcluir
    Respostas
    1. É verdade Igor, obrigado por comentar...

      Até mais, Sucesso...

      Excluir
  2. é muito util mesmo, algumas não funcionam mais depois que o blogger mudou seu estilo de html. parabéns pelo blog eu gostei muito ^^

    ResponderExcluir
  3. Obrigada pelo comentário, volte sempre...

    ResponderExcluir