댓글 탭 보기를 업그레이드해봤습니다.

    아래 포스팅을 먼저 보시면 이해가 쉽습니다.

     - Disqus 댓글과 티스토리 댓글 탭으로 보기




    디자인도 더 깔끔하게 수정되었고,

    무엇보다도 이제 jQuery 스크립트 없이 CSS만으로 동작합니다! (약간의 속도 향상을 기대할 수 있습니다.)


    원리는 간단히 탭으로 <input type=radio>를 사용하고, CSS선택자로 :checked를 사용하는 것입니다.


    미리보기

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

    codepen에서 작업한 결과물입니다.



    적용하기

    적용 방법은 이전과 크게 다르지 않습니다.


    1.HTML/CSS수정 - skin.html에서 

    <s_rp> 부터 </s_rp>까지를 잘라내어 메모장같은데 붙여둡니다.(댓글 출력 부분)

    <s_tb> 부터 </s_tb>까지를 잘라내어 메모장같은데 붙여둡니다.(트랙백 출력 부분)


    2. <s_rp>를 잘라낸 자리에 아래 코드를 대신 붙여넣고 파란색 부분 대신에 1.에서 복사해둔 내용을 각각 넣습니다.

    disqus부분은 본인의 disqus코드를 넣으시면 됩니다.

    아래 글을 참조하시면 좋습니다.

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


    <!-- tab_comment by nubiz(http://nubiz.tistory.com/499) -->

    <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 for="tab1">티스토리 댓글 : [# #_article_rep_rp_cnt_##]</label>

        <label for="tab2" onclick="loadDisqus()">Disqus</label>

        <label for="tab3">트랙백 : [# #_article_rep_tb_cnt_##]</label>

      </div>

      <div class="tab_container">

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

    <s_rp>

    여기에 댓글이 출력됩니다

    </s_rp>

        </div>

        <!-- #tab1 -->

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

    <div class="disqus">

    </div>

        </div>

        <!-- #tab2 -->

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

    <s_tb>

    여기에 트랙백이 출력됩니다

    </s_tb>

        </div>

        <!-- #tab3 -->

      </div>

    </div>

    #과 #사이의 띄어쓰기는 제거해주세요.


    3.style.css에 다음을 붙여넣습니다. 탭의 모양은 이 내용을 직접 수정하시면 됩니다.

    .tabs {

      float: left;

      width: 100%;

    }


    .tabs>.labels>label {

      background-color: #eee;

      border-radius: 0 2em 0 0;

      color: #999;

      cursor: pointer;

      float: left;

      height: 3em;

      line-height: 3em;

      overflow: hidden;

      padding: 0 1em;

      position: relative;

      width: 40%;

      margin: 1em 0 0 0;

      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:nth-of-type(3) {

      width: 20%;

    }

    .tabs>.labels>label:hover {

      background-color: #ccc;

      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!important;

      color: #fff!important;

      display: block!important;

    }


    .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;

    }


    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:nth-of-type(3) {

        width: 100%;

      }


      .tabs>.labels>label:first-of-type {

        margin: 1em 0 0 0;

      };

    }


    4.화면설정-화면출력에서 댓글,트랙백 모두 펼침으로 체크해주세요.


    5. skin.html에서 댓글, 트랙백을 접고 펼치는 버튼들을 제거하면 좋습니다.(article_rep_rp_link으로 찾으시면 actionTrail영역에 있습니다.)

    .



    탭 순서 바꾸기

    1. <label>태그들의 순서만 바꿔주시면 됩니다. 이때 탭 번호가 아니라 label태그의 순서 자체가 중요합니다.

    2. 1.에서 첫번째 탭의 <label 이 for="tab2"가 되었다면,<input>태그중 id가 tab2인 것을 찾아 '/>'앞에 checked를 써주고, 원래의 checked는 지우면 됩니다.

    마침

    탭 구현을 CSS만으로 할 수 있다는 사실이 신기하네요.

    제 아이디어는 아니고 codepen을 둘러보다 알게된 사실입니다.


    disqus나 liveRe사용자분들 중에 제 탭을 사용하시는 분을이 꽤 눈에 띄어 기분이 좋습니다^^

    그분들이 이 글도 보고 업그레이드 하셨으면 좋겠네요~



    업데이트

    http://nubiz.tistory.com/692

    여기에 업데이트 되었습니다. (IE8이하 미지원 브라우저에서 이용불가 안내메시지 추가)



    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon Sevnis
      2014.07.31 20:04 신고

      ㅇㅁㅇ

    • BlogIcon 천사마음
      2014.08.01 16:33 신고

      멋진 아이디어 공유 고맙습니다. ^^*

    • BlogIcon 가온누리™
      2014.08.14 08:37 신고

      안녕하세요.
      이 팁을 사용하고자 제 블로그에 적용을 했는데 약간 디자인이 어긋나네요.
      http://experience.so/671
      전 disqus를 사용안해서 댓글, 트랙백만 사용할려고 소스를 수정했는데 뭔가 어긋남이 ,,.....

      제 미천한 실력으로 어제부터 짬짬이 수정해 보는데 답이 안나와 글 남깁니다.

      댓글 ,트랙백만 사용할수 있는 방법좀 부탁 드립니다.^^

      • BlogIcon 뭐하라
        2014.08.14 08:44 신고

        2개만 사용하시면 이렇게 바꾸시면 됩니다.
        .tabs>.labels>label {
        background-color: #eee;
        border-radius: 0 2em 0 0;
        color: #999;
        cursor: pointer;
        float: left;
        height: 3em;
        line-height: 3em;
        overflow: hidden;
        padding: 0 1em;
        position: relative;
        width: 40%;
        margin: 1em 0 0 0;
        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:nth-of-type(3) {
        width: 20%;
        }

        이부분을 찾아서

        .tabs>.labels>label {
        background-color: #eee;
        border-radius: 0 2em 0 0;
        color: #999;
        cursor: pointer;
        float: left;
        height: 3em;
        line-height: 3em;
        overflow: hidden;
        padding: 0 1em;
        position: relative;
        width: 50%;
        margin: 1em 0 0 0;
        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);
        }

        이걸로 바꿔주세요

      • BlogIcon 가온누리™
        2014.08.14 13:15 신고

        빠른답변 감사합니다.^^

    • BlogIcon 순결한 뱀
      2015.01.28 07:22 신고

      덕분에 성공했습니다 상세한 포스팅 정말 감사드려요!

    • BlogIcon Mir(whdghks913)
      2015.02.01 18:53 신고

      뭐하라님!
      지금 블로그에 적용하신 탭 모양이랑 강좌에 있는 탭 모양이 다르던대
      혹시 어떻게 업데이트(?)하는지 알려주실수 있으신가요??

      • BlogIcon 뭐하라
        2015.02.01 19:52 신고

        현재 적용중인 css입니다~
        클릭효과는 http://nubiz.tistory.com/578
        를 먼저 적용하시고, label 태그에 class="ripplelink" 를 추가하시면됩니다.

        .tabs {
        float: left;
        width: 100%;
        }

        .tabs>.labels>label {
        background-color: #eee;
        color: #999;
        cursor: pointer;
        float: left;
        height: 2.5em;
        line-height: 2.5em;
        overflow: hidden;
        padding: 0 .8em;
        position: relative;
        width: 40%;
        margin: 1em 0 0 0;
        border-bottom: .2em solid #555;
        -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:nth-of-type(3) {
        width: 20%;
        }

        .tabs>.labels>label:hover {
        background-color: #ccc;
        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: #555;
        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;
        }

        .tabs>.labels>label:nth-of-type(3) {
        width: 100%;
        }

        .tabs>.labels>label:first-of-type {
        margin: 1em 0 0 0;
        };
        }

      • BlogIcon Mir(whdghks913)
        2015.02.01 21:42 신고

        정말 감사드립니다~~

    • BlogIcon .하야루비.
      2015.04.20 00:33 신고

      안녕하세요.
      좋은 정보 정말 감사드립니다. ^^
      현재 적용해 보고 있는 중인데요~
      정말 궁금한 부분이 있어서 문의 드리는데요.
      댓글, 트랙백을 접고 펼치는 버튼들을 제거하면 좋습니다.(article_rep_rp_link으로 찾으시면 actionTrail영역에 있습니다.) <--- 요부분에서요
      댓글,트랙백 접고 펼치는 버튼이 정확히 어떤 것을 명시하는지 모르겠어요 ㅠㅜ
      그리고 style.css 제일 아래칸에 붙혀 넣어도 괜찮을까요? 제가 왕 초보인지라..ㅠㅜ
      한번 고칠때마다 4시간씩 넘게 헤메이게 되어욤. . ㅠㅜ
      지금 두시간 넘게 헤메는 중이네욤. orz...아직 많이 익숙치 않다보니 ^^"a
      암튼~!!! 정말 귀중하고 좋은 정보 너무 너무 감사드립니다. ^^
      좋은 저녁 되세욤

    • BlogIcon .하야루비.
      2015.04.20 01:51 신고

      저...저..방금 드디어 완성했어욤~~!! ㅠㅜ
      아..감격...흑흑...
      그런데..역시나
      '댓글, 트랙백을 접고 펼치는 버튼들을 제거'하는건 모르겠어요.orz
      그래도~!! 우선 깔끔하게 잘 나온거 같은지라 ^^ ㅎㅎ 기뻐욤
      정말 너무 너무 좋은 정보 감사드려요~!!!
      행복하세욤 ^^

      • BlogIcon 뭐하라
        2015.04.20 17:33 신고

        skin.html에서
        <div class="actionTrail">
        <span class="author"><span class="text">Posted by</span> 그림을그리는 .하야루비.</span>
        <a href="#tb" onclick="toggleLayerForEntry(81, 'trackback'); return false" title="트랙백"><span id="trackbackCount81">트랙백 <span class="cnt">0</span></span></a> :
        <a href="#rp" onclick="toggleLayerForEntry('81', 'comment'); return false" title="댓글"><span id="commentCount81">댓글 <span class="cnt">10</span></span></a>
        </div>
        부분을 찾아서 지우면됩니다^^
        똑같진 않을거에요~

    • BlogIcon .하야루비.
      2015.04.20 17:45 신고

      헉~!!! 섬세하게 이런 세세한 배려까지..ㅠㅜ
      방금 수정했어요~~~~ 정말 너무 너무 감사드립니다 ^^

    • BlogIcon A TearDrop
      2015.04.21 02:43 신고

      리뉴얼하셧나요?
      링크둘러보다 혹시나 바낀거 있나 해서 드립니다

      • BlogIcon 뭐하라
        2015.04.21 20:19 신고

        스킨 바꾼후로 리뉴얼한건 없습니다~^^

    • BlogIcon ㅋㅋ두유
      2015.04.22 10:16 신고

      좋은정보 잘 배웠어요.
      근데 한가지 문제점이 생겨서 댓글 남깁니다. 다 잘 되는데, 모바일상에서 탭을 누르면 disqus가 떠야하는데 전혀 반응을 하지 않아요. 위에 적힌 내용들 그대로 똑같이 적용했고, 단지 바꾼 내용이라면 style에서 푸른색만 검은색으로 바꾼 정도가 다인데..;;
      모바일 화면에서 전혀 반응이 없는건 대체 무슨 문제때문일까요?

      • BlogIcon 뭐하라
        2015.04.24 15:42 신고

        확인해보니 이미 고치신건지 모바일에서도 잘나오네요~^^

    • BlogIcon ㅋㅋ두유
      2015.04.24 18:59 신고

      아~ 이게 폰 안드로이드 버전에 따른건지, 모바일 브라우저에 따른건지 모르겠지만 좀 오래된 스마트폰에서는 안먹히는거드라구요. 제 폰이 좀 오래된 폰이거든요.ㅋㅋㅋㅋ 다른폰들로 테스트해본 결과 최근 나온지 얼마 안된 스마트폰들에서는 제대로 구동이 되더군요.^^ 답변 감사해요. 유용하게 썼습니다!

    • BlogIcon xenoski
      2015.05.09 10:24 신고

      안녕하세요 우연찮게 다른주제검색으로 들어왔다가 블로그꾸미는거 보고 바꿔보고 싶어서 차근차근 보는중인데요. 본문내용에서 "disqus부분은 본인의 disqus코드를 넣으시면 됩니다." 이부분이 이해가 안갑니다. 본인의 disqus 코드를 입력하라고 했는데 본인 코드는 어디서 봐야하는건가요?

      • BlogIcon 뭐하라
        2015.05.09 10:48 신고

        disqus라는 외부 댓글 플러그인이 있어요~ 이블로그엔 없지만 검색해보시면 가입방법부터 잘 소개된 글이 많습니다

    • BlogIcon 시골 남자
      2016.03.08 13:04 신고

      뭐하라님 안녕하세요
      제가 사용하는 스킨에도 이방법이 적용이 될지 모르겟지만...
      라이브리새로 추가되고 추가를 하니 티스토리기존댓글이 연동이 안되고 설정해놓을려나 댓글창이 두개라 보기가안좋은관계로 이래저래 찾다가 뭐하라님 소스를 찾게되었는데;;
      제가 이소스를 사용해도 될련지요

      • BlogIcon 뭐하라
        2016.03.08 16:55 신고

        네 확인은 안해봤는데 디스커스 코드 넣는부분에 라이브리 코드 넣으시면 될겁니다

    • BlogIcon 인생베팅CGV
      2017.12.23 01:24 신고

      와 너무 감사해요!

티스토리 툴바