티스토리 댓글 탭으로 보기 - CSS만으로!
아래 포스팅을 먼저 보시면 이해가 쉽습니다.
원리는 간단히 탭으로 <input type=radio>를 사용하고, CSS선택자로 :checked를 사용하는 것입니다.
미리보기
See the Pen tab only CSS by Kim young wook (@nubiz) on CodePen.
codepen에서 작업한 결과물입니다.
적용하기
적용 방법은 이전과 크게 다르지 않습니다.
1.HTML/CSS수정 - skin.html에서
<s_rp> 부터 </s_rp>까지를 잘라내어 메모장같은데 붙여둡니다.(댓글 출력 부분)
<s_tb> 부터 </s_tb>까지를 잘라내어 메모장같은데 붙여둡니다.(트랙백 출력 부분)
2. <s_rp>를 잘라낸 자리에 아래 코드를 대신 붙여넣고 파란색 부분 대신에 1.에서 복사해둔 내용을 각각 넣습니다.
disqus부분은 본인의 disqus코드를 넣으시면 됩니다.
아래 글을 참조하시면 좋습니다.
- 블로그 속도 개선- Disqus탭 클릭했을 때 로딩되게 하기
<!-- tab_comment by nubiz(http://nubiz.tistory.com/499) -->
<div class="tabs">
<input type="radio" id="tab1" name="tabs" checked/>
<input type="radio" id="tab2" name="tabs"/>
<input type="radio" id="tab3" name="tabs"/>
<div class="labels">
<label for="tab1">티스토리 댓글 : [# #_article_rep_rp_cnt_##]</label>
<label for="tab2" onclick="loadDisqus()">Disqus</label>
<label for="tab3">트랙백 : [# #_article_rep_tb_cnt_##]</label>
</div>
<div class="tab_container">
<div id="tab1C" class="tab_content">
<s_rp>
여기에 댓글이 출력됩니다
</s_rp>
</div>
<!-- #tab1 -->
<div id="tab2C" class="tab_content">
<div class="disqus">
</div>
</div>
<!-- #tab2 -->
<div id="tab3C" class="tab_content">
<s_tb>
여기에 트랙백이 출력됩니다
</s_tb>
</div>
<!-- #tab3 -->
</div>
</div>
#과 #사이의 띄어쓰기는 제거해주세요.
3.style.css에 다음을 붙여넣습니다. 탭의 모양은 이 내용을 직접 수정하시면 됩니다.
.tabs {
float: left;
width: 100%;
}
.tabs>.labels>label {
background-color: #eee;
border-radius: 0 2em 0 0;
color: #999;
cursor: pointer;
float: left;
height: 3em;
line-height: 3em;
overflow: hidden;
padding: 0 1em;
position: relative;
width: 40%;
margin: 1em 0 0 0;
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);
}
.tabs>.labels>label:nth-of-type(3) {
width: 20%;
}
.tabs>.labels>label:hover {
background-color: #ccc;
color: #333;
}
input#tab1:checked ~ .labels>label[for="tab1"],
input#tab2:checked ~ .labels>label[for="tab2"],
input#tab3:checked ~ .labels>label[for="tab3"] {
background-color: #45a6e7!important;
color: #fff!important;
display: block!important;
}
.tabs>.labels>label a {
color: inherit;
}
.tab_container {
clear: both;
overflow: auto;
width: 100%;
padding: 1em;
-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);
}
.tabs>input[type="radio"], .tabs .tab_content {
display: none;
}
input#tab1:checked ~ .tab_container>#tab1C,
input#tab2:checked ~ .tab_container>#tab2C,
input#tab3:checked ~ .tab_container>#tab3C {
display:block;
}
@media screen and (max-width:480px) {
.tabs>.labels>label {
width: 100%;
margin: 0;
border-radius: 0;
}
.tabs>.labels>label:nth-of-type(3) {
width: 100%;
}
.tabs>.labels>label:first-of-type {
margin: 1em 0 0 0;
};
}
4.화면설정-화면출력에서 댓글,트랙백 모두 펼침으로 체크해주세요.
5. skin.html에서 댓글, 트랙백을 접고 펼치는 버튼들을 제거하면 좋습니다.(article_rep_rp_link으로 찾으시면 actionTrail영역에 있습니다.)
탭 순서 바꾸기
1. <label>태그들의 순서만 바꿔주시면 됩니다. 이때 탭 번호가 아니라 label태그의 순서 자체가 중요합니다.
2. 1.에서 첫번째 탭의 <label 이 for="tab2"가 되었다면,<input>태그중 id가 tab2인 것을 찾아 '/>'앞에 checked를 써주고, 원래의 checked는 지우면 됩니다.
마침
탭 구현을 CSS만으로 할 수 있다는 사실이 신기하네요.
제 아이디어는 아니고 codepen을 둘러보다 알게된 사실입니다.
disqus나 liveRe사용자분들 중에 제 탭을 사용하시는 분을이 꽤 눈에 띄어 기분이 좋습니다^^
그분들이 이 글도 보고 업그레이드 하셨으면 좋겠네요~
업데이트
여기에 업데이트 되었습니다. (IE8이하 미지원 브라우저에서 이용불가 안내메시지 추가)
