블로그에 웹조각 적용하는법 - 익스플로러8 웹조각 기능 Web Slice

블로그에 웹조각 적용하는법 - 익스플로러8 Web Slice

웹조각은 무엇인가?

Internet Explorer 8의 새로운 기능인 웹 조각(Web Slices)
웹 조각을 사용하면 해당 웹 사이트나 블로그 특정부분의 변경된 내용을 실시간으로 확인할 수 있습니다.

웹조각을 추가하는 방법과 설정방법 변경등은 아래 비앤아이님의 글을 참조하세요 ^^
제 포스트에서는 웹조각을 블로그에 적용시키는 방법을 소개합니다...

아래글은 티스토리 메인화면 주제별 새 글에 웹조각이 적용되어 있는 모습입니다.
저 녹색 아이콘을 많이 보셧으리라 생각합니다. 실제로 티스토리 뿐만이 아니라 많은 포털에 적용되어있지요 ^^
사실 제 블로그 사이드바의 최근 글에도 달려있긴 합니다만 누가 쓰고 있는지 어떤지는 저도 모르겠네요.

티스토리 메인화면에 적용된 웹조각

웹조각은 말 그대로 인터넷상의 한 부분을 조각내어 익스플로러8의 즐겨찾기 탭에 추가해놓고
실시간으로 업데이트가 이루어지면 알 수 있도록 적용해놓은 기능입니다.
음.. 환율정보나 날씨정보, 아니면 중요한 거래나 이웃 블로그의 새글 업데이트까지 인터넷 하다가 바로 알수 있죠.

웹조각이 사용된 곳

네이버 메인 화면에 웹조각이 3군대가 있습니다. 뭐.. 익스플로러 8 쓰시는 분이라면 마우스 올려보면 다 나옵니다~

네이버에 적용되어있는 웹조각

다음 메인화면에는 몇개가 있을까요?? 두둥~~ 답은 0개 입니다.
그럼 티스토리 메인화면에는 몇개일까요? 역시 3개 입니다.

티스토리에 적용되어 있는 웹조각들

다음 뷰 메인화면에도 물론 3개의 웹조각이 있습니다.
많은 포털과 대형 사이트들에서 자주 업데이트 되는 정보들은 웹조각을 서비스해주고 있습니다.

그렇다면!!! 블로그에도 달 수 있지 않을까? 내 블로그에도 될까? 두둥....
네 잘 찾아오셧습니다. 싼 값에 처리해드리지요... 굽신굽신

블로그에 웹조각 달기

아시는 분은 아실테고 모르시는 분은 모르셧겠지만 제 블로그의 최신글에는 웹조각이 적용되어 있습니다.
웹조각과 RSS 가 있는 사이트에 접속하게 되면, 익스플로러8 은 알아서 체크하여 아래 이미지처럼 보여줍니다.
RSS 피드 알림 아이콘 외에도 웹조각이 있다고 알려주는 것이죠.

2proo.net 에 웹조각이 적용되어 있는 모습

사이드바에 Recent Articles 에 적용되어있는 웹조각입니다 ^^

자... 그럼 이것을 적용하는 방법을 알려드립니다. 사실.... 아주 쉽습니다.

웹조각 소스 알려드립니다..

웹조각 소스.txt

<!-- 웹조각 소스 -->
<div class="hslice" id="ce">
<div class="entry-title" style="display:none">2proo.net Recent Articles</div>
<div class="entry-content">
이곳에 적용할 소스.. 최근 덧글이나, 최근 글이나 최근 트랙백 같은 소스를 넣어줍니다.
</div>
</div>

위 소스에서 id="ce" 라고 있는데 이 ce 부분은 자신이 구별하기 쉽게 써넣으세요 ^^
그리고 2proo.net Recent Articles 이 부분은 실제로 웹조각이 브라우저에 추가되었을때
보여지는 항목이므로 다른 사람들도 알아보기 쉽게 편집해서 쓰시면 됩니다.
그리고 적용할 소스 부분에 웹조각을 적용시킬 항목들을 넣어주시면 됩니다.
 

잘 모르시겠다구요? 음.. 제 블로그 스킨에 실제 적용된 소스를 봅시다.
최근글을 표시해주는 소스 위와 아래로 빨간색 글씨 소스를 첨가하기만 했습니다. ^^
이렇게 보니까 훨씬 쉽죠?

<s_sidebar_element>
<!-- Recent Articles -->
<div id="recentpost">
<!-- 웹조각 소스 -->
<div class="hslice" id="ce">
<div class="entry-title" style="display:none">2proo.net Recent Articles</div>
<div class="entry-content">
<h3>Recent Articles</h3>
  <ul>
   <s_rctps_rep>
    <li>
    <a href="[#_rctps_rep_link_#]">
  [#_rctps_rep_title_#] <span class="cnt">[#_rctps_rep_rp_cnt_#]</span>
  <!-- <cite>By [#_rctps_rep_author_#]</cite> -->
    </a>
    </li>
   </s_rctps_rep>
  </ul>
</div>
</div>
</div>
</s_sidebar_element>

빨간색 줄 총 5줄이 추가되었죠? 위에 3줄, 아래에 2줄 이렇게요. <!-- 웹조각 소스 --> 이 줄은 빼도 됩니다 ^^;;


적용된 소스를 보시고 따라하시면 쉽게 웹조각을 추가하실 수 있을겁니다.
블로그에 제대로 웹조각이 적용되어 마우스를 그 위에 올리면 아래의 녹색아이콘이 나오고
클릭을 하게되면 웹조각 추가 메세지가 나옵니다.
여기까지 된다 성공입니다~ ^^ 박수박수~

웹 조각 추가 메세지

즐겨찾기 탭에 추가된 제 최신글의 웹조각을 눌렀을때 나오는 화면입니다.
밑에 보면 ㅡ> 이렇게 생긴 파란색 아이콘이 있는데 해당 사이트로 이동하자!!! 라는 아이콘이고
재활용 마크처럼 생긴 녀석이 새로고침 입니다.
다른 웹사이트를 보면서 새로고침 누르면 해당 웹조각의 영역만 새로 불러들입니다. 편리한 기능이지요.

제대로 적용된 웹조각

추가된 웹조각의 목록중 마우스 오른쪽 버튼을 누르면 여러가지 속성을 선택해서 사용할 수 있습니다.

음... 개인적인 바램이지만 이 글이 아래에 보이는 그림처럼 다음 뷰의 웹조각에 보이면 좋겠네요.
View 베스트와 가장많이 본 글의 웹조각에 이 글이 뜬다면 그야말로 좋을텐데.. ㅋㅋㅋ

다음 뷰, View 베스트 웹조각

다음 뷰, 가장 많이 본글 웹조각

음.. 이정도면 누구나 쉽게 자신의 블로그에 웹조각을 적용 시킬 수 있겠지요?
즐거운 하루 보내시길 바랍니다~ 저는 이만!!!