Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

02 julho 2008

Galeria de Imagens

Vou ensinar como colocar no Blogger esta galeria de fotografias (da autoria de Stu Nicholls) que, apesar do título, é bastante simples de editar. Não se esqueça de verificar os termos de uso na página.

Coloque no código do seu template, antes de ]]></b:skin>

#gallery {width:728px; height:380px; padding:10px; border:1px solid #333; background: #888; position:relative; margin: 30px auto 0;}
#gallery b.default {position:absolute; left:10px; top:10px; width:548px; height:380px; text-align:center;}
#gallery b.default img {display:block; margin:0 auto 10px auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}
#gallery b.default span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}

#gallery ul {list-style:none; padding:0; margin:0; width:180px; position:relative; float:right;}
#gallery ul li {display:inline; width:52px; height:52px; float:left; margin:0 0 5px 5px;}
#gallery ul li a {display:block; width:50px; height:50px; text-decoration:none; border:1px solid #000; border-color:#eee #555 #333 #ddd;}
#gallery ul li a span {display:none;}
#gallery ul li a img {display:block; width:50px; height:50px; border:0;}
#gallery ul li a:hover {white-space:normal; border-color:#555 #ddd #eee #333; background:#777;}
#gallery ul li a:hover b {position:absolute; left:-548px; top:0; width:548px; height:380px; text-align:center; background:#888; z-index:20;}
#gallery ul li a:hover span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}
#gallery ul li a:hover img {margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}

#gallery ul li a:active, #gallery ul li a:focus {white-space:normal; border-color:#555 #ddd #eee #333; background:#777;}
#gallery ul li a:active b, #gallery ul li a:focus b {position:absolute; left:-548px; top:0; width:548px; height:380px; text-align:center; background:#888; z-index:10;}
#gallery ul li a:active span, #gallery ul li a:focus span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}
#gallery ul li a:active img, #gallery ul li a:focus img{margin:0 auto 10px auto; width:auto; height:auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}

Eu editei o original (onde está em negrito) para centralizar a galeria na página.

Agora cole, depois de (ou antes, como preferir) <div id='content-wrapper'>

<div id='gallery'>

<b class='default'><img src='link da imagem' />
<span>This is the default image with some descriptive text</span></b>

<ul>
<li><a href='#'><b><img src='link da imagem' /><span>Texto descritivo</span></b></a></li>
<li><a href='#'><b><img src='link da imagem' /><span>Texto descritivo</span></b></a></li>
</ul>

</div>

Repetir a linha <li><a href='#'><b><img src='link da imagem' /><span>Texto descritivo</span></b></a></li>
quantas forem as imagens utilizadas.

Onde está href="#" coloque o endereço da página que deseja linkar e os links das imagens onde existe indicação. Não há necessidade de editar dois tamanhos de imagens. Apenas não use imagens que ultrapassem as medidas da galeria (728px alt, 380px larg).

Para ver o resultado no meu blog de testes clique aqui.

Artigos Relacionados

28 comentários:

Luiz Lailo disse...

Vou tentar colocar no meu blog Borrocando. Deve ficar melhor do que o Slide que tenho lá.

Planet Web disse...

Desculpa postar aqui mas o Link de contatos não funcionou...

Tirei o chapéu para você no meu blog, confira la...

Abraços

webflow21 disse...

Bom dia, Aceita parceria de troca de links de texto com o DicaDeDica?

Meu link é
DicaDeDica
http://www.dicadedica.blogspot.com/

Caso positivo me avisa la ok!! Um grande abraço e parabéns pelo excelente conteúdo!!!

Anônimo disse...

Oie...
Td bom?
Essa dica super me ajudou com meu novo blog:
http://anartworks.blogspot.com/
Obrigada!!!!
Mas aconteceu que ao associar as imagens aos seus respectivos links, meu blog foi desativado - temporariamente - pois acham que é um blog de Spam.... triste :(

Brasil disse...

Ola..tentei colocar a galeria e ficou desconfigurado via Post as fotos...fiz o seguinte ,somente colocando via Html o codigo da galeria e do das fotos é que da certo..naum sei c estou fazendo algo errado[http:www.maishorasteste.blogspot.com]

Unknown disse...

Nossa to falando ....mais uma dicassa...util...agora vamos ver se consigo colocar...

abraço

Unknown disse...

Amiga,

Que tal um post explicando como colocar a ferramenta Me Desenhe (www.trocapop.com/me_desenhe), que deixa os visitantes desenharem um recado no blog?

um abraço

Shirley Varjão disse...

Olá, garota esperta você! heim, confesso que esse novo layout ficou muito bom! gosto de mudanças! mas estou aqui para lhe agradecer, porque a 2 meses atras tinha muita vontade de ter um blog e nem sabia como começar, então achei a sua página, pronto! abaixe um template um clean que encontrei aqui e aprendendo as várias dicas fiz o meu blog. ficou lindo, www.feminablog.blogspot.com, obrigada pela força, o Brasil precisa de pessoas como você!só faltou uma foto sua pra gente te conhecer né...rssrsr...é só uma idéia!bom trabalho garota.

Patricia disse...

olaa parabens pelo seu blog muito legal!eu tentei por os codigos no meu blog mas nao consegui. sabe os codigos q devem ser postos antes de (b:skin )? pus la e acontece que quando viasualizo o blog aparecem todos os codigos antes do cabecalho. q sera q esta acontecendo de errado? beijos e brigada!como faco para ver a resposta? por aqui mesmo? meu e mail eh psrios@hotmail.com beijos desculpa se por um acaso a mensagem aparecer em duplicata eh q deu um erro aqui bjs

Apeiara-Vera disse...

Sou de Vera e vim agradecer pelo template lindo chamado cronus. Estou usando ele no blog da fundação Apeîara aqui de vera. Sou novo nesse mundo do Blog e até por isso devo agradecer a você por prestar esse valioso serviço de ajudar principalmente aqueles que como eu estão iniciando. Brigado de coração!!!

Anônimo disse...

Oi, Ariane!
Há tempos eu estava procurando por uma coisa desse tipo... amei! Muito obrigada!
Agora, estou tentando colocar a segunda parte do código no post do blog (estou inventando algumas formas para as pessoas poderem visualizar melhor meus produtos)... Funcionou em partes, porém ficou um pouco desconfigurado: duas colunas de links em vez de 3 como está no seu modelo e quando passo o mouse sobre a figura para visualizá-la maior, os liks da direita ficam "dançando"... não estão fixos, entende?
Para mim, colocar essa galeria em posts facilitaria na hora em que eu for construir um menu... daí, eu coloco os links do menu para direcionar para as postagens específicas - assim eu não preciso criar um novo blog para cada categoria de produto... É meio braçal, mas foi a melhor forma que encontrei até agora...
Se puder ajudar, ficarei ainda mais grata!
Grande abraço...
Daniele Pimenta

.: Moça Arteira - Dani Pimenta :. disse...

Oi, Ariane!!!

Seu blog é GENIAL! Parabéns e obrigada por todas as dicas!!!

Dei uma olhada no site Stu Nicholls - onde vc pegou o modelo da galeria de fotos e encontrei essa galeria...

http://www.cssplay.co.uk/menu/list_gallery

Vc poderia, por favor, dar umas dicas de como colocar essa galeria no blog?

Obrigada

Daniele Pimenta

Anônimo disse...

No meu blog ficou meio estranho, porque a galeria ficou em cima, não tem como movimentar isso não?

Ariane disse...

D.Whoe, tentei ver como ficou no seu blog mas o perfil não está disponivel. Vc pode colocar em outros locais do template sim, é só transferir o código do local sugerido para outro. Sem ver o código do seu blog, infelizmente, não tenho como dar mais detalhes.

Centro Acadêmico Prof. Orlando Ayrton de Toledo disse...

sem noção como você me ajudou!!! MUITO OBRIGADO!!!!!!!!!!

Igreja Batista no Horto disse...

Ariane quero te agradecer muitíssimo pela ajuda! Tenho tentado, sem sucesso, colocar uma galeria de fotos no blog da minha igreja e quando menos esperava encontrei seu blog com esta dica maravilhosa! Consegui criar e ficou jóia!
Se quiser dar uma olhada... http://igrejabatistanohortofotos.blogspot.com
Abraços

Unknown disse...

Ariane, eu estou montando um blog pra minha escola e não estou conseguindo posicionar a galeria abaixo do meu menu horizontal... teria como me dar uma ajudinha????


P.S. Parabéns pelo ótimo blog

Unknown disse...

meu email é luisf.2006@hotmail.com, se puder me ajudar agradeceria mto!

Unknown disse...

Oie Ariana, não existe no meu template (div id='content-wrapper'), alguma sugestão ?

Anderson R. disse...

Como faço pra colocar essa galeria numa postagem envez de ela ficar na pagina principal. aguardo respota meu blog é http://cgbarreirospe.blogspot.com

Anderson R. disse...

como coloco essa galeria em um post em vez de deixalo na pagina principal?

Anônimo disse...

Ótima dica mas é muito ruim ter que ficar editando no html toda vez que queremos colocar novas fotos. Não tem um jeito mais fácil de inserir as fotos la diretamente no layout do blogger não? Abraço!

Josie Pontes disse...

olá, eu tenho uma dúvida:
O código mais comprido, a gnt coloca sem modificar nada, né?
e o menor a gnt edita pondo o link da imagem e o texto descritivo... eu posso por vários do código menor, ou tem limite?

Rô Afonso disse...

Ariane me ajude, por favor!!
Fiz tudo exatamente como você pediu e deu certo! Mas o tamanho da galeria está maior que o post. Como eu faço pra mudar o tamanho da galeria? Queria deixar um pouco menor.
Espero que você me responda!!
E obrigada por todas as dicas! Já consegui fazer muita coisa! =)

Chris Annes disse...

Olá, Ariane... para mim não deu certo! Não encontrei a div content-wrapper em lugar algum... Bem, se vc puder me dar uma luz...

Olhe como ficou:

http://iorios.blogspot.com/p/teste.html

Grata,
Chris

Emmy disse...
Este comentário foi removido pelo autor.
Casa da Vana disse...

Tudo funcionou muito bem, tive de fazer umas lateracoes nas posicoes. Quanto a colocar numa pagina estatica, consegui colocando o segundo codigo no html da pagina, e funcionou. Agora minha duvida é: que link colocar para a imagem maior, pq quando posiciono o cursor sobre as imagens menores, elas se ampliam, mas nao aparecem na posicao maior como o exemplo.

Kaká disse...

Olá ariane gostaria de saber se tem como colocar uma galeria assim dentro de uma postagem,
aguardo resposta, obrigada

Postar um comentário

Os comentários são moderados.