Guia – Efeito para imagens no seu blog

Por | 2 de Setembro de 2007

No blogger quando clicamos numa foto somos levados para outra página onde podemos visualizar a imagem, ao seguir este guia poderá mostrar as imagens no seu blog sem sair da mesma página, mostramos uma amostra da imagem em tamanho reduzido, o visitante se colocar o rato sobre a imagem é mostrada uma versão maior da imagem SEM CLICAR NA IMAGEM, SEM SAÍR DA PÁGINA E SEM JAVASCRIPT

1- Localize no código do seu tema a secção;
]]></b:skin>
</head>

e insira o seguinte código CSS imediatamente antes dessa linha


.imagem{
position: relative;
z-index: 0;
}

.imagem:hover{
background-color: transparent;
z-index: 50;
}

.imagem span{
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.imagem span img{
border-width: 0;
padding: 2px;
}

.imagem:hover span{
visibility: visible;
top: 0;
left: 125px;
}

2- Fazemos o upload da imagem que queremos utilizar no blogger, depois de fazer o carregamento aparecerá um código HTML que normalmente é utilizado para mostrar as imagens, no meu caso este foi o código que apareceu:


<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_ImJ3wuFG4BE/RtsFndOzpDI/AAAAAAAABgY/rVv_qgQ4H4o/s1600-h/cracha.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="http://2.bp.blogspot.com/_ImJ3wuFG4BE/RtsFndOzpDI/AAAAAAAABgY/rVv_qgQ4H4o/s320/cracha.jpg" alt="" id="BLOGGER_PHOTO_ID_5105680777974359090" border="0" /></a>

o código a verde representa a localização da imagem que é mostrada ao leitor, a vermelho é a localização da imagem que é mostrada ao leitor quando este é levado para outra página, apenas iremos precisar destes 2 bocados de códigos.

3- Insira o seguinte código depois do código acima referido:


<a class="imagem" href="#img"><img src="xxxxx" width="100px" height="66px" border="0" /><span><img src="xxxxx" width="200px" height="120px" /><br />Título</span></a>

4- Substitui os XXXXX pelo códigos da mesmas cores do passo 2, o código sublinhado a laranja permite alterar as dimensões da imagem que aparece quando o visitante visita o blog, a código a roxo permite alterar as dimensões da imagem que aparece quando o visitante coloca o rato sobre a imagem. depois de substituir os códigos e alterar ou não as dimensões apague todo o código do passo 2 ficando apenas este. Escreva o resto do post e guarde.

Pode ver uma demonstração clicando na imagem a seguir.

Título

Texto: Ricardo Santos

Na Aldeia mais digital de Portugal – Beijós

One thought on “Guia – Efeito para imagens no seu blog

  1. Robson David

    chato um pouco complicado,mas o resultado final é simplismente SHOW!!! parabéms pelo post!

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *