Atenção
Para os blogueiros que quizerem disponibilizar este tutorial, seja um parceiro, coloque meu botao em seu blog e tenha o bom senso de citar a fonte e o autor no post.
Tenha a sua caixinha “link-me”. Uma caixinha link-me é
uma caixa tipo textarea onde fica o código do botão do seu
site, é muito importante para blog que trabalha com sistema de
parcerias ou simplesmente para divulgar o site.
O primeiro passo é ter sua imagem hospedada, o
endereço de uma imagem sempre vai ter uma extensão de
imagem no final, para descobrir a url de uma imagem basta clicar com
o botão direito do mouse sobre ela e ir em propriedades.
Como eu tenho um domínio e hospedagem eu já
tenho uma pasta para hospedar meus arquivos mas existem muitos servidores
gratuitos, você só não poderá guardar a sua
imagem em um lugar que necessite de uma senha para acessar.
A url da minha imagem é: http://www.myimagens.ninjaptc.com/tutosbotao2.gif
Iremos criar primeiramente a caixinha, eu estou usando
o Dreameweaver mx contudo pode ser feito até no bloco de notas.
Código da caixinha.
<textarea onfocus="this.select()" onmouseover="this.focus()"
rows="3" cols="10" name="textarea" style="border:
1px solid rgb(0, 0, 0); font-family: verdana; font-size: 8pt; background-color:
rgb(255, 255, 255);"> </textarea>
O textarea é uma tag usada em formulários,
você podera alterar o tamanho da caixinha em “rows”
e “cols”, a tag onfocus permite que o texto seja selecionado
ao passar o mouse.
Agora iremos colocar a tag do link que devera ficar entre
<testarea> e </textarea>
A tag para link :
<a href= “”></a>
Entre as aspas eu irei colocar a url do local que o navegador
devera abrir, tudo que eu colocar entre <a href= “”>
e </a> será clicavel, ou seja será link, poderia
ser um texto mas no nosso caso será uma imagem. Se eu fosse fazer
um link de texto era so digitar o texto entre as tags do link mas como
eu vou usar uma imagem então terei que usar uma tag para o navegador
abrir a imagem.
Ficou assim:
<a href=“http://tutosloko.blogspot.com/”></a>
A tag para imagem
<img src="">
Entre as aspas eu irei colocar a url da imagem:
<img src="http://www.myimagens.ninjaptc.com/tutosbotao2.gif">
Para melhorar a tag imagem eu acrescentaria a tag definindo
uma borda e a tag alt que serve para exibir um texto quando a imagem
não abre.
<img src=http://www.myimagens.ninjaptc.com/tutosbotao2.gif
border="1" alt="tutoslokos">
Posso ainda acrescentar uma tag para definir o tamanho
da imagem, é muito bom pois o navegador já sabe o espaço
que a imagem vai ocupar mesmo antes de carregar a imagem
<img src=http://www.myimagens.ninjaptc.com/tutosbotao2.gif width="120"
border="1" height="60" alt="tutoslokos”>
Vamos agora montar a tag de link completo
<a href=“http://tutosloko.blogspot.com/”><img
src=http://www.myimagens.ninjaptc.com/tutosbotao2.gif width="120"
border="1" height="60" alt="tutoslokos”>
</a>
Agora basta colocar este código dentro da tag textarea.
<textarea onfocus="this.select()" onmouseover="this.focus()"
rows="3" cols="10" name="textarea" style="border:
1px solid rgb(0, 0, 0); font-family: verdana; font-size: 8pt; background-color:
rgb(255, 255, 255);"> <a href=“http://tutosloko.blogspot.com/”><img
src=http://www.myimagens.ninjaptc.com/tutosbotao2.gif width="120"
border="1" height="60" alt="tutoslokos”>
</a></textarea>
Meu objetivo é que você entenda não
somente como se faz e sim o porquê se faz, espero que não
tenha restado duvida.
0 comentários:
Postar um comentário