'snap'에 해당되는 글 1건

  1. 2006/12/10 블로그 링크에 프리뷰 기능을 - Snap (13)

블로그 링크에 프리뷰 기능을 - Snap

요즘 블로그를 돌아다니다 보면 링크에 마우스 포인트를 올려 놓으면 링크된 싸이트의 미리보기가 조그마한 창이 떠서 미리 보여준다. 어찌나 신기해 하던지. 이 기능이 바로 snap™ 이었다.
블로그나 홈페이지에 적용하는 방법도 너무나 쉽다.

1. http://www.snap.com/about/spa1A.php 에가서 "Get info Now!"를 클릭
2. 자신의 홈페이지 주소와 이메일 등을 일력하고 나면 홈페이지에 삽입할 코드를 준다.
3. 그 코드를 적용할 홈페이지 문서 </head> 전에 삽입하면 끝~!

너무나 쉽다. 자신의 블로그나 홈페이지도 이런 쉽고도 편안 기능을 삽입하여 보자~!
사용자 삽입 이미지

링크에 마우스 포인트를 올려놨을 때 나타나는 Preview

추가팁
snap의 링크 'preview popup' 팝업창에서 'Search' 항목을 없애는 방법
자바스크립 문장중에 'sb=1' 을 'sb=0'으로 수정하면 스냅샷의 프리뷰창에 검색관련 항목이 사라진걸 볼 수 있다.

추가팁2
snap팁을 적용하게 되면 링크 뿐만 아니라 블로그에 올라온 사진이나 그림 파일에 까지도 썸네일을 만들어서 보여준다. 원인은 Lightbox 플러그인 때문인거 같은데.. Lightbox 플러그인을 켜도 내부 이미지 링크의 썸네일이 안 뜨도록 하는 팁이다. 참고로 이 팁은 리나님 블로그에 인용 된걸 참고했습니다.

내부 이미지 링크 썸네일을 안뜨게 하려면.. 다음과 같은 소스를 문서의 </body> 태크 앞에 넣어주면 된다.
<script type="text/javascript">
//<![CDATA[
  //change sites internal links to class "snap_nopreview"
  var links = document.getElementsByTagName('a');
  for (var l = 0; l < links.length; l++) {
      if(links[l].href.match(/^http:\/\/www\.example\.com/)){
         links[l].className += "snap_nopreview";
      }
  }
//]]>
</script>

티스토리의 첨부파일 경로는 fs.tistory.com 과 cfs1.tistory.com 이다. 따라서

<script type="text/javascript">
//<![CDATA[
  //change sites internal links to class "snap_nopreview"
  var links = document.getElementsByTagName('a');
  for (var l = 0; l < links.length; l++) {
      if(links[l].href.match(/^http:\/\/fs\.tistory\.com/)){
          links[l].className += "snap_nopreview";
      }
  }
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
  //change sites internal links to class "snap_nopreview"
  var links = document.getElementsByTagName('a');
  for (var l = 0; l < links.length; l++) {
      if(links[l].href.match(/^http:\/\/cfs1\.tistory\.com/)){
          links[l].className += "snap_nopreview";
      }
  }
//]]>
</script>

이렇게 </body> 태크 앞에 넣어주게 되면 Lightbox 플러그인을 사용해도 내부 이미지 링크가 썸네일로 보여주는 걸 막을 수 있다. 다시 한 번 리나님께 감사의 인사를 드립니다.^^
Trackback 4 Comment 13
  1. BlogIcon 新─Nagato™ 2006/12/10 11:17 address edit & del reply

    멋진데요!
    후핫! 좋은 정보 감사드립니다! (빨리 설치해야지..)

    P.S 트랙백 걸께용~

    • BlogIcon Dongki 2006/12/10 12:26 address edit & del

      좋은 정보였다니 고맙습니다.^^
      잘 사용하세요~~!! 저도 트랙백 날려드릴게요~!!

  2. BlogIcon 리나 2006/12/10 11:27 address edit & del reply

    그림 삽입도 프리뷰를 보여주면 보기가 좀 그렇던데...
    내부 링크 프리뷰는 꺼보시는 것이... ^^

    • BlogIcon Dongki 2006/12/10 12:28 address edit & del

      리나님 안녕하세요.. 삽입 그림의 프리뷰 기능은 Lightbox 플러그인 때문에 그런거 같네여. 일단은 Lightbox 플러그인 기능을 꺼 놨는데. 좀 살펴봐야겠네요..
      좋은 정보 고맙습니다.^^

  3. BlogIcon 新─Nagato™ 2006/12/10 14:06 address edit & del reply

    호옷.. 서치 기능이 사라졌네요~ 좀더 심플해졌습니다!
    (그런데.. 서치 기능은 무엇에 쓰는것인지..)

    그리고 말씀해주신대로 Lightbox를 끄니.. 해결되는군요
    하지만 Lightbox 플러그인도 쓰고 싶은데.. ㅠ.ㅠ;;

    • BlogIcon Dongki 2006/12/13 18:25 address edit & del

      리나님 블로그에 정답이 있습니다. 잘 해결하셨으리라 믿습니다.^^*

  4. BlogIcon 리나 2006/12/12 22:10 address edit & del reply

    제 블로그에 티스토리에서 내부 링크 프리뷰 끄는 방법 간단히 추가했습니다.
    snap FAQ에 있는 내용이지만...참고해 보세요. ^^

    • BlogIcon Dongki 2006/12/13 18:25 address edit & del

      리나님 고맙습니다. 리나님 포스팅된 글을 보고 잘 해결하였습니다. 고맙습니다.^^

  5. BlogIcon iendev 2006/12/14 00:49 address edit & del reply

    저도 예전부터 사용은 하고 있었습니다만.. search 부분 지우는것은 처음 알았네요.. ^^;; 뭐., 신경안쓰고 걍 그대로 첨부한 터라.. ㅎㅎ 감사합니다.

    • BlogIcon Dongki 2006/12/14 10:04 address edit & del

      snap홈페이지 돌아 다니다 보니 발견해서 적용해 본겁니다. 있으나 없으나 마찬가지 인거 같은데요~~^^:

  6. BlogIcon 나시마료 2007/01/21 13:38 address edit & del reply

    정말 좋은 정보네요~~ 잘 배우고 제 블로그에 적용합니다^^ 트랙백 날립니다~~
    그런데 댓글에 남겨진 상대방의 아이디에 올렸을 때 썸네일이 안보여지는 건 위의 코드 중 내부링크가 썸네일로 안보여지게 하는 소스때문인가요??

  7. BlogIcon 개복치 2007/01/29 02:20 address edit & del reply

    내부 이미지도 뜨는게 마음에 걸렸었는데 해결이 되었네요. 감사합니다.^^

  8. 일마레 2008/03/20 18:30 address edit & del reply

    혹시 붙이고 난 다음에 자바스크립트 오류 나지 않나요.
    아시는 분 답변좀 부탁 드립니다.