'사이드바'에 해당되는 글 1건

  1. 2009.03.27 ie8.0 웹슬라이스 블로그 적용해보기. - Tistory 기준.
반응형
ie8.0에 웹슬라이스 기능이 있다는것은 여기저기 검색해보면 바로 나옵니다.
즐겨찾기에 등록하여 페이지 이동없이 주요내용을 바로바로 볼수 있다는게 큰 장점이죠!!

그래서 제 블로그에도 한번 만들어봤습니다.

Tistory 에도 적용이 잘 되는군요!!
저는 Recent Post 를 가지고 해봤습니다.

제 사이드 바의 skin.html 의 내용중 Recent Post 부분만을 가져와봤습니다.

(생략)...
    <s_sidebar_element>
    <!-- 최근 포스트 모듈 -->
                                <div class="recentPost">
                                        <h3>Recent Post</h3>
                                       <ul>
                                       <s_rctps_rep>
                                               <li>
                                                <a href=""> </a> <span class="cnt"></span>
                                               </li>
                                       </s_rctps_rep>
                                       </ul>
                                </div>
    </s_sidebar_element>
...(생략)

이런식으로 되어있죠.


    <s_sidebar_element>
    <!-- 최근 포스트 모듈 -->
          <span class="hslice" id="1">
                                <div class="recentPost">
           <span class="entry-title">
                                        <h3>Recent Post</h3>
           </span>
           <span class="entry-content">
                                       <ul>
                                       <s_rctps_rep>
                                               <li>
                                                <a href=""> </a> <span class="cnt"></span>
                                               </li>
                                       </s_rctps_rep>
                                       </ul>
          </span>
                                </div>
          </span>
 </s_sidebar_element>

웹슬라이스를 구성하기 위한 3가지 요소가 있습니다.
1. class "hslice"
    전체 슬라이스 영역을 구분지어 줍니다. 슬라이스의 영역이 될부분을 span(div 는 안됩니다.)으로 쌓아야 합니다.
    또한 블로그내 웹슬라이스가 여러개 있을경우 id TAG 의 value 를 순차적으로 증가시킨 값을 index 로 사용합니다.
2. class "entry-title"
    웹슬라이스가 즐겨찾기로 들어갈경우의 제목입니다. 아무래도 블로그를 대표할 이름등 주요한 이름을 넣어서 만들면 좋겠죠?

3. class "entry-content"
    웹슬라이스의 안에 표시될 내용부분의 영역 구분.

이렇게 3가지 내용을 span 으로 잘 묶어주면 웹슬라이스가 생긴것을 바로 블로그에서 확인하실수가 있습니다!!

꼭 한번 해보세요~~! 재미있네요!!!

Recent Post 의 웹슬라이스

머큐리의 끄적끄적으로 title을 변경했습니다.

ie8.0 의 웹슬라이스 노출모습

ie8.0에서의 노출모습입니다.index를 계속추가하면 밑으로 계속 나열됩니다..





Posted by 상피리꿈
이전버튼 1 이전버튼

반응형
블로그 이미지
상피리꿈
Yesterday
Today
Total

달력

 « |  » 2024.4
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30

최근에 올라온 글

최근에 달린 댓글

글 보관함


반응형