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: , ,

12 Comentários:

Às 2 de setembro de 2011 14:39 , Blogger SoniaMaria disse...

Ola! adorei essa dica de galeria de imagens,vou usar em meu blog,agradeço de coração,abrços.

 
Às 2 de novembro de 2011 18:52 , Blogger loucospormidia disse...

Olá, tem como deixar essa galeria automática ?, ou seja, as imagens irão passando em um certo tempo sozinhas, sem ter que clicar no botão acima para ir a próxima imagem.
agradeço desde já.

 
Às 2 de novembro de 2011 19:05 , Blogger loucospormidia disse...

A, aproveitando, há como colocar uma imagem diferente em apenas uma página do blog?,por exemplo quero deixar a imagem de fundo do blog para todas as páginas, exceto para uma, essa outra eu queria trocar por uma outra. ha como fazer isso? se tiver, faça uma postagem sobre o assunto por favor.

 
Às 2 de novembro de 2011 20:58 , Blogger Códigos Blogger disse...

Esta galeria não é automática, mas para deixa-la, tem que usar um código js. Irei dar umas pesquisa. Quando ao background diferente para um determinado página, não sei se tem como, mas obrigado pela sugestão, vou ver se tem como.

 
Às 17 de novembro de 2011 00:18 , Blogger Lukinhas_safadÃO disse...

Quero colocar a galeria de imagens no CABEÇALHO, tem como?

 
Às 20 de novembro de 2011 22:05 , Blogger Códigos Blogger disse...

Procura partes no seu código HTML referentes a "Header".
Header significa cabeçalho. Mas cuidado.

 
Às 4 de janeiro de 2012 01:58 , Blogger ♣Buster_Blade♣ disse...

boa galeria usei pra um site de mangas
so q ela demora um poco pra carregar imgs
mesmo assim vlw

 
Às 19 de maio de 2012 14:19 , Blogger Brenda disse...

Adorei a dica..


http://sweet-oficial.blogspot.com.br/

 
Às 25 de junho de 2012 19:30 , Blogger Letícia Gomes disse...

Nossa eu procurei em varios lugares ninguém soube explicar direito, tão simples o seu tutorial e deu super certo!!! Obrigada!!

 
Às 18 de setembro de 2012 12:45 , Blogger Fillip Andrew disse...

Cara eu sou seu fan! Era justamente isso que estava procurando!!!

 
Às 22 de agosto de 2013 14:08 , Blogger Purim Imóveis Ltda disse...

Muito obrigada dá uma olhada no blog
http://purimimoveisiguabagrande.blogspot.com.br/

 
Às 28 de agosto de 2014 12:39 , Blogger Arajany Coêlho disse...

O script nao está funcionando, poderiam hospedar novamente..bjs

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial