티스토리 뷰


지난 포스팅에서 티스토리에 소셜댓글 서비스인 라이브리(LiveRe) 를 설치하는 방법을 알려드렸었죠?


라이브리 회원가입 및 티스토리에 설치하는 방법 (이전 글)

티스토리에 소셜댓글서비스-라이브리 설치하기 (티스토리 플러그인 이용)


포스팅 맺음말에, 티스토리 댓글과 라이브리 댓글을 탭방식으로 구현하는 방법을 포스팅하겠다고 예고 드렸었는데요. 오늘 그 과정을 포스팅 하려고합니다.

"잘 듣고 따라하세요 Listen carefully" ^^

주의! 항상 스킨을 수정하실땐, 백업이 필수입니다.


스킨 백업하기스킨 백업하기



Tab 방식 이란?


강좌에 앞서, 우선 Tab방식이란게 뭔지부터 감을 잡아야겠죠? 그래서 제 블로그에 구현된 댓글 영역을 움짤로 캡쳐해서 준비해봤습니다. 이거 보시면, "아하!!"라며 단번에 이해되실꺼예요.

"백문이 불여일견" ㅋㅋ


탭방식으로 구현된 티스토리/라이브리 댓글탭방식으로 구현된 티스토리/라이브리 댓글



어떠세요? Tab이라는게 뭔지 아시겠죠? 원래 티스토리 플러그인을 사용해서 라이브리를 설치하면, 티스토리 댓글과 라이브리 댓글이 연이어서 나오기때문에 스크롤만 길어지고, 블로그방문자가 댓글을 달려고 할때도 헷갈리는 부분이 있죠. 그래서 이렇게 탭방식으로 댓글영역을 구현하면, 사용자가 선택에 따라 원하는 서비스로 댓글을 달면 됩니다.

자, 그럼 본격적으로 배워볼까요?


티스토리와 라이브리 댓글 코드 준비


우선 티스토리 댓글과 라이브리 댓글의 소스코드를 준비해야겠죠? 우선 PC에서 메모장이나 MS Word등을 열어서 소스코드를 잠깐 복사해놓을꺼예요. 먼저, 티스토리 블로그 관리자 페이지로 가서 HTML/CSS 편집 메뉴로 들어가 주세요. 그럼 오른쪽창에 HTML편집창이 열리죠? HTML코드가 있는 부분을 아무곳이나 클릭한번 해주시구요. Ctrl + F 를 눌러주세요. 그럼 HTML코드창 상단에 노란색 영역이 보이는데, 여기에 <s_rp> 라고 입력하고 엔터키를 눌러주세요.


티스토리 댓글 소스코드 찾기티스토리 댓글 소스코드 찾기


자~ 그럼 <s_rp> 부터 </s_rp> 까지 마우스로 쭉~ 긁어서 잘라내기해주세요. 그리고 아까 열어놓은 메모장에 붙여넣기 해주세요.

이번엔, 라이브리 소스코드를 구하러 가볼까요? 아래 링크를 클릭해서 라이브리 홈페이지로 이동해주세요. 그리고, 로그인해주시구요.


라이브리 로그인 및 인사이트 메뉴 이동라이브리 로그인 및 인사이트 메뉴 이동


로그인 한 다음엔, 위에 사진과 같이 인사이트 메뉴로 이동해주세요. 그럼 아래와 같은 페이지가 열리는데, 하단에 코드관리 탭으로 이동해주세요. 그리고 티스토리 탭을 눌러주시구요.


티스토리용 라이브리 소스코드 구하기티스토리용 라이브리 소스코드 구하기


티스토리용 소스코드가 보이시죠? 이걸 아까 열어둔 또다른 메모장에 붙여넣기 해주세요. 이제 티스토리 댓글의 소스코드와 라이브리의 소스코드가 준비되었습니다.

이제 탭 기능을 구현해 볼게요.


댓글 탭기능 구현 (HTML)


아까 티스토리 댓글의 소스코드를 "잘라내기" 하셨죠? 댓글 영역을 별도로 수정하지 않으셨다면, 아마 티스토리 댓글이 있던 부분은 아래 보이는 코드처럼 보이실꺼예요.


탭기능 소스코드 적용 부분탭기능 소스코드 적용 부분


나름 세심하게 표현해드린다고 노력했는데, 이해가 쉽게 되셨는지 모르겠네요.

반응형 스킨 #1 에서 댓글은 area_reply라는 class명이 붙은 div 영역에 존재해요. 위 사진에 제가 "댓글 숨기기/펼치기 기능"이라고 표시한 부분은 삭제해주시구요. 대체텍스트 댓글펼치기/댓글접기 변경 이라고 표시된 주석도 삭제해주세요. 그럼 <div class="area_reply"> 부터 </div> 사이엔 빈공간만 생기죠? 여기에 아래의 소스코드를 넣어주세요.


<!-- tab_comment -->
<div class="comment-container">
    <div class="module-action">
        <button type="button" data-hash="#tistory-container">티스토리 댓글</button>
        <button type="button" data-hash="#livere-container">라이브리 댓글</button>
    </div>
    <div id="tistory-container">
        <!-- 이곳에 티스토리 댓글 소스코드를 넣으세요 -->
    </div>
    <div id="livere-container">
        <!-- 이곳에 라이브리 댓글 소스코드를 넣으세요 -->
    </div>
</div>
<script type="text/javascript">
    $(".module-action").on("click", "button", function () {
        var a = $(this),
            t = a.data("hash");
        $(".module-action button").each(function () {
            var a = $(this),
                o = a.data("hash");
            a.data("hash") == t ? (a.css("opacity", "1"), $(o).show()) : (a.css("opacity", "0.3"), $(o).hide())
        })
    });
</script>


위의 소스코드를 보면, 티스토리 댓글과 라이브리 댓글의 소스코드를 넣는곳이 각각 표시되어있죠? 그 위치에 각각의 댓글 소스코드를 붙여넣기 하시면 됩니다.

모두 적용되면, 일단 HTML/CSS 편집 창의 우측상단의 저장 버튼을 눌러서 수정된 내용을 저장해주세요.


댓글 탭기능 디자인 적용 (CSS)


지금까지는 HTML부분을 수정했구요. 이번엔, 탭 기능에 디자인을 입혀볼꺼예요. HTML/CSS편집창에서 CSS 편집메뉴로 이동해주세요.


CSS편집창으로 이동CSS편집창으로 이동


CSS편집창에서 맨 아래로 내려가서 아래의 코드를 입력하고 저장 해주세요.


/* 티스토리 댓글 + 라이브리 댓글 */
#livere-container {
	display: none;
}
.comment-container .module-action button {
  width:calc(50% - 2px);
  color: #fff;
  border-radius: 0 1em 0 0;
  cursor: pointer;
  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);
}
.comment-container .module-action button {
	opacity: 0.3;
	background-color: #da1949;
}
.comment-container .module-action button:first-child {
	opacity: 1;
	background-color: #eb622e;
}
/* 티스토리 댓글 + 라이브리 댓글 끝 */


혹시 모르니까, 저장 버튼을 다시 꾹~ 눌러주시구요. 이제 완성된 댓글 영역을 확인해 볼까요?


완성!


탭방식으로 구현된 티스토리/라이브리 댓글탭방식으로 구현된 티스토리/라이브리 댓글


짜잔~ 잘 적용되셨나요? ^^


마치며...


이상으로, 티스토리 반응형 스킨 #1 에 티스토리와 라이브리 댓글을 탭 기능으로 구현하는 강좌를 마치겠습니다. 제가 구현해 놓은지 한참이 지나서 포스팅 한거라, 혹시 빼먹은 부분이 있을지도 모르겠네요;;;

혹시 구현해 보시고, 안되는 부분이 있거나 막히는 부분이 있으면, 댓글로 질문해주세요. 성심성의껏 답변해드릴게요. ^^


친구와 함께보기

트위터

페이스북

구글+

카스

네이버

밴드

카카오톡

라인
  • 프로필사진 월아* 슈가님~ 블로그 이뻐서 잘 배우고 있습니다.
    긍되 제목이 슈가님 블로그처럼 한페이지에 10개씩 나오게 할려면
    어케하믄 되나요?? 저는 3개씩 밖에 앙되네요,,
    2016.09.09 09:16 신고
  • 프로필사진 작은설탕-Mini 화면설정 > 화면 출력 메뉴로 가시면
    글 갯수 변경하실수 있답니다 ^^
    2016.09.09 11:13 신고
  • 프로필사진 비밀댓글입니다 2016.09.15 08:00
  • 프로필사진 작은설탕-Mini ^^ 증상만 듣고는 정확하게 원인을 파악하긴 힘들지만
    1번 증상은 본문 폭 때문에 그럴것 같아요
    저는 본문폭을 820px 에 맞춰서 쓰고있거든요
    블로그 관리메뉴중에 화면설정쪽에 본문폭 설정하는 부분이 있을꺼예요
    2016.09.15 10:30 신고
  • 프로필사진 작은설탕-Mini 그리고 2번 증상은 아무래도 소스코드를 잘못 수정하셨을것같아요
    기본 #1 스킨으로 되돌리신 후에 다시 한번 수정해보시는게 좋을것 같아보여요 ^^

    부디 잘 적용되길 바랍니다

    그리고 제 스킨 공유 바라시는 분들이 계셔서
    조만간 스킨 공유 할 예정이예요

    이거 적용해보시다가 안되시면
    나중에 제 스킨 공유하는거 적용하세요 ㅎ
    2016.09.15 10:33 신고
  • 프로필사진 Sehee Park 말씀해주신 대로 다시 해보니까 이번엔 됐어요! 정말로 감사드립니다. ㅎㅎㅎ (그래도 다른 기능들도 적용하고 싶은 것들이 좀 있어서 아마 공유해주시는 것도 기다릴 듯해요 히히) 2016.09.16 00:52 신고
  • 프로필사진 작은설탕-Mini 오~ 잘 적용되었다니 다행이네요 ^^ 2016.09.17 12:22 신고
  • 프로필사진 Grandpassion 오!!! 잘 봤습니다 ^^
    포스팅 감사합니다, 즐거운 저녁 되시구요^
    2016.10.21 19:09 신고
  • 프로필사진 작은설탕-Mini ^^ 도움이 되셨길 바래요 ㅎ 2016.10.21 19:21 신고
  • 프로필사진 변성탱이 라이브리 플러그인 해제한 상태에서 해야하는군요. 바보같이 그냥 하고 있었더니 안되더라구요.ㅠㅠ
    덕분에 잘 적용했습니다. 알려주셔서 감사합니다.
    2016.10.29 10:13 신고
  • 프로필사진 작은설탕-Mini 아차, 플러그인 해제하는걸 설명을 안해놨나보군요 ㅠㅠ
    고생하셨습니다 ㅎ
    2016.11.02 14:50 신고
  • 프로필사진 홍정석 블로그에 댓글 두개 넣고 싶었는데 좋은 정보 고맙습니다. :) 2016.12.12 20:11 신고
  • 프로필사진 작은설탕-Mini ^^ 유용하게 쓰세요~ 2016.12.12 21:01 신고
  • 프로필사진 여군 라이브리 설치만 완료 한 상태였는데!!
    이런 좋은정보 정말 감사합니다.
    작은설탕님 요즘 왜 포스팅 안쓰시나요??
    무슨일 있으신건가요?? ㅠㅠ
    2017.01.16 12:45 신고
  • 프로필사진 작은설탕-Mini 아;;; 회사업무에 치이고있습니다 ㅠㅠ ㅋ 2017.01.16 13:13 신고
  • 프로필사진 여군 아 그렇군요 ㅜㅜ
    힘들어도 화이팅입니다.
    추운데 감기조심하시구요!!
    즐건 하루되세용! ㅎㅎ
    2017.01.16 14:54 신고
  • 프로필사진 .하야루비. 너무 예뻐요^^ 감사히 잘 쓰고 있습니다 ㅎㅎ 2017.02.10 19:44 신고
  • 프로필사진 작은설탕-Mini 네에~ 잘쓰신다니 좋네요 ^^ 2017.03.31 16:30 신고
  • 프로필사진 한설날 슈가 님 덕분에 제 블로그에도 이렇게 예쁘게 라이브리 적용할 수 있었어요! 감사합니다 :D
    그런데 혹시 티스토리가 아니라 라이브리 댓글이 기본으로 보이게 설정할 수도 있나요?
    2017.05.17 09:35 신고
  • 프로필사진 작은설탕-Mini 유용하셨다니 다행이네요 ^^
    댓글 순서는 HTML 소스에서 tistory container DIV랑 livere container DIV를 순서를 바꿔주면 될꺼예요
    2017.05.17 09:44 신고
  • 프로필사진 한설날 <button type="button" data-hash="#tistory-container">티스토리 댓글</button>
    <button type="button" data-hash="#livere-container">라이브리(소셜) 댓글</button>

    이렇게 돼있는 걸

    <button type="button" data-hash="#livere-container">라이브리(소셜) 댓글</button>
    <button type="button" data-hash="#tistory-container">티스토리 댓글</button>

    이렇게 고치란 거 맞나요?
    2017.05.17 09:46 신고
  • 프로필사진 작은설탕-Mini 아뇨 button 태그 말고 DIV 태그가 있을꺼예요 2017.05.17 09:47 신고
  • 프로필사진 작은설탕-Mini <div id="tistory-container">
    <!-- 이곳에 티스토리 댓글 소스코드를 넣으세요 -->
    </div>
    <div id="livere-container">
    <!-- 이곳에 라이브리 댓글 소스코드를 넣으세요 -->
    </div>
    2017.05.17 09:48 신고
  • 프로필사진 한설날 <div id="tistory-container">
    ~~~~~~~~~
    </div>
    <div id="livere-container">
    ~~~~~~
    </div>

    이 두 개의 위치를 역전시키란 건가요?
    2017.05.17 09:48 신고
  • 프로필사진 작은설탕-Mini 네 아마 그게 맞을겁니다 ^^ 2017.05.17 09:49 신고
  • 프로필사진 한설날 감사합니다!

    그런데 DIV만 바꿔주면 티스토리 댓글이 기본으로 설정된 상태에서 티스토리 댓글이 사용이 안 되고

    버튼만 바꿔주거나 둘 다 바꾸면 처음에는 라이브리에 선택된 상태에서 티스토리가 보이는데, 라이브리를 선택하면 그 때부터 라이브리가 보이고


    라이브리가 바로 로딩이 안 되나 봐요 ㅠ
    2017.05.17 09:53 신고
  • 프로필사진 작은설탕-Mini 아까 제가 말한곳 수정하신후에 CSS에서
    #livere-container {
    display: none;
    }
    이걸
    #tistory-container {
    display: none;
    }
    로 바꿔줘야겠네요

    기본으로 라이브리를 처음엔 안보이도록 해놓은설정이 있었네요
    2017.05.17 09:57 신고
  • 프로필사진 한설날 감사합니다! 해결됐어요! ㅎ-ㅎ 2017.05.17 10:02 신고
  • 프로필사진 작은설탕-Mini 에구 다행이네요 ^^

    써놓은지 꽤 된 글이라
    안되면 어떡하나 걱정을 ㅋ
    2017.05.17 11:08 신고
  • 프로필사진 휘트리버 작은설탕님, 좋은 글 감사합니다.
    궁금한 점이 있어서 댓글 남깁니다.
    저같은 경우는 반응형 스킨의 Square를 쓰고 있는데요,
    이 경우에는 어떻게 라이브리와 티스토리의 댓글을 구분할 수 있을까요?
    답변 부탁드립니다.!!
    2017.08.20 22:03 신고
  • 프로필사진 작은설탕-Mini 반응형스킨이라도 스킨마다 HTML태그 이름을 달리 사용합니다.
    그래서 사용하시는 스킨의 소스를 살펴봐야하는데... 제가 사용하는 스킨이 아니라서 ...;;

    도움이 되어드리질 못해 안타깝네요 ^^;;
    2017.08.20 23:09 신고
  • 프로필사진 한그리 먼저 좋은 포스트 감사드립니다~.
    덕분에 티스토리 댓글과 라이브리 댓글을 탭 형식으로 구현 성공했습니다.

    질문 : 저 같은 경우 다른 스킨을 써서 그런지 티스토리 댓글 같은 경우 상단 탭과 첫번째 댓글 간격이 너무 붙어있습니다. 이 간격을 조절할 수 방법이 있나요?
    2018.01.18 01:26 신고
  • 프로필사진 시를 쓰는 과학자 저는 라이브리 대신 디스커스를 써서 활용하고있어요. 그런데 티스토리 댓글창과 디스커스 댓글창 누르는 곳이 띄어져 있는데 왜그런거죠? 2018.02.22 15:29 신고
  • 프로필사진 大野 친구 추가 버튼 만들고 싶은데 쉽지가 않네요.... 이런건 어떻게 하시는지 ㄷㄷ 2018.05.02 23:09 신고
  • 프로필사진 천재보다는 범재 jQuery가 제대로 작동이 안되서 한참 고생했는데 <body>맨 밑쪽으로 옮기니까 잘 실행되네요.
    Flatinum 스킨 자체가 꽤 독특한 댓글구조를 가지고 있네요.

    re-zero.tistory.com
    잘 적용됬습니다!

    아 그리고 라이브리를 먼저오게 하려고 css에서 display:none 두개의 위치를 바꿔놨습니다
    2018.06.26 15:43 신고
  • 프로필사진 ze.law 좋은 글 참고 삼아 적용 잘하고 갑니다. 그런데 혹시 라이브러리 댓글부터 나오게 나올려면 코드를 어떻게 바꿔야 할까요? 라고 물어볼려고 했는데 이미 위에 답이 있었네요. ^^ 2019.02.09 04:04 신고
댓글쓰기 폼