Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
CLIQUE-ME
Vá até o HTML do seu blog e cole este código após <head>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>
Agora copie este segundo código e cole onde você quer que apareçam as imagens, colocando no local indicado o endereço das imagens.
Código para linkar imagem pequena com grande
<a class="thumbnail" href="AQUI O ENDERÇO DA IMAGEM#thumb"><img src="REPETIR O ENDEREÇO DA IMAGEM AQUI" width="100px" height="66px" border="0" /><span><img src="REPETIR O ENDEREÇO DA IMAGEM AQUI" /><br /></span></a>
Código para linkar imagem nas palavras
<a class="thumbnail" href="AQUI O ENDEREÇO DA IMAGEM#thumb">ESCREVA AQUI O QUE QUER QUE APAREÇA<span><img src="REPETIR O ENDEREÇO DA IMAGEM AQUI" /><br /></span></a>
Créditos: Dynamic Drive CSS
Olá, adorei a dica, tanto q agreguei no meu blog, o qual é meu primeiro contato com HTML, ja alterei algumas coisas no código, mas gostaria q me tirasse uma dúvida.
ResponderExcluirSe visitar meu blog: http://glaucoac.blogspot.com/ verá que coloquei alguns quadrados(parte da imagem q aparecerá) porém queria alinha-los na horizontal, mas para isso precisava q todas as janelas abrissem na margem esquerda e naum abaixo do quadrado, pois as últimas serão cortadas.
Pode me ajudar?
Obrigadu.
Oi Glauco, tudo bem ? Olha, quanto a isso você terá que ir mexendo no código até conseguir. Um abraço
ResponderExcluirMuito obrigado Elke, pela dica estava precisando desse codigo já algum tempo para colocar um Mural de Fotos no meu site, seu Blog está cada dia mais funcional e atraente e cheio de visitas diarias, um dia desses eu entrei e tinha 15 visitantes on-line e eles permaneram durante um bom tempo, parabens seu blog é 10!
ResponderExcluirgostaria de saber se essa dica funciona no wordpress.org ou no wordpress.com
ResponderExcluirgoataria de saber se essa dica funciona com o wordpress.org ou com o .com
ResponderExcluir