[Tutorial] Imagens do Flickr no Blogger

Hey! De novo estou demorando pra postar, o motivo é que eu queria fazer o post que pediram da Tour pelo meu quarto, só que nem a qualidade das imagens da câmera e nem as do celular estão ficando boas. Tentei usar até o smartphone do meu pai e nada! Pra vocês terem uma ideia das imagens, olhem a foto da página Sobre xD

Maaas voltando para o assunto do post, eu queria há muito tempo colocar um gadget de fotos no blog, só que como eu não tenho o tal do Instagram (nem um celular que suporte ele), tive que procurar alguma coisa pra substitui-lo. Pesquisei por outros aplicativos, mas só encontrei um de fotos que quase ninguém conhece. Desisti. Aí lembrei que tinha visto umas fotos de Flickr em blogs e corri procurar. Encontrei e trouxe pra mostrar a vocês.

Ah, decidi postar dois modelos para o post ficar mais completo. O do blog True-Luv.com com uma pequena e simples edição minha e o do blog Jackie Dream (que a Jackie encontrou no MadlyLuv.com). Vamos lá?

Primeiro adicione um gadget HTML/Javascript e cole o seguinte código:

<div id="flickr">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=6&display=random&size=s&layout=x&source=user&user=IDDOFLICKR">
</script></div>

Entendendo alguns códigos:

count=6: É a quantidade de imagens que você vai escolher para aparecer no blog.

size=s: É o tamanho da imagem. Você pode escolher entre s (quadrado), t (miniatura) ou m (tamanho médio).

layout=x: É a posição das fotos, pode ser alterada para h (horizontal), v (vertical) ou x (nenhuma posição).

IDDOFLICKR: É aonde você irá colocar a sua id do Flickr. Caso você não saiba qual é, você pode descobrir no http://idgettr.com/ .

Após alterar isso salve e vamos para a segunda parte. Personalizar o gadget. Vá em Modelo >> Editar HTML >> Dê Ctrl+F e procure por ]]></b:skin>.

Cole o seguinte código (acima de ]]></b:skin>) se você quer que o hover seja na imagem inteira como no exemplo abaixo:

  .flickr a img{
  margin: 3px;
  margin-bottom: 1px;
  padding: 1px;
  background: none;
  border: 1px solid #XXXXXX;
  filter:alpha(opacity=45); -moz-opacity:0.45; opacity:0.45;-webkit-transition-duration: .70s;
  }

  .flickr a img:hover{
  margin: 3px;
  margin-bottom: 1px;
  padding: 1px;
  background: none;
  border: 1px solid #XXXXXX;
  filter:alpha(opacity=100);    -moz-opacity:1.0;    opacity:1.0;-webkit-transition-duration: .70s;
  }

Mas se você quer que apenas a borda seja hover (mude de cor), aí tem a versão da Jackie como no exemplo abaixo:

 

    .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 hover;
    padding: 5px;
    margin-right: 7px; /** distancia entre a extremidade da esquerda **/
    margin-bottom: 7px; /** distancia entre a extremidade de baixo **/
    }

Então é isso. Gostaram do tutorial? Qualquer dúvida perguntem (: