[티스토리 반응형스킨 #1] 티스토리 댓글과 라이브리 댓글을 Tab 방식으로 구현하기

지난 포스팅에서 티스토리에 소셜댓글 서비스인 라이브리(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편집창에서 맨 아래로 내려가서 아래의 코드를 입력하고 저장 해주세요.

/* 티스토리 댓글 + 라이브리 댓글 */
#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 에 티스토리와 라이브리 댓글을 탭 기능으로 구현하는 강좌를 마치겠습니다. 제가 구현해 놓은지 한참이 지나서 포스팅 한거라, 혹시 빼먹은 부분이 있을지도 모르겠네요;;;

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