quarta-feira, 28 de janeiro de 2009

Imagem da Postagem



 
 

Enviado para você por Penha através do Google Reader:

 
 

via Dicas para Blogs de Fabiano Roberto em 18/01/09


Depois de colocar alguns códigos que bloqueiam o botão direito do mouse, teclado e outras coisas surge um novo problema nas imagens das postagens é possível clicar nelas e abrir numa nova janela onde é possível copiar facilmente, então precisamos impedir que a imagem da postagem tenha um link para a própria imagem. Para resolver isso é bem simples: basta trocar o link para a imagem por # no código gerado pelo blogspot.
No caso da imagem postada acima o código original quando postei a imagem era:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_UTkn-5f-k5E/SXN57FbELOI/AAAAAAAAAis/NVsgSV1AdtI/s1600-h/imagem.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 300px; height: 100px;" src="http://2.bp.blogspot.com/_UTkn-5f-k5E/SXN57FbELOI/AAAAAAAAAis/NVsgSV1AdtI/s320/imagem.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5292708043065404642" /></a>

Então no começo dele depois de href=" troque esse endereço por #, apague cursor:pointer; cursor:hand; e coloque no lugar cursor: default; isso faz não aparecer a mãozinha no lugar do cursor, o código fica desse jeito:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="#"><img style="display:block; margin:0px auto 10px; text-align:center;cursor: default;width: 300px; height: 100px;" src="http://2.bp.blogspot.com/_UTkn-5f-k5E/SXN57FbELOI/AAAAAAAAAis/NVsgSV1AdtI/s320/imagem.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5292708043065404642" /></a>

E pronto agora mesmo que clicar sobre ela nada acontecerá.

Outra maneira de fazer isso é deixar apenas a parte do código que é a imagem e retirar o link, no caso do exemplo acima deixe apenas o que está entre , e apague cursor:pointer; cursor:hand; neste caso basta apagar não é preciso colocar nada pois o mouse não muda ao passar sobre a imagem, ficando assim o código:

<img style="display:block; margin:0px auto 10px; text-align:center;width: 300px; height: 100px;" src="http://2.bp.blogspot.com/_UTkn-5f-k5E/SXN57FbELOI/AAAAAAAAAis/NVsgSV1AdtI/s320/imagem.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5292708043065404642" />

As duas explicações funcionam do mesmo jeito é apenas uma questão de qual achar mais fácil fazer, porém no caso de postar uma imagem maior que será reduzida automaticamente pelo blogspot não tem como usar essa explicação. O que resta a fazer então é publicar em um site de hospedagem de imagem (Photobucket ou ImageShack) e depois colocar o código aqui, claro se a largura do seu blog for suficiente para isso senão terá mesmo que reduzir o tamanho da imagem.

 
 

Coisas que você pode fazer a partir daqui:

 
 
TwitThis
Share |

0 comentários:

;

Pesquisa na WEB

Carregando...

assine o feed

siga no Twitter

Postagens

acompanhe

Comentários

comente também