12. 티스토리 스킨 만들기 최근 글, 댓글, 트랙백

오늘은 길기도 하고, 친구도 만나고 하느라 포스팅 시간이 상당히 늦어졌습니다;

오전에 빨리 작성하려고 했는데 버겁네요 ㅠㅠ

할 수 없이 뒤로 미뤘습니다.

잡설은 그만 하고 바로 수정 화면으로 넘어갈께요!

오늘은 최근 글, 최근 댓글, 최근 트랙백을 나타내주는 사이드바 모듈을 알아보겠습니다.

먼저 사이드바 설정으로 들어가셔서 최근에 올라온 글, 댓글, 트랙백을 넣고 저장을 눌러주세요.

당연히 글과 댓글, 트랙백 등이 있어야겠죠?

없으면 아직 컨텐츠 부분이 작성이 안되어서 글이 안나오기 때문에 이 부분을 제일 마지막에 하셔도 되겠습니다.

이런식으로 세 부분이 나오게 되는데요.

최근에 올라온 글은 글 제목 (댓글 수)로 나오고 

최근에 달린 댓글은 댓글 내용. 작성자명. 댓글을 적은 날짜 순으로 나옵니다.

마지막으로 트랙백은 트랙백을 보낸위에서  글, 트랙백을 보낸 블로그의 주소, 트랙백을 보낸 날짜 순입니다.

저는 이 부분을 살짝 수정 했기 때문에, HTML도 함께 봐주세요!

      <s_sidebar_element>

      <!-- 최근에 올라온 글 -->

      <div class="recentPost">

        <h3>최근에 올라온 글 </h3>

        <ul>

        <s_rctps_rep>

          <li>

            <a href="[ ##_rctps_rep_link_##]"> [ ##_rctps_rep_title_##].</a> 

            <span class="cnt">[ ##_rctps_rep_rp_cnt_##]</span>

          </li>

        </s_rctps_rep>

        </ul>

      </div>

      </s_sidebar_element>

먼저 최근 글 부분은 수정한 부분이 없이, 기본 HTML을 그대로 사용했습니다.

      <s_sidebar_element>

      <!-- 최근에 달린 댓글 -->

      <div class="recentComment">

        <h3>최근에 달린 댓글</h3>

        <ul id="recentComments">

        <s_rctrp_rep>

          <li>

            <a href="[ ##_rctrp_rep_link_##]">[ ##_rctrp_rep_desc_##].</a><br/>

            <span class="info_wrap">

              <span class="name">[ ##_rctrp_rep_name_##]</span> 

              <span class="date">[ ##_rctrp_rep_time_##]</span>

            </span>

          </li>

        </s_rctrp_rep>

        </ul>

      </div>

      </s_sidebar_element>

      <s_sidebar_element>

      <!-- 최근에 받은 트랙백 -->

      <div class="recentTrackback">

        <h3>최근에 받은 트랙백</h3>

        <ul>

        <s_rcttb_rep>

          <li>

            <a href="[ ##_rcttb_rep_link_##]">[ ##_rcttb_rep_desc_##].</a><br/>

            <span class="info_wrap">

              <span class="name">[ ##_rcttb_rep_name_##]</span> 

              <span class="date">[ ##_rcttb_rep_time_##]</span>

            </span>

          </li>

        </s_rcttb_rep>

        </ul>

      </div>

      </s_sidebar_element>

최근 댓글과 트랙백 부분은 빨간색으로 적힌 <br/> 부분만 추가 되었네요.

저의 경우엔 있는게 더 깔끔해 보여서 적어줬습니다.

직접 만드시는 분 맘대로 하시면 되겠습니다.

.recentPost,

.recentComment,

.recentTrackback {margin-bottom:10px;}

.recentPost > h3, .recentComment > h3 , .recentTrackback > h3 {

text-align:center;

margin-bottom:10px;

color:#fff;

text-shadow:3px 3px 5px #202d44;

}

.recentPost li,

.recentComment li,

.recentTrackback li {

margin-left:15px;

font-size:13px;

font-weight:bolder;

}

.recentPost .cnt {font-size:11px;color:#333;}

.recentComment .info_wrap {font-size:12px;color:#333;}

.recentTrackback .info_wrap {font-size:12px;color:#333;}

CSS 부분은 .recentPost, .recentComment, .recentTrackback에 다른 모듈과의 거리를 위한 margin-bottom 값을 10px을 줬습니다.

h3 부분도 물론 다른 부분의 h3과 동일 하구요.

li 부분들은 margin-left를 줘서 list-style이 보이게 끔 했습니다.

글씨 크기도 기본적으로 너무 크기 때문에 13px로 조절 했구요.

bolder로 굵게 만들었습니다.

그 다음으로 .recentPost .cnt의 경우 카테고리의 글의 갯수 처럼 여기선 글에서의 댓글 갯수를 뜻합니다.

이 부분을 다른 것처럼 11px, #333으로 설정했습니다.

.recentComment와 .recentTrackback의 .info_wrap 부분은 위에서 적어놓은것처럼 댓글을 적은 사람과 트랙백을 보낸 블로그, 시간 등을 뜻합니다.

이 부분은 12px, #333으로 설정했습니다.

최근 글 부분은 이 정도로 수정이 끝났습니다.

현재 상태는 http://kreedit.tistory.com/에서 직접 보실 수 있고, 궁금한 점은 댓글에 남겨주세요!

빠르게 답변 해드리겠습니다!