잠시만 기다려 주세요. 로딩중입니다.


트위터 기업 블로그를 가면, 우측 사이드바에 Photos 라는 영역이 있습니다. 해당 영역은 플리커 계정 사진을 심플하게 블로그 사이드바에 보여지게 하고 있습니다.

트위터 블로그 소스를 보면 아래와 같은 내용을 볼 수 있습니다.

<div class='flickr'>
<script src='http://www.flickr.com/badge_code_v2.gne?
count=5&display=latest&size=s&layout=h&source=user&user=34178660@N03'
type='text/javascript'></script></div>


위 소스에서 "user=" 위에 붙은 34178660@N03 가 본인의 고유 계정입니다. 그리고 "count=" 뒤의 숫자는 보여지는 사진 개수입니다. 고유 계정을 확인 하는 방법은 플리커에 가서 로그인 후 자신의 사진을 클릭하면 주소창 위에 자신의 계정이 보입니다.


제 사진 주소인데요, 7231792@N04 이 제 고유 계정입니다. 그렇다면 티스토리 블로그에 플리커를 붙이는 방법을 간단히 알려드리겠습니다.

skin 소스 부분은 위 소스를 사용하시면 됩니다.

<div class='flickr'>
<script src='http://www.flickr.com/badge_code_v2.gne?
count=5&display=latest&size=s&layout=h&source=user&user=자신계정'
type='text/javascript'></script></div>


style 에는 아래의 소스를 사용하시면 됩니다.

/* flickr */
.flickr a img {
margin-right: 1px;
width: 55px;
height: 55px;
border: 4px solid transparent;
margin: -4px -3px -4px -4px;
  -webkit-transition: -webkit-transform .1s ease-in;}

.flickr a:hover img {
border: 4px solid #fff;
-webkit-box-shadow: 0px 1px 3px #83B8D3;
-moz-box-shadow: 0px 1px 3px #83B8D3;
position: relative;
-webkit-transform:rotate(10deg) scale(1.15);
-moz-transform:rotate(10deg) scale(1.15);

.flickr {padding: 4px 0 30px 0;}


.flickr a img 소스에서 width, height는 사진 크기이며 border는 사진 테두리 소스입니다. 나머지는 개인 취향에 맞게 수정하여 사용하시면 될 듯 합니다.

위소스는 메모장으로 첨부합니다.


플리커 밷지를 블로그에 보여지게 하는 외국 블로그 설명 예는 아래 링크에서 좀더 자세히 볼 수 있습니다.

2011. 1. 3. 22:45  ·  몽키 ♡ 연구    · · ·