dica blogger #007

Num blog existe uma área onde se definem os mais variados estilos de tudo o que nos é mostrado na pagina. É o chamado CSS (Cascading Style Sheets ou Folha de Estilos).

Nesta área, usando os códigos certos podemos criar efeitos bastante interessantes numa página e, na minha opinião, um dos efeitos mais interessantes, aplicado principalmente a imagens, é a opacidade. Tal como podem ver neste blog, foi usada alguma transparência na imagem de fundo através desse efeito e para isso bastou definir que a opacidade da imagem fosse inferior a 100%.

Nas imagens publicadas nos posts também é possível aplicar esse efeito e como, ao publicar as imagens directamente através do blogger, elas funcionam como links é também possivel fazer com que elas apenas sejam visíveis quando se passa o cursor por cima dela.

Para isso basta procurar pela tag ]]></b:skin> no código do vosso blog e antes dessa tag adicionar os seguintes estilos:

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

Nota: nestes códigos os valores 50, 0.5, 100 e 1.0 definem o nivel de transparencia a aplicar.

Depois disto, basta que ao publicar uma imagem num post se procure no código da mesma pela area que a define como link e se adicione um pequeno código para que a transparencia funcione.
O código da imagem é algo deste tipo:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_a7NKD2mAIvk/S1bi2GNY5mI/AAAAAAAABQA/rYBDtDq4zSk/s1600-h/XXX.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaYXAmb5fhNOT_HkdMqi_GNAMpQqYq-eDEP24h4n2bylAzMEvGr-C98Bla_8DtNxMOhBOLeHtij500agHs6xgLaxeu6ac3lOkZkTJxDr9DMcz9-3P1JLO9ciGrZG5B6Cr_tTjniBD_WwU/s320/XXX.jpg" width="320" /></a>
</div>

E na parte entre <a e href="http:// adicionamos class="linkopacity" ficando desta forma:

<a class="linkopacity" href="http://

Depois disto basta gravar como habitualmente.

Podem passar o cursor na imagem abaixo, que não está visivel porque troquei a opacidade de 50 para 0, para ver um exemplo de como funciona.