티스토리 블로그 오디세이 스킨에서 최근글과 인기글을 분리해 보도록 합시다~ [ 최근글 | 인기글 ] 탭으로 되어 있는 부분을 최근글 따로, 인기글 따로 분리해 보는 것입니다. 아래의 안내사항을 따라하시면 쉽게 하실 수 있습니다.
스킨 편집으로 이동
[블로그관리]로 이동하신 다음에 [스킨편집]으로 이동합니다. 그리고 [HTML 편집]을 눌러주세요.
최근글과 인기글 찾기
[Ctrl + F] 를 누르시고 "최근글과 인기글"을 검색해 주세요. <s_sidebar_element> ~ </s_sidebar_element> 태그를 확인하실 수 있습니다. 해당 내용을 삭제할 예정인데 혹시라도 원래대로 돌릴 예정이 있으면 별도로 자료를 저장해 주세요. (내용을 지우시기 전에 메모장에 복사해 주세요) 아래는 백업코드를 남겨두었습니다. 혹시라도 되돌릴 가능성이 있으면 다음 코드를 다시 붙여넣으면 됩니다.
<s_sidebar_element>
<div class="box-recent">
<h3 class="title-sidebar blind">최근글과 인기글</h3>
<ul class="tab-recent">
<li class="tab-button recent_button on"><a class="tab-button" href="#" onclick="return false;">최근글</a></li>
<li class="tab-button sidebar_button"><a class="tab-button" href="#" onclick="return false;">인기글</a></li>
</ul>
<ul class="list-recent">
<s_rctps_rep>
<li>
<a href="[##_rctps_rep_link_##]" class="link-recent">
<s_rctps_rep_thumbnail>
<p class="thumbnail" style="background-image:url('[##_rctps_rep_thumbnail_##]')"></p>
</s_rctps_rep_thumbnail>
<div class="box-recent">
<strong>[##_rctps_rep_title_##]</strong>
<span>[##_rctps_rep_date_##]</span>
</div>
</a>
</li>
</s_rctps_rep>
</ul>
<ul class="list-recent list-tab" style="display: none">
<s_rctps_popular_rep>
<li>
<a href="[##_rctps_rep_link_##]" class="link-recent">
<s_rctps_rep_thumbnail>
<p class="thumbnail" style="background-image:url('[##_rctps_rep_thumbnail_##]')"></p>
</s_rctps_rep_thumbnail>
<div class="box-recent">
<strong>[##_rctps_rep_title_##]</strong>
<span>[##_rctps_rep_date_##]</span>
</div>
</a>
</li>
</s_rctps_popular_rep>
</ul>
</div>
</s_sidebar_element>최근글 수정하기
사이드바 엘리먼트 최근글을 분리하겠습니다. 아까 지운 내용 중에 최근글 부분을 추출하여 <s_sidebar_element> 태그를 생성합니다.
<!--최근글-->
<s_sidebar_element>
<div class="box-recent">
<h3 class="title-sidebar">최근글</h3>
<ul class="list-recent">
<s_rctps_rep>
<li>
<a href="[##_rctps_rep_link_##]" class="link-recent">
<s_rctps_rep_thumbnail>
<p class="thumbnail" style="background-image:url('[##_rctps_rep_thumbnail_##]')"></p>
</s_rctps_rep_thumbnail>
<div class="box-recent">
<strong>[##_rctps_rep_title_##]</strong>
<span>[##_rctps_rep_date_##]</span>
</div>
</a>
</li>
</s_rctps_rep>
</ul>
</div>
</s_sidebar_element>인기글 수정하기
사이드바 엘리먼트 인기글을 분리하겠습니다. 아까 지운 내용 중에 인기글 부분을 추출하여 <s_sidebar_element> 태그를 생성합니다. <s_rctps_popular_recp> 부분 등 미묘한 차이가 있습니다.
<!--인기글-->
<s_sidebar_element>
<div class="box-recent">
<h3 class="title-sidebar">인기글</h3>
<ul class="list-recent list-tab">
<s_rctps_popular_rep>
<li>
<a href="[##_rctps_rep_link_##]" class="link-recent">
<s_rctps_rep_thumbnail>
<p class="thumbnail" style="background-image:url('[##_rctps_rep_thumbnail_##]')"></p>
</s_rctps_rep_thumbnail>
<div class="box-recent">
<strong>[##_rctps_rep_title_##]</strong>
<span>[##_rctps_rep_date_##]</span>
</div>
</a>
</li>
</s_rctps_popular_rep>
</ul>
</div>
</s_sidebar_element>전체 코드
최근글과 인기글을 분리한 전체 코드입니다.
<!--최근글-->
<s_sidebar_element>
<div class="box-recent">
<h3 class="title-sidebar">최근글</h3>
<ul class="list-recent">
<s_rctps_rep>
<li>
<a href="[##_rctps_rep_link_##]" class="link-recent">
<s_rctps_rep_thumbnail>
<p class="thumbnail" style="background-image:url('[##_rctps_rep_thumbnail_##]')"></p>
</s_rctps_rep_thumbnail>
<div class="box-recent">
<strong>[##_rctps_rep_title_##]</strong>
<span>[##_rctps_rep_date_##]</span>
</div>
</a>
</li>
</s_rctps_rep>
</ul>
</div>
</s_sidebar_element>
<!--인기글-->
<s_sidebar_element>
<div class="box-recent">
<h3 class="title-sidebar">인기글</h3>
<ul class="list-recent list-tab">
<s_rctps_popular_rep>
<li>
<a href="[##_rctps_rep_link_##]" class="link-recent">
<s_rctps_rep_thumbnail>
<p class="thumbnail" style="background-image:url('[##_rctps_rep_thumbnail_##]')"></p>
</s_rctps_rep_thumbnail>
<div class="box-recent">
<strong>[##_rctps_rep_title_##]</strong>
<span>[##_rctps_rep_date_##]</span>
</div>
</a>
</li>
</s_rctps_popular_rep>
</ul>
</div>
</s_sidebar_element>결과확인
최근글, 인기글 분리 이전
분리 이전에는 [ 최근글 | 인기글 ]로 되어 있어서 인기글을 보시려면 사용자가 의도적으로 탭을 선택하여야 합니다.
최근글, 인기글 분리 이후
최근글을 상단에, 인기글을 하단에 배치하였습니다.