티스토리 마크쿼리 반응형 스킨 댓글부분 탭으로 바꾸는 방법 대충대충

탭으로 댓글 정리

뭐하라님 공개하신소스로 마크쿼리 스킨에 적용방법?

뭐하라님 블로그 : http://nubiz.tistory.com/442

혹시나 도움될분 있나싶어서 글하나 적어봅니다.

보고도 이해 안되신다면 .....

댓글로 문의해주세요 '';;

탭형식으로 바꾸기전 마크쿼리웹반응형스킨에 기본모습

적용하고 한페이에 댓글, 디스커스소셜댓글, 트랙백, 한페이지에 하나만 나오는 모습

HTML

<!-- tab_comment -->
<ul class="tabs">
  <li class="active" rel="tab1">제목</li>
  <li rel="tab2">제목</li>
</ul>
<div class="tab_container">
	<div id="tab1" class="tab_content">
<!-- 첫번째. -->
	</div>
  <!-- #tab1 -->
	<div id="tab2" class="tab_content">
<!-- 두번째. -->
	</div>
  <!-- #tab2 -->
</div>


<script type="text/javascript">
$(document).ready(function() {
	$(".tab_content").hide();
	$(".tab_content:first").show(); 
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active");
		$(this).addClass("active");
		$(".tab_content").hide();
		var activeTab = $(this).attr("rel"); 
		$("#"+activeTab).fadeIn(); 
	});	
});
</script> 

<!-- 이건 위에꺼까지했는데 안되면  jQuery가 로딩되는 것이니 추가해주면되요 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

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;
}

본론은 여기서부터...

저는 탭을 3개 만들었으니 3개로 해서 설명할께요
우선 젤위에 코드를 복사해서 에디터프로그램이나 메모장 등 편집할곳에 붙혀넣고요.

<!-- tab_comment -->
<ul class="tabs">
  <li class="active" rel="tab1">제목</li>
  <li rel="tab2">제목</li>
  <li rel="tab3">제목</li>
</ul>
<div class="tab_container">
	<div id="tab1" class="tab_content">
<!-- 첫번째. -->
	</div>
  <!-- #tab1 -->
	<div id="tab2" class="tab_content">
<!-- 두번째. -->
	</div>
  <!-- #tab2 -->
	<div id="tab3" class="tab_content">
<!-- 세번째. -->
	</div>
  <!-- #tab3 -->
</div>
.
.
.

이렇게 만들어 놓고 처음으로 보여줄 탭을 정하시고 <!-- 첫번째. -->에 복사 저는 디스커스(Disqus)를 처음에 적용했지만 지금은 그냥 티스토리 댓글로 해놧어요

1. 제목부분
<section class="actionTrail global-links">
<ul class="tabs">
  <li class="active" rel="tab1">Comment [**_article_rep_rp_cnt_##]</li>
  <li rel="tab2">Trackback [**_article_rep_tb_cnt_##]</li>
  <li rel="tab3">Disqus</a></li>;
</ul>
</section>

이부분을 <section class="actionTrail global-links"> ... </section> 상하에 추가

이부분에 지정되있는 스타일 그대로 사용할려구 했습니다.
그리고 제목 부분에...

첫번째 제목에 Comment [**_article_rep_rp_cnt_##] 댓글이름이, 갯수 표시되는 치환자 넣었구요
두번째 제목에 Trackback [**_article_rep_tb_cnt_##] 트랙백이름 나타나는 부분 표시되는 치환자 입력
세번째 제목에 Disqus 입력 디스커스도 댓글갯수표시할수 있으나 일부로안함

치환자는 표시안되니 **로했어요 ## 으로 이해하시면될꺼에요

2. 댓글부분
<div class="tab_container">
	<div id="tab1" class="tab_content">
<s_rp>   
<section class="comment global-links">
.
</section><!-- Entry : footer : comment -->
</s_rp>
	</div>
  <!-- #tab1 -->
	<div id="tab2" class="tab_content">
<s_tb>
<section class="trackback global-links">
.
</section>
</s_tb>
	</div>
  <!-- #tab2 -->
	<div id="tab3" class="tab_content">
<!-- 세번째. 디스커스(Disqus) 댓글 -->
	</div>
  <!-- #tab3 -->
</div>
.
.

첫번째 탭에 <s_rp> ... </s_rp> 티스토리 댓글부분 다 복사해넣었구요
두번째 탭에 <s_tb> ... </s_tb> 티스토리 트랙백부분 다 복사했어요
세번째 탭은 디스커스소스 적용하구요

<!-- Entry : footer -->
<div class="entry-footer">
  <!-- 여기에 작업한 소스 붙혀넣기 -->
</div><!-- Entry : footer -->

여기까지했으면 1번 제목부분은 <section class="actionTrail global-links"> ...</section> 여기안에 다지우고 붙혀넣기
2번 댓글부분은 <div class="entry-footer"> .... </div> 사이에 꺼 이제 필요엇으니 지우고 댓글영역 붙혀넣기

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: 33%;
}

CSS 부분은 다른거 수정하실꺼하시고 ul.tabs li 부분에 width: 50%;를 33%로 수정 하면 한줄에 3개 들어갑니다.
그리고 티스토리관페이지 > 화면설정 > 화면출력란에 댓글, 트랙백 펼침상태로된지 확인하세요
접혀있음 적용안됨

---

Plus

너무 복잡하게 설명 글을 적었나요;;
수정은 5분도안걸리는데 글쓰는데 1시간이상걸리는구나 ;; 글도 잘못쓰니 이렇게 된거같습니다.
혹시나 해보시고도 궁금하시면 댓글로 문의하시면 답변드릴께요'';;