Ok! Eu não me canso de repetir que este blog é voltado para quem está começando, tanto em matéria de blogs, quanto na internet em geral.
Dito isso, vamos tentar resolver uma dúvida levantada pelo d2kevin que agora é h4c3rk3 (vai gostar de um nome complicado assim heim) e que acabou de ganhar seu primeiro link (eu acho). :D
Como linkar uma imagem?
Primeiro, vamos entender:
Quando criamos um link, usamos:
<a href="urldedestino">Descrição do link</a>
(isso linka o texto "Descrição do link")
Onde:
urldedestino - é o endereço da página que vai abrir ao clicarmos no link.
Descrição do link - é o texto que aparece como link.
E quando queremos que esse link abra em outra janela, usamos "target="_blank", fica assim:
<a href="urldedestino" target="_blank">descrição do link</a>
Além disso, costumamos usar o "title" para mostrar um texto que só aparece quando o mouse está sobre o texto do link (descrição do link). Fica assim:
<a href="urldedestino" title="descrição do link" target="_blank">descrição do link</a>
Entendido? Então, como linkar uma imagem?
O conceito é o mesmo, só que ao invés de colocarmos um texto (descrição do link), vamos colocar uma imagem.
Como linkar uma imagem:
01 - A imagem precisa estar hospedada em algum lugar.
Assim como eu falei quando publiquei o post "Blog no blogger? Qual o lugar ideal para hospedar suas imagens?", quem publica um blog no blogger, tem automaticamente, suas imagens salvas em um álbum da web do Picasa. Portanto, se você vai linkar uma imagem, ela precisa estar on-line (mas vê se não vai fazer HotLink heim).
02 - O que fazer com a url da imagem:
Uma vez que sua imagem estiver hospedada, você terá a url dela para usar (o endereço da imagem).
Agora é hora de substituir o "descrição do link" pela imagem. Para isso, usamos o seguinte trecho:
<img src="urldaimagem">
O link completo ficaria assim:
<a href="urldedestino"><img src="urldaimagem"></a>
Abrindo em outra janela:
<a href="urldedestino" target="_blank"><img src="urldaimagem"></a>
Isso é o básico e já funciona bem. Porém, existem algumas informações adicionais que são úteis e podem te ajudar em caso de problemas.
Adicionando informações a imagem:
width - Largura da imagem
heigth - Altura da imagem
border - Para definir se queremos borda ao redor da imagem ou não) - definida por número (sem borda=0) (1,2,3, etc... no lugar do zero = largura da borda)
alt - O mesmo que o "title" usado anteriormente, só que aqui, além do texto que aparece quando colocamos o mouse sobre a imagem, ele serve também para o caso da imagem não aparecer.
Tudo bem, com essas informações você já será capaz de fazer muita coisa. Agora vamos colocá-las em prática?
Linkando uma imagem com todas as informações que aprendemos:
(banner do blog - Ilustrativo, sem nenhum interesse :D)
Agora, o código usado para linkar o banner do blog:
<a href="http://novonarede.blogspot.com" target="_blank"><img border="0" alt="Novo na Rede" width="120px" height="60px" src="http://2.bp.blogspot.com/_NiOrby0FW3k/SK_Gnid-OcI/AAAAAAAAAhs/6C9bwpaOg8U/s400/BANNER.jpg"/></a>
Por último, mas não menos importante, uma dica:
Caso você queira postar um imagem no blog e depois direcioná-la para uma url específica, vamos visualizar o código que aparece no blog (aba "Editar Html"):
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_NiOrby0FW3k/SK_Gnid-OcI/AAAAAAAAAhs/6C9bwpaOg8U/s1600-h/BANNER.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://2.bp.blogspot.com/_NiOrby0FW3k/SK_Gnid-OcI/AAAAAAAAAhs/6C9bwpaOg8U/s400/BANNER.jpg" alt="" id="BLOGGER_PHOTO_ID_5237623274224892354" border="0" /></a>
Eu sei que olhando assim parece uma coisa monstruosa, mas é bem mais fácil do que parece!
Levando em conta o que aprendemos até aqui, já sabemos que a url da imagem está correta e tudo mais. Portanto, a única coisa que precisamos modificar é a url da página que queremos que se abra ao clicar na imagem. Para tanto, basta procurarmos pelo "a href="
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_NiOrby0FW3k/SK_Gnid-OcI/AAAAAAAAAhs/6C9bwpaOg8U/s1600-h/BANNER.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://2.bp.blogspot.com/_NiOrby0FW3k/SK_Gnid-OcI/AAAAAAAAAhs/6C9bwpaOg8U/s400/BANNER.jpg" alt="" id="BLOGGER_PHOTO_ID_5237623274224892354" border="0" /></a>
Agora que encontramos, basta substituir a url que está lá:
http://2.bp.blogspot.com/_NiOrby0FW3k/SK_Gnid-OcI/AAAAAAAAAhs/6C9bwpaOg8U/s1600-h/BANNER.jpg
Pela url da página que queremos que se abra. ;)
E vale o mesmo para quem posta utilizando o Wordpress.com (só não coloco o código aqui, pois o princípio é o mesmo e esse post já está enorme :D)
É isso, espero que tenha resolvido seu problema d2kevin ou h4c3rk3 (opa!) e de quem mais estivesse com alguma dúvida sobre o assunto.
Faça bom uso!
