Quero criar um post em formato ‘galeria de fotos’. Como?

Este post é a tradução parcial do original publicado por Mr. Paul Divers, autor do site http://irishlightandcolour.blogspot.com.br/. Nele, Paul explica detalhadamente como criar um post em formato ‘galeria de fotos’, que em minha opinião, é um dos poucos pontos em que o Blogger perde, em falta de praticidade, para o Wordpress.

Usando do exemplo do próprio Paul em seu blog Irish Light andColour, eis um exemplo de como o seu post ficará depois dessa solução simples e fácil de ser executada. As fotos dele estão em 900 x 600px, com uma qualidade de aproximadamente 50 – 70%, o que já dá uma boa visualização. A alternativa é simples: ele usa um batch chamado Phatch, onde os dados EXIF são organizados de forma a preservar os metadados das imagens, o que é muito útil no caso de fotógrafos profissionais!

O interessante deste recurso é que o post, ou página (sim, dá pra fazer isso em páginas!) as imagens ficam organizadas em um ‘thumb-mosaic’, cujo rollover mostra dos dados do autor e clicando sobre elas, abrirão em lightbox. Tão lindo, prático e fácil que me deu vontade de chorar, e depois de chorar de emoção, resolvi compartilhar com vocês. XD

Vejam como fica:




"Legal! É isso mesmo o que estou procurando!!!"
Então, gafanhoto, siga os passos abaixo e mãos à obra!


1. Otimize e ponha marca d’agua em cada imagem, assim como as informações de copyright, para evitar a kibagem alheia. Como cada um tem seu jeito para fazer isso, vou deixar que se virem;

2. Isso feito, suba as imagens numa nova galeria no Picasa, e crie um novo post/página e selecione o modo 'HTML' de visualização.


3. Copie o código abaixo...



... e cole no post/página em modo HTML ainda. Isso feito, clique para que o cursor fique logo após a primeira tag de fechamento. Bem aqui, ó:


4. Ainda na opção HTML, posicione o cursor no lugar indicado acima, clique em ‘inserir imagem’, e escolha a melhor opção pra você: se você vai fazer upload de uma nova imagem, dos seus álbuns do Google... O importante é que você faça o processo diretamente dali!




5. Escolha ‘tamanho pequeno’ e ‘nenhum’ para o alinhamento, na opção de escolha do layout que se abrirá em seguida. Atenção: suba uma imagem por tag, senão não irá funcionar. Se você mudar para a opção "Escrever" não vai funcionar, porque a opção abaixo não vai aparecer. =)


6. Só depois de completar tudo mude para o modo ‘Escrever’ para ver como ficou, e se quiser, insira legendas nas fotos.

IMPORTANTE: as tags para ‘mudar a linha’ são as "tr" e "/tr". Ou seja, o código original te dá uma galeria com 3 fotos, mas se quiser com 4 ou mais fotos, basta inserir essas tags no local desejado. Eu, por exemplo, nesta página inseri as tags após a segunda imagem, pois o corpo de post do meu bloguim é estreito e as miniaturas ficam meio grandinhas.

Voilá! Agora é só repetir o mesmo processo nas fotos restantes!
Eu disse que era fácil. Até a próxima, macacada.


Special thanks to Mr. Divers, the original author. =D

See the complete post here

Próximo
« Prev Post
Anterior
Next Post »

22 comentários

Clique e deixe seus comentários
Debora
admin
quinta-feira, 18 setembro, 2014 ×

Seu post foi de muita ajuda pra mim. Obrigada :D

http://blog.chocowlat.com

Reply
avatar
Juh
admin
domingo, 11 janeiro, 2015 ×

Esse post me ajudou demais! Muito obrigada!

Reply
avatar
Unknown
admin
terça-feira, 17 fevereiro, 2015 ×

não aparece a escolha de layout após eu escolher a imagem

Reply
avatar
Unknown
admin
terça-feira, 07 abril, 2015 ×

ajudou muito, vlww :3
http://um1diariogeek.blogspot.com.br/

Reply
avatar
quarta-feira, 15 julho, 2015 ×

Nossa, ajudou demais!! Agora posso colocar meus desenhos no meu Blog, estou muito feliz!!

Reply
avatar
Takamura San
admin
domingo, 21 agosto, 2016 ×

Muito obrigado pelo post. Foi vital aqui pra mim. Grande abraço.

Reply
avatar
Anônimo
admin
terça-feira, 11 outubro, 2016 ×

muitoo obrigadooooo

Reply
avatar
quinta-feira, 13 julho, 2017 ×

Mateus, você tem de fazer todo o procedimento no modo HTML. Se for para o modo Escrever, não aparece essa escolha de layout =)

Reply
avatar
sexta-feira, 14 julho, 2017 ×

É isso aí! Muito sucesso com seu portfolio! =D

Reply
avatar
segunda-feira, 17 julho, 2017 ×

Valeu pela visita, pessoal! ^^

Reply
avatar
Foxie
admin
sexta-feira, 20 outubro, 2017 ×

Não estou conseguindo copiar o código..

Reply
avatar
A própria
admin
sexta-feira, 17 novembro, 2017 ×

kkkkk Não da para copiar o código kkk

Reply
avatar
sexta-feira, 24 novembro, 2017 ×

Oi, Laryssa! Já alterei o script de cópia, agora dá pra copiar... Pode tentar! kkkkkkk

Reply
avatar
sexta-feira, 24 novembro, 2017 ×

Valeu por avisar, pode tentar que agora dá certo! kkkkkkkkk

Reply
avatar
quinta-feira, 08 fevereiro, 2018 ×

muito bom! mas não dá pra copiar o código...hehehe

Reply
avatar
Actionbrasil
admin
sexta-feira, 09 março, 2018 ×

Não ta dando pra copiar

Reply
avatar
Thallison
admin
segunda-feira, 12 março, 2018 ×

Não dá pra copiar o código moça

Reply
avatar
Brian
admin
quinta-feira, 23 janeiro, 2020 ×

Muito obrigado! Excelente dica.

Reply
avatar
quinta-feira, 17 dezembro, 2020 ×

MARAVILHOSO tuorial de galeria de imagens para blog!
Thanks!

Reply
avatar
Anônimo
admin
sábado, 03 abril, 2021 ×

Tchê!! Esse post me ajudou demais!!

Reply
avatar
Anônimo
admin
quarta-feira, 20 setembro, 2023 ×

Ajudou muito, muito obrigado.

Reply
avatar

Deixe seu comentário! Críticas construtivas e sugestões são muito bem vindas. ConversionConversion EmoticonEmoticon