디스커스(Disqus) 댓글 숫자 표시 방법

디스커스(Disqus)에 댓글 숫자를 달아주자

몽리 블로그에서 페이스북 댓글 플러그인을 제거하고 소셜(SNS) 댓글 서비스 디스커스(Disqus)로 바꾸어 달았습니다. 스킨에 디스커스(Disqus) 댓글을 장착하고 보니 약간 뚱뚱하더군요. 페이스북 댓글과 티스토리 댓글을 합친 정도로 말이죠. 그래서 다이어트를 시켜주기 위해 탭 방식으로 구현하였습니다.

 디스커스(Disqus) 관련 게시물 

디스커스(Disqus) 가입 및 설치 방법

디스커스(Disqus) 설정 방법

사실 멋드러진 탭 버튼을 직접 만들어 블로그 스킨에 적용하려 했었는데요. 그런데 이게 너무 귀찮더라고요. 내가 이 나이에도 스킨 귀퉁이 만지작 해야 하나 싶고, 탭 버튼 만들 시간이면 게임 한 판을 더 할 수 있는데 싶고 말이죠. 그래서 구글신께 여쭤보았더니 이런 너무 감사하게도 고마우신 분께서 이미 CSS 탭을 구현하셨고 소스까지 공유해 주셨더군요.


디스커스(Disqus)

티스토리 댓글과 디스커스(Disqus) 댓글을 탭으로 구현하고 싶으신 분들은 뭐하라 블로거님의 ‘티스토리 댓글 탭으로 보기 – CSS만으로! 업데이트‘ 글을 참고하시고 멋지게 꾸며 주시면 되겠습니다. 친절하게 소스까지 몽창 다 올려 주셨으니 천천히 잘 따라 하시면 될 것이네요. ‘블로그 속도 개선- Disqus탭 클릭했을 때 로딩되게 하기‘ 글도 참고하시고요. 뭐하라 블로거님의 블로그에는 구글 애드센스 관련된 고퀄팁이 많습니다. 이에 즐겨찾기 해두고 공유해주신 고퀄팁을 자신의 뇌로 흡수하시길 권장드립니다. 제 뇌는 한계가 있어 아직 다 흡수하지 못했지만 즐겨찾기 해놓고 틈틈히 흡수해주고 있네요.

참고로 CSS 탭의 색상 및 크기 등은 원하는 대로 변경 하시면 됩니다. 너무 감사하게도 codepen에 결과물을 올려 두셨으니 https://codepen.io/nubiz/pen/vcAkm 페이지에서 직접 색상 등을 변경해보고 마음에 드는 형태로 CSS에 적용 하시면 되겠습니다.

 

저는 뭐하라님께서 다 차려 놓은 밥상에 밥 주걱 얹어 보았습니다. CSS 탭에 댓글 숫자가 표시될 수 있도록 엄청난 수고를 하여 소스를 추가해 주었습니다. 제가 추가한 것은 딱 3줄이지만 고급 마우스로 복사 붙여 넣기 하였기에 고퀄 소스라고 볼 수 있습니다. 응? html 그러니까 뭐하라님 소스에 2줄 그리고 CSS에 1줄 추가해 주면 CSS 탭에 각각의 댓글 숫자가 표시 됩니다.

마크쿼리 스킨에 있던 소스 그대로 옮겨 넣은 것이니 마크쿼리 스킨 사용하신다면 그대로 추가해주면 될 것이네요. 다른 스킨에도 뭐 문제 생길 껀덕지는 없으니 그대로 적용하셔도 될 것 같습니다. 혹시 모르니 반드시 스킨 백업 후 작업 하시기 바랍니다.

티스토리와 디스커스(Disqus) 댓글 숫자 표시 방법은 아래와 같습니다. 뭐하라님 소스에 파란색 부분을 추가해주면 됩니다. 그리고 CSS 하단에 빨간색 한 줄 넣어 주면 끝나네요.

  <div class=”labels”>
    <label id=”tab1L” for=”tab1″>SNS 댓글 <a href=”http://블로그주소[##_article_rep_link_##]#disqus_thread”></a></label>
    <label id=”tab2L” for=”tab2″>티스토리 댓글 <span style=”display:inline” class=”cnt”>[##_article_rep_rp_cnt_##]</span></label>
  </div>

#tab2L {white-space:nowrap;}

몽리 블로그는 우클릭 및 복사가 막혀 있으니 아래 ‘댓글 숫자 표시 소스’를 이용하여 복사하시면 되겠습니다.

댓글 숫자 표시 소스