서울비

 블로그의 링크에 마우스를 대면 해당 사이트의 미리보기 스냅샷이 뜹니다.
쓰기에 따라 유용할 수도 있는 기능이지요.

예를 들어 우리학교 모금 이라고 쓰고 http://www.edagawa.net/ 를 링크하면
스크린샷을 해서 이미지를 따로 첨부하지 않아도 자동으로 아래와같이 스냅샷을 보여줍니다.

우리학교

디트리히 본회퍼

프리윈디 오카리나

그럼 이 플러그인을 설치하는 과정을 상세하게 안내해 드리겠습니다.



▼ 먼저 http://www.snap.com  에 접속합니다.


 ▼ 오른쪽 위에 블로거Bloggers 라고 써있는 부분에서 초록색 GET STARTED 를 클릭합니다.




▼  자 그럼 아래와 같이 화면이 바뀌었습니다. 환경설정 화면입니다.
모든 설정은 계정이 생기면 다시 수정할 수 있습니다.



▼ 우선 색상을 선택합니다. 마음에 드는 색상을 고르시면 됩니다.

 


▼ 블로그 로고그림이 있으면 업로드합니다. 생략하셔도 됩니다. 크기는 100X20 이하입니다.
로고를 업로드하시면 스냅샷에서 로고가 아래에 출력됩니다.



▼ 언어를 선택합니다. 영어 또는 한국어Korean를 선택하세요.




▼ 이곳에 체크하면 링크가 걸려있는 부분에 자동으로 표시가 됩니다.



▼ 그리고 추가적으로 몇가지를 더 설정할 수 있습니다.



▼ 순서대로 설명드리면, 아이콘그림을 보여줄 것인가? /
아이콘부분만 눌러야 스냅샷이 뜨도록 할 것인가?(글자 빼고) /
크게 보여줄 것인가? / 외부사이트에 스냅샷 사용할 것인지 /
내부 페이지 등의 링크에 스냅샷 사용할 것인지 / 스냅샷 연결 기능 등은 제외하고 프리뷰 그림만 보일 것인지

등등 입맛에 맞게 조정하시면 됩니다.




▼ 설정을 바꿀 때마다 아래에 미리보기 화면으로 스냅샷이 어떤 모양으로 나올 것인지 보여줍니다.

설정이 끝났으면 아래 continue 버튼을 눌러주세요.

 




▼ 자 다음은 블로그 정보를 기입할 차례입니다.
크게 중요한 것은 아니니
편하게 쓰세요. 순서대로 , 사이트의 카테고리 , 카테고리2 , 사이트에 찾아오는 주요 성별,
사이트에 오는 주요 연령, 사이트 방문자의 주요 지역을 고르시면 됩니다.

저는 아무거나 골랐습니다 ;;
 


▼ 자 다음으로 이메일을 쓰시고(이메일은 snapshot 계정의 아이디가 됩니다)
블로그의 주소를 적습니다.

비밀번호 두 번 쓰시구요.




▼ 아래에 있는 약관도 읽어보시고, 동의한다고 체크하신 다음에 Continue 합니다.



▼ 코드복사화면입니다.
화면이 다음과 같이 나옵니다. 왼쪽에 코드가 있습니다.
아직 Continue 버튼을 누르지 마세요.



▼ 왼쪽 코드를 마우스로 복사하세요.




▼ 그리고 티스토리 skin.html 파일에서 body태그가 시작하는 부분을 찾습니다.
티스토리 skin.html은 티스토리 관리화면에서 바로 수정하실 수도 있고 직접수정후 업로드할 수도 있습니다.

저는 제 컴퓨터에 저장해 두었던 skin.htm 파일을 에디트플러스 프로그램으로 열어서 "찾기" 기능을 이용하여 body 문구를 검색했습니다.





▼ 그럼 body태그가 시작하는 위에 아까 복사한 소스를 붙여넣기 합니다.



▼ 자, 다음과 같이 스크립트가 올라갔네요.




▼ 그럼 티스토리로 가서 이 파일을 업로드해줍시다. 스킨에서 바로 올리기 메뉴를 이용하시면 되는 거 아시죠? / 또는 아까 온라인에서 그냥 수정하셨던 분은 "미리보기" 후에 저장버튼 누르시면 됩니다.








▼ 이 과정이 끝나고 아까 스냅샷 페이지로 돌아가서  Continue 버튼을 누르면
인증코드가 메일로 발송되었다고 나옵니다.







▼ 자 이제 메일을 열어서 편지가 잘 왔나 봅시다. 스냅샷에서 메일이 와있군요. 메일을 엽니다.








▼ 이메일을 인증할 차례입니다.
1번의 내용은 아까 완료한 내용이므로 패스하시고(아까 코드 삽입),
2번의 파란 글씨 click here를 클릭해서 이메일을 인증validate합니다. 인증이 끝나면 본인의 블로그로 돌아가서
스냅샷이 제대로 되는지 살펴보세요.






* 기타 설치에 대한 문의사항은 snap.com 을 참고하시거나. 이 게시물에 댓글로 달아주세요.


* 참고로 고급 사용자를 위한 FAQ 가 다음 주소에 정리되어 있습니다.*
http://www.snap.com/snapshots_faq.php#DisableLinks



예를 들어 다음과 같이 응용할 수 있습니다.

특정 링크의 스냅샷기능 차단 :
<a class="snap_noshots" href="http://www.seoulrain.net">www.seoulrain.net<a/>

div 전체 스냅샷 기능 켜기/끄기

• <div class="snap_shots"> (to force the links within the block to have Snap Shots) or
• <div class="snap_noshots"> (to force the links within the block to not have Snap Shots).

아이콘 설정 여부 조정

<div class="snap_trigger_icon"> (아이콘만 켜기)
<div class="snap_trigger_both"> (아이콘, 링크 단어 모두 켜기)
<div class="snap_no_icon"> (아이콘 끄기)