블로그 링크에 프리뷰 기능을 - Snap
Blog / Web2.0 2006/12/10 10:35
요즘 블로그를 돌아다니다 보면 링크에 마우스 포인트를 올려 놓으면 링크된 싸이트의 미리보기가 조그마한 창이 떠서 미리 보여준다. 어찌나 신기해 하던지. 이 기능이 바로 snap™ 이었다.
블로그나 홈페이지에 적용하는 방법도 너무나 쉽다.
1. http://www.snap.com/about/spa1A.php 에가서 "Get info Now!"를 클릭
2. 자신의 홈페이지 주소와 이메일 등을 일력하고 나면 홈페이지에 삽입할 코드를 준다.
3. 그 코드를 적용할 홈페이지 문서 </head> 전에 삽입하면 끝~!
너무나 쉽다. 자신의 블로그나 홈페이지도 이런 쉽고도 편안 기능을 삽입하여 보자~!
추가팁
snap의 링크 'preview popup' 팝업창에서 'Search' 항목을 없애는 방법
자바스크립 문장중에 'sb=1' 을 'sb=0'으로 수정하면 스냅샷의 프리뷰창에 검색관련 항목이 사라진걸 볼 수 있다.
추가팁2
snap팁을 적용하게 되면 링크 뿐만 아니라 블로그에 올라온 사진이나 그림 파일에 까지도 썸네일을 만들어서 보여준다. 원인은 Lightbox 플러그인 때문인거 같은데.. Lightbox 플러그인을 켜도 내부 이미지 링크의 썸네일이 안 뜨도록 하는 팁이다. 참고로 이 팁은 리나님 블로그에 인용 된걸 참고했습니다.
내부 이미지 링크 썸네일을 안뜨게 하려면.. 다음과 같은 소스를 문서의 </body> 태크 앞에 넣어주면 된다.
티스토리의 첨부파일 경로는 fs.tistory.com 과 cfs1.tistory.com 이다. 따라서
이렇게 </body> 태크 앞에 넣어주게 되면 Lightbox 플러그인을 사용해도 내부 이미지 링크가 썸네일로 보여주는 걸 막을 수 있다. 다시 한 번 리나님께 감사의 인사를 드립니다.^^
블로그나 홈페이지에 적용하는 방법도 너무나 쉽다.
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>
//<![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>
//<![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 플러그인을 사용해도 내부 이미지 링크가 썸네일로 보여주는 걸 막을 수 있다. 다시 한 번 리나님께 감사의 인사를 드립니다.^^
'Blog / Web2.0' 카테고리의 다른 글
| CSS 마스터 전략 (2) | 2006/12/18 |
|---|---|
| 자신의 블로그를 그래픽으로 표현해보자 - Websites as Graphs (12) | 2006/12/14 |
| 블로그 링크에 프리뷰 기능을 - Snap (13) | 2006/12/10 |
| 강력한 일정관리 Scrybe™ (4) | 2006/12/06 |
| 올블로그 클로즈베타 2.3 리뷰 (4) | 2006/12/05 |
| FireFox 2.0 플러그인 (0) | 2006/10/25 |
-
-
-
Dongki 2006/12/10 12:28
리나님 안녕하세요.. 삽입 그림의 프리뷰 기능은 Lightbox 플러그인 때문에 그런거 같네여. 일단은 Lightbox 플러그인 기능을 꺼 놨는데. 좀 살펴봐야겠네요..
좋은 정보 고맙습니다.^^
-
-
新─Nagato™ 2006/12/10 14:06
호옷.. 서치 기능이 사라졌네요~ 좀더 심플해졌습니다!
(그런데.. 서치 기능은 무엇에 쓰는것인지..)
그리고 말씀해주신대로 Lightbox를 끄니.. 해결되는군요
하지만 Lightbox 플러그인도 쓰고 싶은데.. ㅠ.ㅠ;; -
-
iendev 2006/12/14 00:49
저도 예전부터 사용은 하고 있었습니다만.. search 부분 지우는것은 처음 알았네요.. ^^;; 뭐., 신경안쓰고 걍 그대로 첨부한 터라.. ㅎㅎ 감사합니다.
-
나시마료 2007/01/21 13:38
정말 좋은 정보네요~~ 잘 배우고 제 블로그에 적용합니다^^ 트랙백 날립니다~~
그런데 댓글에 남겨진 상대방의 아이디에 올렸을 때 썸네일이 안보여지는 건 위의 코드 중 내부링크가 썸네일로 안보여지게 하는 소스때문인가요?? -
일마레 2008/03/20 18:30
혹시 붙이고 난 다음에 자바스크립트 오류 나지 않나요.
아시는 분 답변좀 부탁 드립니다.
