반응형

    운영중이던 티스토리 실험실(http://tistory-lab.tistory.com) 블로그를 정리하기위해 본 블로그로 포스팅 이동합니다.


    티스토리 댓글 탭으로 보기 - CSS만으로!

    에서 이어지는 글입니다.


    참고로 Material T에는 이미 적용되어있는 기능입니다.

    (Material T mark3 부터는 호환성을 위해 CSS와 javascript를 함께사용합니다.)


    -------------------------------------------



    댓글 플랫폼을 여러가지 사용하는 블로그에 유용한 플러그인입니다.

    미리보기

    See the Pen tab only CSS by Kim young wook (@nubiz) on CodePen.


    태블릿 크기 이상에서는 탭으로 표시되며, 모바일기기에서는 탭이 세로로 배치됩니다.

    이 플러그인은 자바스크립트 없이 오직 CSS만으로 동작합니다.
    따라서 CSS3를 지원하지 않는 IE8이하 브라우저에서는 댓글을 남기거나 볼 수 없고, 브라우저 업그레이드 안내 메시지만 나타나게되니 참조해주세요.

    적용 방법

    <HTML>

    1. HTML/CSS 편집에 들어가서 댓글 출력부분인
    <s_rp>부터 </s_rp>를 찾습니다.

    2. 그 아래에 다음 코드를 붙여넣습니다.

    <!-- tab_comment -->

    <div class="tabs">

      <input type="radio" id="tab1" name="tabs" checked/>  

      <input type="radio" id="tab2" name="tabs"/>  

      <input type="radio" id="tab3" name="tabs"/>

      <div class="labels">

        <label id="tab1L" for="tab1">티스토리 댓글</label>

        <label id="tab2L" for="tab2" >Disqus</label>

        <label id="tab3L" for="tab3">트랙백</label>

      </div>

      <div class="tab_container">

        <div id="tab1C" class="tab_content">

          댓글

        </div>

        <div id="tab2C" class="tab_content">

          디스커스

        </div>

        <div id="tab3C" class="tab_content">

          트랙백

        </div>

        <div class="notAvailable">현재 브라우저에서는 댓글을 표시할 수 없습니다.<br/> IE9 이상으로 브라우저를 업그레이드하거나, 크롬, 파이어폭스 등 최신 브라우저를 이용해주세요.</div>

      </div>

    </div>


    3. 빨간색 글자 중 '댓글'에 위에서 찾은 <s_rp>부터 </s_rp>를 붙여넣습니다.


    4. 트랙백 표시부분인 <s_tb>부터 </s_tb>까지도 마찬가지로 3번탭에 붙여넣습니다.


    5. disqus에는 본인의 disqus 코드를 붙여넣습니다.

    로딩속도를 위해 다음을 참조해보세요.

     - 블로그 속도 개선- Disqus탭 클릭했을 때 로딩되게 하기


    <CSS>

    style.css 맨 아래에 다음을 붙여넣습니다.
    .tabs>.labels>label {
      width:150px;
      background-color: #ddd;
      border-radius: 0 1em 0 0;
      color: #999;
      font-weight:bold;
      text-shadow:#aaa -1px -1px;  
      cursor: pointer;
      float: left;
      overflow: hidden;
      padding: .7em 1.2em;
      position: relative;
      margin-top: 1em;
      border-bottom: .2em solid #45a6e7;
      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
      box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }
    .tabs>.labels>label:hover {
      background-color: #ddd;
      color: #333;
    }
    input#tab1:checked ~ .labels>label[for="tab1"],
    input#tab2:checked ~ .labels>label[for="tab2"],
    input#tab3:checked ~ .labels>label[for="tab3"] {
      background-color: #45a6e7;
      color: #fff;
    }
    .tabs>.labels>label a {
      color: inherit;
    }
    .tab_container {
      clear: both;
      overflow: auto;
      width: 100%;
      padding: 1em;
      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
      box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }
    .tabs>input[type="radio"], .tabs .tab_content {
      display: none;
    }
    .notAvailable {
      border:#f00 solid 1px;
      background:#fdd;
      padding:1em;
    }
    input[name="tabs"]:checked ~ .tab_container>.notAvailable {display:none;}
    input#tab1:checked ~ .tab_container>#tab1C,
    input#tab2:checked ~ .tab_container>#tab2C,
    input#tab3:checked ~ .tab_container>#tab3C {
      display:block;
    }
    @media screen and (max-width:480px) {
      .tabs>.labels>label {
        width: 100%;
        margin: 0;
        border-radius: 0;
      }
      .tabs>.labels>label:first-of-type {
        margin-top: 1em;
      };
    }


    반응형
    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함