Madly Luv - O mLuv é um blog pessoal no qual aborda vários assuntos como design, músicas, literatura, arte, televisão etc. Desenvolvido e mantido por Ana Flávia Cador.

Adicionando Flickr

Tutorial HTML, CSS e Javascript

O Flickr é a maior novidade que aparece entre o conteúdo do Blogs, só perde para o twitter. Então, para deixar seu flickr bem arrumadinho no seu blog com um CSS bem sofisticado e personalizado, faça o que se pede:

Para ter uma sequencia de fotos quadradas como está em minha sidebar, no local "Fotografia", basta usar esta base em seu CSS e configurá-lo da maneira que quer:

#flickr {margin: 0px;}

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

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

E usar o seguinte código onde quer apareça tuas fotos:

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

Onde está ?count=4 é o lugar que configura a quantidade de imagens que irá aparecer (no meu está 4, por exemplo). Onde está SUAID você vai substituir para seu número de identificação do usuário e onde está escrito random significa que suas imagens aparecerão aleatoriamente. Se quiser que apareçam apenas as mais atuais, troque para lastest.

Descubra a sua ID: Apenas o nome do seu user do flickr (por exemplo: flickr.com/photos/fulano) não dará certo. É necessário do número original. Para você saber qual é, vá no site http://idgettr.com/ que lá dará a ID original do seu flickr ^^

Veja também...

Vida de Freelancer: Quando o design não é o suficiente
Um dia em Piri: Reserva Vargem Grande
Resenha: Sombras Super Shock, da ColourPop
¬¬ zZz x_x o_O ^^ T_T ;D :x :S :P ::teary:: ::sweat:: ::stress:: ::rolleyes:: ::love:: ::cool:: ::blush:: ::attention:: ::angry:: :) :( ._. *o* *O_O


1 Comentário(s)

(1 pelo blog e pelo facebook)
  • Daniela Soares
    Visitar blog
    27 . 09 . 2017

    Oi. Tudo bem?

    Eu implementei esse script no meu blog, mas queria saber como eu faço para mudar o tamanho da thumbnail que aparece. Se puder me ajudar, eu agradeço ;)

    Responder