Disqus 댓글과 티스토리 댓글 탭으로 보기
dIsqus를 사용하고부터 disqus와 티스토리 댓글사이에서 고민이 많았습니다.
둘 다 사용하자니 댓글창이 너무 길어지고.. 하나만 사용하자니 어느한쪽 이용자를 버리게되죠.
댓글이 활성화된경우(이 블로그에서는 아니지만..) 티스토리 댓글을 남기고싶은데 어딨는지 한참찾아야 되는 문제도 있었습니다.
그래서 고민끝에 댓글에 탭으 달기로 했습니다.
소스는 아래의 것을 참조, 변형했습니다.
http://codepen.io/anon/pen/LdyCr
업그레이드
이 포스트는 오래된 포스트입니다. 아래 링크를 통해 업그레이드된 탭을 적용해보세요.
.트랙백이 탭에 포함됨
.디자인 개선
.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>
※[$$_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>으로 묶고 내용을 잘 붙여넣으면 되겠죠?
이 블로그에 적용되어있으니 확인해보세요.
아직 쿠키다루는 법은 모르지만, 쿠키설정으로 탭을 기억하게하는 것도 좋을듯합니다
업그레이드
이 포스트는 오래된 포스트입니다. 아래 링크를 통해 업그레이드된 탭을 적용해보세요.
.트랙백이 탭에 포함됨
.디자인 개선
.jQery스크립트를 사용하지 않음
