탭으로 댓글 정리뭐하라님 공개하신소스로 마크쿼리 스킨에 적용방법?
뭐하라님 블로그 : 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시간이상걸리는구나 ;; 글도 잘못쓰니 이렇게 된거같습니다.
혹시나 해보시고도 궁금하시면 댓글로 문의하시면 답변드릴께요'';;
'Blog > 블로그 이야기' 카테고리의 다른 글
요즘에 자꾸 모르던 유입경로가 보이는거 같습니다 (19) | 2014.05.25 |
---|---|
네이버 노출 없어지고 10일차? 11일차? 결국은 내 잘못 인가? (30) | 2014.05.20 |
애드센스 본문삽입? 삽질한번 했습니다. !!! (19) | 2014.05.18 |
블로그하단에 Disqus소셜댓글, 티스토리댓글, 트랙백 탭탭탭으로 설정 (20) | 2014.05.17 |
블로그에 이메일공개 불편하다? 언제가 익숙해질꺼야!!! (18) | 2014.05.16 |