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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaVMhEEze1hsEMuMgVIh8GWNLrjkF2MNmv6cuTB9xaXTen5SN_AT_14F4nR8TwdmjSXDN-jP6pjhzKMC_56h3RTrxd286BE8SxJTkDhs34j5-msvCexc9mRjLo362hfcRBzvBDAA/s1600-h/cracha.jpg"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaVMhEEze1hsEMuMgVIh8GWNLrjkF2MNmv6cuTB9xaXTen5SN_AT_14F4nR8TwdmjSXDN-jP6pjhzKMC_56h3RTrxd286BE8SxJTkDhs34j5-msvCexc9mRjLo362hfcRBzvBDAA/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