ZIWOOGAE.COM

IE8 웹조각(web slice) 티스토리 응용기

IE8에 있는 웹조각(web slice)를 티스토리에서도 사용이 가능합니다.

제 블로그 메인 화면에 있는 "추천 소프트웨어" 에 마우스를 올려 놓으시면, 웹조각(web slice)이 적용되어 있습니다.



아주 간단히 사용하실 수 있습니다.



"즐겨찾기 모음 추가"를 클릭하시면,
아래 이미지 처럼 즐겨찾기 옆에 추가된 화면을 보실 수 있습니다.




기본 옵션입니다.
<div class="hslice" id="사용할 id 지정">
<div class="entry-title">추가시 사용할 이름 지정</div>
<div class="entry-content">슬라이스 할 내용</div>
</div>

테터데스크가 설정된 경우는..
슬라이스 만들 항목에 있는 "아이템 HTML 수정" 을 클릭합니다.



저 같은 경우는 테터테스크 메인이 섬네일 목록형이라고 지정이 되어 있기 때문에,
섬네일 목록형 아이템 HTML 수정이라는 창이 뜹니다.



ⓐ 수정창에 있는 HTML 소스를 메모장 같은 곳에 붙여 놓으세요.

그런 다음,

<div class="hslice" id="사용할 id 지정">
<div class="entry-title">추가시 사용할 이름 지정</div>
<div class="entry-content">슬라이스 할 내용</div>
</div>

이런식으로 수정해 주시면 됩니다.


응용기 들어 갑니다.

<!-- 슬라이스 시작 -->
<div class="hslice" id="seo">
<div class="entry-title" style="display:none">지우개 SEO </div>
<div class="entry-content"> 기존에 있던 HTML 소스 </div>
</div>
<!-- 슬라이스 끝 -->

<div class="entry-title" style="display:none">지우개 SEO </div>

style="display:none" 추가 된것을 확인할 수 있습니다.
- 이유는 타이틀을 감추기 위해서 입니다.


<div class="entry-title">지우개 SEO </div>



<div class="entry-title" style="display:none">지우개 SEO </div>



아래에 있는 검정색의 바탕에 있는 소스는 "ⓐ 기존에 있던 HTML 소스" 입니다.



진한 파란색으로 된 코드가 기존에 있는 "기존에 있던 HTML 소스"입니다.

<div class="hslice" id="seo">
<div class="entry-title" style="display:none">지우개 SEO </div>
<div class="entry-content">  
<div class="TD_recent">
   <s_more>
       <div class="TD_more">
           <div class="TD_more_title"><a href="[##_list_link_##]">[##_list_title_##]</a></div>
           <span class="TD_more_btn"><a href="[##_list_link_##]">더보기</a></span> </div>
   </s_more>
</div>
<div class="TD_recent">   
   <s_list>
       <div class="TD_thumblist">
           <div class="TD_thumbimg">"[##_item_thumbnail_##]"</div>
           <div class="TD_headline">
               <a href="[##_item_link_##]">[##_item_title_##]</a> <span class="TD_date"> [##_item_date_##]</span>
           </div>
           <div class="TD_summary"><p>[##_item_summary_##]</p></div>
       </div>
   </s_list>
</div> </div>
</div>

대충 이해가 되시죠?

사이드바에도 웹조각(web slice) 추가가 가능합니다.


<s_sidebar_element>
<!-- 최근 포스트 모듈 -->
<div class="hslice" id="recent_posts">
<div class="entry-title" style="display:none">지우개닷컴 최신글 </div>
<div class="entry-content">
<h3><a href="#" onclick="showHide('recentPost'); return false;">Recent Post</a></h3>
<div id="recentPost" style="display:block">
<ul>
<s_rctps_rep>
<li>
<a href="[##_rctps_rep_link_##]"> [##_rctps_rep_title_##]</a>
<span class="cnt">[##_rctps_rep_rp_cnt_##]</span>
</li>
</s_rctps_rep>
</ul>
</div>
</div>
</div></s_sidebar_element>

붉은색으로된 소스가 "웹조각(web slice) 소스" 입니다.


신고
Short URI

Comment +8

  • 처음에 웹슬라이스 기능을 적용하려면 많이 복잡할줄 알았는데, 그게 아니군요..
    간단한 태그 몇줄이 저에게는 왜 복잡하고 어렵게 보였을까요..? ^^;
    제 블로그에도 바로 적용해야겠네요. 좋은 정보 잘 얻고 갑니다.

  • 좋은 정보 감사합니다. 많은 도움이 되었습니다.^^

  • 웹 슬라이스를 적용하는게 이렇게 쉬운 것이었군요 ^^;;
    한번 적용해 봐야겠습니다~

  • 지우개님 안녕하세요^^
    티스토리 유저 사이트헌트입니다.
    님의 블로그에 방문하면서도 늘 눈팅만 하다 처음으로 댓글을 달아봅니다.
    티스토리 유저님들께서 웹조각기능을 활용할수 있다면 많은 도움이 되리라 여겨져
    님의 포스트를 포럼에 링크걸려고 합니다. 괜찮겠죠^^
    우측에 실시간 온라인 위젯이 눈에 들어와 제 사이트에도 달았읍니다.
    참 위와 같은 방법으로 응용하면 최근 코멘트나 트랙백에도 웹조각기능이 가능할 것 같은데..
    제가 잘못 알고 있는 것인지...
    늘 건강하시고 행복하시길 바랍니다.

  • 2009.06.19 22:33

    비밀댓글입니다

    • 웹조각(슬라이스)은 IE8.0 부터 지원한답니다.
      IE6.0 이나 7.0 에선 확인이 불가능하구요.
      IE8.0 으로 확인하셔야 됩니다.

      링크 걸어주신 주소를 확인해 보니 웹조각(슬라이스)이 적용이 되어 있질 않습니다.

      만약 현재 사용하시는 블로그에 웹조각(슬라이스)을 적용하셨다면,
      블로그 주소를 가르쳐 주시면 제가 확인해 보겠습니다.

  • 2009.06.20 09:33

    비밀댓글입니다

  • 젤리 2009.06.20 09:39 신고

    또다른 질문 -
    http://www.textcube.org/attach/2/1096527855.jpg
    JP Simple v2 Edition for Textcube v1.6을 티스토리용으로 쓰고싶은데
    그냥 덮어버리니까 안되네요 ->http://affbbbrrb.tistory.com/

    전체 가로폭도 줄이고,중간에 존재하지 않는 페이지?
    좀 도와주세요