terça-feira, 30 de agosto de 2011

Galeria de imagens simples em Javascript

Galerias e slides são elementos nos quais dão um aspecto de profissionalismo no seu blog, e você que procura uma galeria simples, mas elegante, está lendo o tutorial certo! Neste artigo estarei ensinando como colocar uma galeria de imagens simples em seu blog de uma maneira bem fácil que pode ser acrescentada em qualquer lugar do blog.

image

Clique aqui para ver uma demostração.

Encontrei o script no site How To Create e dei uma grande modificida. Veja como colocar no blog.

1. Entre no Editor HTML do seu blog e procure por <head>

2. Acima dessa tag cole o seguinte código:

<script src="http://codigosblogger.webs.com/Cblogger/simplegallery.js" type="text/javascript"></script>

3. Agora procure por ]]></b:skin>

4. Acima dela cole o código abaixo:

ul.galleryimages, ul.galleryimages li, ul.galleryimagelist, ul.galleryimagelist li {
  margin: 0;
  padding: 0;
  list-style-type: none;
padding-top: 10px;
}
ul.galleryimages li, ul.galleryimages img {
  display: block;
width: 94%;
box-shadow: 0.8px -0.3px 19px -3px #999;
margin-bottom: 15px;
}
ul.galleryimagelist {
margin-bottom: 0.6em;
margin-top: 17px;
}
ul.galleryimagelist li {
  display: inline;
}
ul.galleryimagelist a {
  margin: 0 0.2em;
padding: 8px;
text-decoration: none;
color: white;
background: #555;
border-radius: 17px;
}
ul.galleryimagelist a:hover, ul.galleryimagelist li.activeimage a {
  color: black;
background: gainsboro;ul.galleryimagelist a {
}

5. Salve o modelo e clique na guia “Layout”.

6. Clique em “Adicionar um Gadget”, escolha a opção “HTML/javascript” e cole o código abaixo:

<ul class="galleryimages">
<li><img src="ENDEREÇO DA IMAGEM" alt=""/>Nome da Imagem</li>
<li><img src="ENDEREÇO DA IMAGEM" alt=""/>Nome da Imagem</li>
<li><img src="ENDEREÇO DA IMAGEM" alt=""/>Nome da Imagem</li>
</ul>

7. Faça as modificações necessárias conforme destacado no código, inserindo o endereço da imagem e um nome ou descrição para a imagem.

Para acrescentar uma nova imagem, apenas copie a parte destacada de negrito e cole abaixo dela mesma.

8. Salve. arraste a galeria para qualquer lugar do seu blog e em seguida veja como ficou.

Marcadores: , ,