Saiba colocar uma Galeria De Imagens no seu blog

Crie uma galeria de imagens baseada em CSS, que mostra versões maiores das imagens a partir de thumbnail's, quando o mouse passar sobre elas. Um subtítulo pode ser adicionado à imagem ampliada. Além disso, é possível modificar a largura final da imagem apresentada. Muito bom para apresentar em uma postagem no seu blog com várias imagens, e que você quer que não ocupe muito espaço. A galeria é compatível com o IE6 , Firefox, Ópera 8.

Veja exemplo:Passe o mouse nas imagens abaixo.

Aqui você coloca o texto que quiser...

Seu texto aqui

Texto aqui...

Texto aqui

Outro exemplo:Titulo da imagem aqui

Texto aqui

Como colocar em seu blog:
1º passo:Copie e cole esse código abaixo, logo após da tag <HEAD>
do seu template, e depois salve.
(O tamanho das imagens ampliadas são ajustadas nesse código. Mude como quiser, só respeitando o tamanho da sua página de postagem)

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.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*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>

2º passo:
Copie e cole esse código abaixo, onde você quer que as imagens apareçam em seu blog. Em um post, na sidebar, cabeçalho, etc. Apenas mudando o caminho das imagens.

<div class="gallerycontainer">

<a class="thumbnail" href="URL DA IMAGEM#thumb"><img src="URL DA IMAGEM" width="100px" height="66px" border="0" /><img src="URL DA IMAGEM" /> TEXTO QUE QUISER</a>

<a class="thumbnail" href="URL DA IMAGEM#thumb"><img src="URL DA IMAGEM" width="100px" height="66px" border="0" /><img src="URL DA IMAGEM" /> TEXTO AQUI</a>

 

<a class="thumbnail" href="URL DA IMAGEM#thumb"><img src="media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><img src="URL DA IMAGEM" /> TEXTO QUE QUISER</a>

<a class="thumbnail" href="URL DA IMAGEM#thumb"><img src="URL DA IMAGEM" width="100px" height="70px" border="0" /><img src="URL DA IMAGEM" /> TEXTO QUE QUISER</a>

 

<a class="thumbnail" href="URL DA IMAGEM#thumb">TEXTO QUE QUISER<img src="media/dynamicdrive.gif" /> TEXTO QUE QUISER</a>

 

<a class="thumbnail" href="URL DA IMAGEM#thumb">TEXTO QUE QUISER<img src="URL DA IMAGEM" /> TEXTO</a>
</div>

Sua galeria de imagens está pronta pra ser usada. Qualquer dúvida deixe um comentário.

Bookmark este post: