북클럽 스킨 최신글 인기글 분리 방법.

by

티스토리 북클럽 스킨을 사용해서 사이드바를 활용하는 경우 최신글/인기글 모듈을 추가해서 사용할 수 있습니다.

그러나 최신글/인기글 기본 모듈은 각각의 탭으로 설정되어 있기 때문에 방문자가 직접 최신글 또는 인기글탭을 클릭해야만 해당 글을 확인 할 수 있기 때문에 체류시간 기대 효과가 낮아질 수 있습니다.

이번 글에서는 북클럽 스킨에서 최신글/인기글 순서를 변경하거나 별도의 카테고리로 분리 하는 방법을 알아보도록 하겠습니다.

최신글/인기글 → 인기글/최신글로 순서 변경 하는 방법.

최신글/인기글 순서를 변경 하는 방법은 다음의 순서에 따라 변경 할 수 있습니다.

  • 티스토리 관리자 페이지 로그인.
  • 꾸미기 → 스킨편집 → Html편집
  • 찾기 단축키 Ctrl+F → 찾을 검색어 : 최근글 또는 인기글, recent 또는 popular.
  • 최근글 인기글의 코드 순서 변경.

북클럽 스킨에서 작성된 최근글/인기글의 원본 코드는 다음과 같이 작성되어 있습니다.

<div class=”post-list tab-ui”>

<div id=”recent” class=”tab-list”>
<h2>최근글</h2>
<ul>
<s_rctps_rep>
<li>
<a href=””>
<s_rctps_rep_thumbnail>
<img src=”//i1.daumcdn.net/thumb/C58x58/?fname=” alt=”” />
</s_rctps_rep_thumbnail>
<span class=”title”></span>
<span class=”date”></span>
</a>
</li>
</s_rctps_rep>
</ul>
</div>

<div id=”popular” class=”tab-list”>
<h2>인기글</h2>
<ul>
<s_rctps_popular_rep>
<li>
<a href=””>
<s_rctps_rep_thumbnail>
<img src=”//i1.daumcdn.net/thumb/C58x58/?fname=” alt=”” />
</s_rctps_rep_thumbnail>
<span class=”title”></span>
<span class=”date”></span>
</a>
</li>
</s_rctps_popular_rep>
</ul>
</div>

</div>

위 코드중 윗부분에 작성된 <div id=”recent” class=”tab-list”>은 최근글탭을 표시하는 코드입니다.

아랫부분에 작성된 <div id=”popular” class=”tab-list”> 클래스 코드는 인기글을 표시는 코드입니다.


따라서 최신글과 인기글탭 순서를 변경하는것은 각각의 클래스 코드 순서를 바꿔주는것으로 간단하게 수정할 수 있습니다.

최신글/인기글 → 인기글/최신글탭으로 수정한 코드는 다음과 같습니다.

<div class=”post-list tab-ui”>

<div id=”popular” class=”tab-list”>
<h2>인기글</h2>
<ul>
<s_rctps_popular_rep>
<li>
<a href=””>
<s_rctps_rep_thumbnail>
<img src=”//i1.daumcdn.net/thumb/C58x58/?fname=” alt=”” />
</s_rctps_rep_thumbnail>
<span class=”title”></span>
<span class=”date”></span>
</a>
</li>
</s_rctps_popular_rep>
</ul>
</div>

<div id=”recent” class=”tab-list”>
<h2>최근글</h2>
<ul>
<s_rctps_rep>
<li>
<a href=””>
<s_rctps_rep_thumbnail>
<img src=”//i1.daumcdn.net/thumb/C58x58/?fname=” alt=”” />
</s_rctps_rep_thumbnail>
<span class=”title”></span>
<span class=”date”></span>
</a>
</li>
</s_rctps_rep>
</ul>
</div>

</div>

최근글/인기글 → 최근글, 인기글 카테고리로 분리 수정 하는 방법.

위에서 최신글/인기글 코드를 확인했을때 최신글/인기글의 스타일을 지정하는 코드는 <div class=”post-list tab-ui”> CSS클래스에서 결정하고 있습니다.

따라서 최신글/인기글에서 최신글, 인기글 별도로 독립된 카테고리로 보여주기 위해서는 <div class=”post-list tab-ui”> 코드를 최신글과 인기글 코드에 각각 작성해 주게 되면 최신글, 인기글을 별도의 독립된 카테고리 형태로 보여줄 수 있습니다.

분리된 코드는 다음과 같습니다.

<!– 인기글 –>
<div class=”post-list tab-ui”>
<div id=”popular” class=”tab-list”>
<h2>인기글</h2>
<ul>
<s_rctps_popular_rep>
<li>
<a href=””>
<s_rctps_rep_thumbnail>
<img src=”//i1.daumcdn.net/thumb/C58x58/?fname=” alt=”” />
</s_rctps_rep_thumbnail>
<span class=”title”></span>
<span class=”date”></span>
</a>
</li>
</s_rctps_popular_rep>
</ul>
</div>
</div>
<!– 인기글 종료 –><!– 최근글 –>

</div class=”post-list tab-ui”>

<div id=”recent” class=”tab-list”>
<h2>최근글</h2>
<ul>
<s_rctps_rep>
<li>
<a href=””>
<s_rctps_rep_thumbnail>
<img src=”//i1.daumcdn.net/thumb/C58x58/?fname=” alt=”” />
</s_rctps_rep_thumbnail>
<span class=”title”></span>
<span class=”date”></span>
</a>
</li>
</s_rctps_rep>
</ul>
</div>
</div>
<!– 최근글 종료 –>

위 코드는 최신글과 인기글을 독립된 카테고리로 보여주기 위한 코드로 인기글, 최신글 카테고리 순으로 보여지게 됩니다.

최신글 카테고리를 상위로 올리고자 한다면 최신글 코드를 인기글 코드 위에 작성해 주면 최신글, 인기글 순서로 설정을 변경할 수 있습니다.

관련글

Default Thumbnail티스토리 애드센스 본문 광고 나오지 않는 이유와 해결 방법. Default Thumbnail티스토리 BookClub (북클럽) 스킨 사이드바 고정 방법. Default Thumbnail직장인 부수익 만들기 애드센스 티스토리 블로그. Default Thumbnail티스토리 상단 메뉴 고정 방법 – BookClub (북클럽) 스킨.

Leave a Comment