운영중이던 티스토리 실험실(http://tistory-lab.tistory.com) 블로그를 정리하기위해 본 블로그로 포스팅 이동합니다.
티스토리 댓글 탭으로 보기 - CSS만으로!
에서 이어지는 글입니다.
참고로 Material T에는 이미 적용되어있는 기능입니다.
(Material T mark3 부터는 호환성을 위해 CSS와 javascript를 함께사용합니다.)
-------------------------------------------
댓글 플랫폼을 여러가지 사용하는 블로그에 유용한 플러그인입니다.
미리보기
See the Pen tab only CSS by Kim young wook (@nubiz) on CodePen.
태블릿 크기 이상에서는 탭으로 표시되며, 모바일기기에서는 탭이 세로로 배치됩니다.
이 플러그인은 자바스크립트 없이 오직 CSS만으로 동작합니다.
따라서 CSS3를 지원하지 않는 IE8이하 브라우저에서는 댓글을 남기거나 볼 수 없고, 브라우저 업그레이드 안내 메시지만 나타나게되니 참조해주세요.
적용 방법
<HTML>
1. HTML/CSS 편집에 들어가서 댓글 출력부분인
<s_rp>부터 </s_rp>를 찾습니다.
2. 그 아래에 다음 코드를 붙여넣습니다.
<!-- tab_comment -->
<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 id="tab1L" for="tab1">티스토리 댓글</label>
<label id="tab2L" for="tab2" >Disqus</label>
<label id="tab3L" for="tab3">트랙백</label>
</div>
<div class="tab_container">
<div id="tab1C" class="tab_content">
댓글
</div>
<div id="tab2C" class="tab_content">
디스커스
</div>
<div id="tab3C" class="tab_content">
트랙백
</div>
<div class="notAvailable">현재 브라우저에서는 댓글을 표시할 수 없습니다.<br/> IE9 이상으로 브라우저를 업그레이드하거나, 크롬, 파이어폭스 등 최신 브라우저를 이용해주세요.</div>
</div>
</div>
3. 빨간색 글자 중 '댓글'에 위에서 찾은 <s_rp>부터 </s_rp>를 붙여넣습니다.
4. 트랙백 표시부분인 <s_tb>부터 </s_tb>까지도 마찬가지로 3번탭에 붙여넣습니다.
5. disqus에는 본인의 disqus 코드를 붙여넣습니다.
로딩속도를 위해 다음을 참조해보세요.
- 블로그 속도 개선- Disqus탭 클릭했을 때 로딩되게 하기
<CSS>
style.css 맨 아래에 다음을 붙여넣습니다.
.tabs>.labels>label {
width:150px;
background-color: #ddd;
border-radius: 0 1em 0 0;
color: #999;
font-weight:bold;
text-shadow:#aaa -1px -1px;
cursor: pointer;
float: left;
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);
}
.tabs>.labels>label:hover {
background-color: #ddd;
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;
color: #fff;
}
.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;
}
.notAvailable {
border:#f00 solid 1px;
background:#fdd;
padding:1em;
}
input[name="tabs"]:checked ~ .tab_container>.notAvailable {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:first-of-type {
margin-top: 1em;
};
}
