HTML, CSS e Javascript

Adicionando Flickr

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 😊


Comentários

Atenção: Não é possível realizar novos comentários nesta página pois ela será descontinuada em breve, assim como todos os outros tutoriais da sessão Extras.
  • Daniela Soares

    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 ;)

ir ao topo