IE8 웹조각(Web Slice) 만들기
Publisher/WEB2.0 / 2009. 11. 2. 17:09
네트웍이 안되는 특수환경에서 프로젝트를 진행하다 복귀해 보니 최신정보에 상당히 둔감해졌다는 생각이 많이 든다.
그래서 꿈춰두었던 내용들을 살포시 꺼내본다.
Internet Explorer 8 출시 이후 이미 모든 포털에서 웹조각(Web Slice)기능들을 많이들 구현해 놓았는데
혹시나 모르시는 분들이 계실것 같아서 웹조각 만드는 방법에 대해서 공유한다.
최종 HTML소스
webSlice.rar
결과화면 : 로컬에서 해서 안되서 서버를 띄웠답니다. ㅡ.,ㅡ;
웹조각 추가하기
실제 적용예
웹조각 삭제하기
원본소스 나갑니다.
<div id="bugslice" class="hslice">
<div class="entry-title">데꾸벅 웹조각 테스트 제목</div>
<div class="entry-content">
웹조각 내용이 들어가는곳입니다.<br />
.entry-title을 display:none이나 화면에 필요한걸로 바꾸면 되겠죠<br />
<!--[if gte IE 7]>IE8에서 되는기능이므로 로도 처리해 되겠죠<![endif]-->
아이디값은 나중에 버튼으로 추가하려면 좋아요~
</div>
</div>
<div class="entry-title">데꾸벅 웹조각 테스트 제목</div>
<div class="entry-content">
웹조각 내용이 들어가는곳입니다.<br />
.entry-title을 display:none이나 화면에 필요한걸로 바꾸면 되겠죠<br />
<!--[if gte IE 7]>IE8에서 되는기능이므로 로도 처리해 되겠죠<![endif]-->
아이디값은 나중에 버튼으로 추가하려면 좋아요~
</div>
</div>
<html>
<head>
<title>Web Slice Example</title>
</head>
<body>
<div class="hslice" id="SliceID">
<span class="entry-title">Slice Title</span>
<a rel="entry-content" href="http://techbug.tistory.com/" style="display:none;">
실시간 웹조각 컨텐츠
</a>
<a rel="bookmark" href="http://techbug.tistory.com/" style="display:none;">북마크할때</a>
<a href="http://techbug.tistory.com/" target="_blank">웹조각의 링크를 다른창으로 열때</a>
<span class="endtime" title="25 Jul 2008 17:30:00 PST" style="display:none;">캐쉬없앨때</span>
</div>
</body>
</html>
<head>
<title>Web Slice Example</title>
</head>
<body>
<div class="hslice" id="SliceID">
<span class="entry-title">Slice Title</span>
<a rel="entry-content" href="http://techbug.tistory.com/" style="display:none;">
실시간 웹조각 컨텐츠
</a>
<a rel="bookmark" href="http://techbug.tistory.com/" style="display:none;">북마크할때</a>
<a href="http://techbug.tistory.com/" target="_blank">웹조각의 링크를 다른창으로 열때</a>
<span class="endtime" title="25 Jul 2008 17:30:00 PST" style="display:none;">캐쉬없앨때</span>
</div>
</body>
</html>
이벤트핸들러로 달기
<input type="button" value="웹조각 추가"
onclick="external.AddToFavoritesBar('http://localhost/webSlice.html#bugslice','설명','slice')" />
onclick="external.AddToFavoritesBar('http://localhost/webSlice.html#bugslice','설명','slice')" />
DIV대신 a태그 사용시 (웹조각에서 보여줄 페이지 지정하기)
<a rel="entry-content" href="http://techbug.tistory.com"> </a>
<div class="hslice" id="아이디값">
<span class="entry-title">링크로처리할때</span>
<a rel="entry-content" href="링크주소.html" style="display:none;"></a>
</div>
<div class="hslice" id="아이디값">
<span class="entry-title">링크로처리할때</span>
<a rel="entry-content" href="링크주소.html" style="display:none;"></a>
</div>
Feed용
<a rel="feedUrl" href=http://techbug.tistory.com/script/powerEditor/pages/">
<div class="hslice" id="아이디값">
<span class="entry-title">링크로처리할때</span>
<a rel="feedurl" href="피드주소.html" style="display:none;"></a>
</div>
<div class="hslice" id="아이디값">
<span class="entry-title">링크로처리할때</span>
<a rel="feedurl" href="피드주소.html" style="display:none;"></a>
</div>
북마크용
<div class="hslice" id="아이디값">
<span class="entry-title">링크로처리할때</span>
<a rel="bookmark" href="북마크.html" style="display:none;"></a>
</div>
<span class="entry-title">링크로처리할때</span>
<a rel="bookmark" href="북마크.html" style="display:none;"></a>
</div>
웹조각 아이콘 바꾸기
원래의 웹조각 아이콘을 바꾸는 방법입니다. 기존 파비콘(favicon)을 바꾸는 방법과 마찬가지로 아래와 같은 방법으로 바꿀수 있습니다.
<link
rel="default-slice"
type="application/x-hatom"
href="#웹조각아이디값" />
rel="default-slice"
type="application/x-hatom"
href="#웹조각아이디값" />
웹조각기능끄기
이미지툴바기능끄기와 같은 방법으로 웹조각 기능끄기 태그는 아래와 같습니다.
<meta name="slice" scheme="IE" content="off"/>
웹조각캐쉬없애기 (다음글을 참조하세요)
<span class="endtime" title="25 Jul 2008 17:30:00 PST" style="display:none;">캐쉬없앨때쓰기</span>
파이억폭스에서도 IE의 웹조각기능 사용하기
Firefox용 플러그인 WebChunks 3.5에서도 되네요
IE8에 새로 도입되는 WebSlices 기능을 파이어폭스에서 구현한 확장기능입니다.
툴바에서 Webslices 기능이 지원되는 사이트의 업데이트를 보기 좋게 확인 할 수 있습니다.
다운로드
다음글도 참조하세요 :
즐코딩하시길... 간만에 데꾸벅이였습니다.
'Publisher > WEB2.0' 카테고리의 다른 글
| 인터넷 익스플로러 버그 95가지 (0) | 2010.03.02 |
|---|---|
| 내 웹사이트의 속도를 빠르게! (3) | 2009.12.14 |
| 웹표준 UI/UX 그리고 프리젠테이션 (0) | 2009.04.15 |
| Web 2008 통계 (0) | 2009.01.12 |
| 구글크롬 테스트 및 브라우저버전체크 스크립트 (6) | 2008.09.03 |