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...
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, não esqueça de compartilhar...
|
Nenhum comentário:
Postar um comentário
Por favor, se possível, não comentem como "Anonimo".