19 janeiro 2013

Colocando galeria de fotos no blog ou no tumblr

  Bom me mandaram um e-mail me perguntando como eu coloco "Galeria de Fotos" aqui no AC. E eu achei melhor não responder só para a menina por e-mail e sim postar um tuto publico aqui no AC.
  As fotos que aparecem na minha galeria são as últimas fotos que eu publiquei no flickr. Então,para seguir esse tutorial,você tem que ter uma conta no flickr. Caso não tenha,crie aqui
 PS.O código que vou postar serve tanto para blog quanto para tumblr ok? Vamos lá:

01. Adicione esse código onde você quer que apareça (se quiser,vá em layout,adicionar uma gadget,html/java)

<div class="flickr"><script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=5&amp;display=latest&amp;size=s&amp;layout=h&amp;source=user&amp;user=0000000000000"></script></div>Créditos a <a href="http://assimcomplica.tumblr.com">Assim Complica</a>
Entendendo o código:

count=5 é a quantidade de fotos que serão mostradas
display=latest diz que somente as ultimas fotos serão mostradas. Caso queira que seja fotos aleatórias, mude para "random" 
size=s é o tamanho, você pode muda para t ou m
layout=h é a posição das fotos h fica na horizontal, v fica na vertical e x para nenhuma posição
user=0000000000000 mude o "0000000000000" pela sua ID do flickr

PS. Para descobrir sua ID do Flickr,entre nesse site: http://idgettr.com coloque o endereço do seu flickr e clique em "find".

02.  Agora entre em modelo,editar html e coloque depois de <style type="text/css"> esse código:
PS. Se você esta usando esse código para o tumblr, apenas acrescente depois de <style>


.flickr a img{
margin: 5px;
padding: 7px;
background-color: #fff;
border: 1px solid #000;
}

Onde tem 5 e 7 em negrito,é o tamanho da margem da foto (pode trocar por 2 e 3 por exemplo)
Onde tem #fff em negrito,é a cor da margem (branca)
Onde tem #000 em negrito,é a cor da borda da foto (preta)

Bom,é isso ai! Se usar,credite tudo bem? E não retire os créditos jamais! Obrigada e até a próxima,beijuus*

Ajudinha: true-luv

20 comentários:

  1. Como faço pra colocar mais de uma foto por linha? Queria colocar 3 fotos na msm linha pra alinhar.

    ResponderExcluir
    Respostas
    1. no código 02,você vai trocar o 5 e o 7 pelo 2 e o 3. :D

      Excluir
  2. Tuto super útil! Valeu mesmo. Vou usar no meu tumblr e não vou tirar os créditos :))

    ResponderExcluir
  3. oláaaaaa leticia,onde é mais adequado pra mim colocar o código 02? Logo abaixo?

    ResponderExcluir
  4. Coloquei minha galeria do flickr no meu blog.(naum tirei os créditos) ficou perfeito só que as fotos estão ficando uma em baixo da outra e eu queria do lado (igual ao seu )Como faço isso?

    ResponderExcluir
    Respostas
    1. Para ficar igual ao meu,amor você tem que trocar no código 01, o count=5 por count=6. E no código 02, trocar o 5 e o 7 pelo 2 e o 3 :D

      Excluir
  5. ta demais esse tuto cara! sempre quis saber mas nunca nenhuma pessoa teve a paciência de explicar como você. Obrigadaaaa! Ficou lindo no meu tumblr

    ResponderExcluir
  6. To usando no meu blog. Obrigada pelo tuto.

    ResponderExcluir
  7. lelets vc disse para o anony "qualquer lugar do css" onde fica esse css no tumblr?

    ResponderExcluir
  8. esse tuto serve para wordpress?

    ResponderExcluir
  9. adoro o seu blog! Perfeitoooo

    ResponderExcluir
  10. leticia,na sua galeria quando agt passa o mouse em cima da foto aparece um coisa escrita tipo "Euzinha" ou "Vamos passar o dia lendo?" Como eu escrevo isso nesse código?

    ResponderExcluir
    Respostas
    1. Não precisa escrever,amor. Quando você posta uma foto no flickr,ele pede um titulo para a foto né? então,é o titulo da foto que aparece ali automaticamente :D

      Excluir