sábado, 1 de dezembro de 2012

Gadget do flickr que uso no blog

Tumblr_mdrc2my5xl1qlozqgo1_500_large
Hi gurias  a pedido de uma leitora  vou disponibilizar pra vocês o gadget do flickr que eu uso aqui no blog, veja:


É bem fácil! E eu já vou dar o código personalizado igual ao print - podem me amar hahaha - mas quem quiser pode modificar as cores (:

Se  você quer ter uma galeria de imagens como essa, no seu blog também, é só ir no seu HTML e colar o código abaixo acima de 
#flickr {margin: 0px;}

#flickr a img {
background: #FFDAB9;
border: 1px solid #cor da borda;
padding: 5px;
margin-right: 7px; /** distancia entre a extremidade da esquerda **/
margin-bottom: 7px; /** distancia entre a extremidade de baixo **/
}

#flickr a:hover img {
background: #FFE4E1;
border: 1px solid #cor da borda;
padding: 5px;
margin-right: 7px; /** distancia entre a extremidade da esquerda **/
margin-bottom: 7px; /** distancia entre a extremidade de baixo **/
}
Visualize se estiver tudo OK.Salve. E onde você quer que apareça suas fotos é só adicionar o próximo código como HTMLjavascript


No trecho destacado de laranja ''SUAID'' você vai substituir pelo seu número de identificação do usuário. 

Pra descobrir sua ID é só ir nesse site http://idgettr.com/ e colocar o nome que aparece na sua url do flickr (por exemplo: flickr.com/photos/fulano) nesse caso o nome que aparece é fulano, daí vc escreve fulano e vai aparecer os números do seu ID aí você substitui no trecho destacado de laranja ''SUAID''

Ah onde está ?count=9 é o lugar que configura a quantidade de imagens que irá aparecer (no meu está 9, por exemplo).
                                                               
                                P.s Aprendi no madlyluv.com (:                                     Espero que tenham gostado do mini tutorial,                                                    dúvidas comentem. Bye Bye!

32 comentários :

  1. Não tenho ficklr, mais gostei do tutorial rs' eeei amr , porque você não faz layouts free e disponibiliza pra gente ? >< beijooos!

    www.soentreamigas15.blogspot.com

    ResponderExcluir
  2. @Steffany Falta de tempo :i:
    Quem sabe em breve eu não volte a postar ? (:

    ResponderExcluir
  3. Acho sua galeria de imagens muito legal,eu fiz a minha com a tuto da imagem zoom que eu vi aqui :h:

    Ve lá o que você achou,eu devo admitir que foi muito difícil deixar desse jeito,mas valeu a pena

    http://variedadesdecoisasparagarotas.blogspot.com.br/p/galeria.html

    ResponderExcluir
  4. Ah, eu não tenho flickr, mas adorei o tuto e tenho certeza que vai ser útil pra mt gente !

    naidadeteen.blogspot.com

    ResponderExcluir
  5. Jackie, você sabe algum código parecido, só que ao invés do Flickr, a conta do Instagram? Se souber, posta um tutorial, por favor! Obrigada! Amo seu blog, além de fofo as postagens são ótimas!

    www.blog-sweetluv.blogspot.com

    xoxo,mimi.

    ResponderExcluir
  6. Jackie por favor ensina como fazer um gadget igual o que contem a tua foto :j:

    ResponderExcluir
  7. Nossa Jackie amei o tuto,o blog ta lindo!Parabens!
    docecerejinha.blogspot.com.br<<<visite!

    ResponderExcluir
  8. Putz, valeeeu, jackie. Aííí, nada que eu ponho no ]]> pega...as vezes nem dá erro, simplesmente não aparece. Tipo pra mudar a área dos comentários e pôr as imagens dos afiliados hoover. Pq isso hein? Já catei no google, mas naaadaaa! Dá uma passada lá, se tiver tempo, vê mais de uma página?!(é q eu pus muito post novo de uma vez)

    brogandome.blogspot.com

    ResponderExcluir
  9. Muito bom o tutorial quando eu criar um Flickr vou voltar aqui para procurar esse tutorial rs.

    bruhalmeidas2.blogspot.com

    ResponderExcluir
  10. @mimi Do instagram eu ainda não sei :(
    Brigada pelo carinho guria, biezos

    ResponderExcluir
  11. @Sarah qual? a do cabeçalho? o gadeget de pesquisa?

    ResponderExcluir
  12. @Sarah Esse é um pouquinho mais complicado pra explicar então quando eu tiver um tempinho extra faço o tutu tá?
    (prometo) beijuuus

    ResponderExcluir
  13. Muito útil, pois eu também tenho um flickr e não sabia como botar. Valeu Jackie!

    ResponderExcluir
  14. Muito bom! Já coloquei no meu blog!
    Beijo e obrigado pela atenção =)
    http://luanarita.blogspot.pt/

    ResponderExcluir
  15. Oi jack , seu blog é DIVOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO , o meu é http://tudo-das-tendencias.blogspot.com.br/ mais ele ta todo errado , eu imploro , beijo o seu pé !! me ajude !!

    ResponderExcluir
  16. Amei o tutorial, funcionou direitinho, amei o blog também, é a primeira vez que visito mas voltarei muita vezes com certeza *-* , já estou seguindo poderia retribuir ?
    http://portaljuntoemisturado.blogspot.com.br/
    Beijos, voltarei em breve ¬¬

    ResponderExcluir
  17. Jackie, eu postei esse tutorial no meu blog. Eu usei duas versões, uma que eu montei e a sua, tudo bem? '-'

    www.themadtown.com

    ResponderExcluir
  18. Adoorei essa dica, obrigado, meu blog cada vez mais bonitinho! :3

    ResponderExcluir
  19. Gostei muito do tutorial! Ajudou bastante, gostaria de saber se há como deixar que as imagens (thumbs) abra em uma nova janela? E se há como diminuir ou aumentar o tamanho dos quadrados!
    Um abraço!

    ResponderExcluir
    Respostas
    1. Olha faz muuito tempo que eu não mexo com esse código, mas se não me engano enquanto menor for o numero do count= maior serão as imagens

      Excluir
    2. ah e para abrir em uma nova guia é só tentar isso> http://isjackiezzdream.blogspot.com.br/2011/06/links-abrir-em-outra-guia.html

      Excluir
  20. Gostaria de saber também se tem como deixar as últimas adicionadas no flickr em destaque e não aleatoriamente como está (random) Abraços!

    ResponderExcluir
    Respostas
    1. é só substituir a palavra random por lastest (:

      Excluir
    2. Oi Jackie pensei que tinha dado certo, tentei tirar a palavra random (pensei que tinha dado pois ficou as últimas, mas logo coloquei mais imagens e não mudou pras mais recentes continuou as que tavam antes), depois substitui por lastest e continou como se tivesse random (aleatório), tb não consegui fazer com que eles abrissem em nova guia não funcionou! Se puder me ajudar ficarei grato! =D

      Excluir
    3. Então Jamerson, esses códigos comigo deram certo (na época que eu utilizava esse gadget).

      Excluir
  21. Valeu deu certo apenas apaguei a palavra random e deu! Valeu!! Agora só não deu em como abrir as imagens da galeria em nova guia, teria como fazer isso apenas nesse gadget?!

    ResponderExcluir
  22. Gostei do gadget, pena que não funciona mais.

    ResponderExcluir

.