dIsqus를 사용하고부터 disqus와 티스토리 댓글사이에서 고민이 많았습니다.

    둘 다 사용하자니 댓글창이 너무 길어지고.. 하나만 사용하자니 어느한쪽 이용자를 버리게되죠.

    댓글이 활성화된경우(이 블로그에서는 아니지만..) 티스토리 댓글을 남기고싶은데 어딨는지 한참찾아야 되는 문제도 있었습니다.


    그래서 고민끝에 댓글에 탭으 달기로 했습니다.

    소스는 아래의 것을 참조, 변형했습니다.

    http://codepen.io/anon/pen/LdyCr




    업그레이드

    이 포스트는 오래된 포스트입니다. 아래 링크를 통해 업그레이드된 탭을 적용해보세요.

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

    .트랙백이 탭에 포함됨

    .디자인 개선

    .jQery스크립트를 사용하지 않음


    적용 방법

    1. skin.html에서 <s_rp>부터 </s_rp>를 찾습니다. 이부분이 원래 댓글이 출력되던 부분입니다.


    2. <s_rp>부터 </s_rp>를 메모장 같은곳에 잘라넣어두시고, 대신 그 위치에 아래 코드를 입력합니다.

    파란색 표시된 곳은 상황에 따라 수정할 곳이고, 빨간색 표시된 곳은 본인의 코드를 붙여넣을 자리입니다.

    <!-- tab_comment -->

    <ul class="tabs">

      <li class="active" rel="tab1">Disqus</li>

      <li rel="tab2">티스토리 댓글:[$$_article_rep_rp_cnt_$$]</li>

    </ul>

    <div class="tab_container">

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

    여기에 Disqus 코드를 넣습니다.

    </div>

      <!-- #tab1 -->

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

    여기에 <s_rp>부터 </s_rp>까지를 붙여넣습니다.

    </div>

      <!-- #tab2 -->

    </div>


    <script>window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><\/script>')</script>

    <script>
    $(document).ready(function() {
    $(".tab_content").hide();
    $(".tab_content:first").show(); 
    $("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).attr("rel"); 
    $("#"+activeTab).fadeIn(); 
    });
    });
    </script> 

    [$$_article_rep_rp_cnt_$$]는 댓글 갯수 치환자입니다. $$를 ##으로 바꿔주어야 작동합니다.


    ※코멘트는 화면설정에서 '펼침'으로 설정해두셔야하고, 기존의 코멘트 접고펼치는 단추는 없애는게 좋습니다.

    .



    3. style.css에 다음을 추가합니다. 입맛에따라 수정하시면 됩니다.

    ul.tabs {

        float: left;

        height: 51px;

        list-style: none;

        margin: 1em 0;

        padding: 0;

        width: 100%;

    }

    ul.tabs li {

        background-color: #eee;

        border-radius: 1em 1em 0 0;

        color: #999;

        cursor: pointer;

        float: left;

        height: 50px;

        line-height: 50px;

        margin: 0;

        overflow: hidden;

        padding: 0 21px;

        position: relative;

        width: 50%;

    }

    ul.tabs li:hover {

        background-color: #ccc;

        color: #333;

    }

    ul.tabs li.active {

        background-color: #2a677e;

        border-bottom: 3px solid #3bafda;

        color: #fff;

        display: block;

    }

    .tab_container {

        clear: both;

        overflow: auto;

        width: 100%;

    }

    .tab_content {

        display: none;

        padding: 5px;

    }




    방명록에 응용하기

    방명록에도 응용하는 방법은 비슷합니다.

    <s_rp>대신 <s_guest>를 이용하면 됩니다.

    직접 한번 응용해보세요^^ 

    그런데 좀더 어려울겁니다.


    힌트:<s_guest>바깥 부분은 방명록이 아닌곳에서도 보이게됩니다. 탭 보기 전체를 <s_guest>으로 묶고 내용을 잘 붙여넣으면 되겠죠?

    이 블로그에 적용되어있으니 확인해보세요.



    아직 쿠키다루는 법은 모르지만, 쿠키설정으로 탭을 기억하게하는 것도 좋을듯합니다



    업그레이드

    이 포스트는 오래된 포스트입니다. 아래 링크를 통해 업그레이드된 탭을 적용해보세요.

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

    .트랙백이 탭에 포함됨

    .디자인 개선

    .jQery스크립트를 사용하지 않음

    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon 뭐하라
      2014.05.11 15:27 신고

      test 이렇게 보입니다

    • BlogIcon 이바구™ -
      2014.05.18 21:18 신고

      전 탭1과 탭2 위치를 바꾸었는데
      아래 태그에서는 뭐를 손대야 하는지 모르겠네요.
      제대로 안 나오네요.

      • BlogIcon 뭐하라
        2014.05.18 23:23 신고

        탭위치는 <ul>에서 <li>순서만 바꾸시면됩니다.
        아래는 순서 상관 없습니다.

        다만 <li>의 rel값과 <div>의 id값이 일치해야합니다

    • BlogIcon ☞ 이카루스
      2014.05.22 16:08 신고

      저도 탭으로 해볼까 생각만 하고 있습니다..
      집에 늦게 가서...ㅜㅜ 언젠가는 해야 되겠지만요...
      좋은 정보 잘 보고 갑니다...

      • BlogIcon 뭐하라
        2014.05.22 18:23 신고

        그리 어렵지 않습니다^^ 도전해보세요

    • BlogIcon 우뢋챠
      2014.07.13 15:06 신고

      안녕하세요 글보고 도전은 해봤는데.. 모바일에서는 디스커스가 안나오던데.. 나오게 하는 방법이 따로 있나요?

      • BlogIcon 뭐하라
        2014.07.13 18:34 신고

        지금 보니 나오고있네요~
        모바일 스킨을 ON하면 디스커스를 사용할수 없습니다.
        지금처럼 OFF하시면 되는데 반응형스킨이 아니라 모바일에서 보기가 힘드네요.

    • BlogIcon reddreams
      2014.07.20 19:20 신고

      안녕하세요 하라님 ㅠㅠ 이틀동안 열심히 바꾸고 있는데 도저히 안되서 도움을 좀 요청드립니다.
      일단 올려주신 내용대로 그대로 적용해보니 전혀 작동을 하지 않네요ㅠㅠ
      그래서 소스를 활용해서 모양은 꾸며놓았는데 탭이 활성화되지를 않고 있습니다. js문제인것같은데
      js쪽으로는 전혀 알지 못하여 어찌해야할지 감을 못잡고 있습니다. 소스 사이트에서 js 를 메모장에
      넣고 .js파일로 만들고 티스토리에 업로드하여 스크립트로 넣어두었는데도 작동하지 않습니다.

      <script src="http://cfs.tistory.com/custom/blog/68/684395/skin/images/tab.js"></script>

      가능하시다면 탭을 활성화 시킬수있는 방법 좀 알려주십사 요청드립니다.

      • BlogIcon 뭐하라
        2014.07.20 20:24 신고

        앗.. 본문에 jQuery를 적용해야한다는 말을 깜박했네요.
        본문 수정하겠습니다,
        스크립트 부분만 다시 적용해보시면 될듯해요.
        스크립트가 그리 길지 않으니 js파일로 업로드하실필요까진 없습니다.
        그래도 업로드하시려면 jQuery가 들어간 줄을 삽입하시고 그 아랫줄에 js파일을 로딩해주세요

    • BlogIcon reddreams
      2014.07.21 02:20 신고

      감사합니다. 친절한 설명 덕분에 한방에 해결해서 깔끔하게 티스토리댓글,디스커스댓글,트랙백 설치와 디스커스 로딩까지도 전부 적용했네요~ 블로그의 양질의 글들도 좋지만 역시 깔끔하게 구성되어야 방문자들이 더 좋아하겠죠? ㅎㅎ 올려주신 팁들 몇개 더 보고 나머지도 잘 따라해보겠습니다^^

      • BlogIcon 뭐하라
        2014.07.21 07:03 신고

        해결되셨다니 다행이네요^^ 확실히 방문자들을 위한 이런 개선작업들이 이탈률을 낮추는데 도움이됩니다

    • BlogIcon 오뮤스매니저
      2015.03.16 17:45 신고

      감사합니다!! 요즘 블로그 꾸미는데 재미 들려서 이것저것 적용 중인데요.. 디스커스가 포스팅한 글 중 몇몇 글에는 나타나지 않는 문제가 있었는데, 포스팅 내용대로 바꿔놓으니 깔끔함과 더불어 안정성까지 확보 되었네요!! 감사합니다.^^