티스토리 북클럽 스킨 사이드바 인기글, 최신글 노출 순서 변경 분리 방법.

개인적으로 티스토리 북클럽 스킨을 사용하면서 사이드바의 최신글/인기글의 순서를 인기글/최신글 또는 최신글과 인기글을 카테고리를 별도로 독립되도록 만들게 되면 모든 방문자들 중에서 가장 인기있는 글을 우선 노출 시킴으로써 이탈률을 줄일 수 있지 않을까 하는 생각에서 적용해 보았습니다.

 

필요한 분들에게 도움이 되어 적용해 볼 수 있는 이번 이야기가 되기를 바라겠습니다.

 

티스토리 북클럽 스킨 사이드바 최근글 인기글 노출 순서 변경과 분리 방법 썸네일

 

목차.

1. 최신글/인기글 → 인기글/최신글의 순서 변경이 필요한 이유.

2. 최신글/인기글 → 인기글/최신글로의 순서 변경 방법.

3. 최신글/인기글 → 최신글, 인기글 독립된 카테고리로 분리 방법.

 

---

1. 최신글/인기글 → 인기글/최신글의 순서 변경이 필요한 이유.

티스토리 블로그 북클럽 스킨에서 사이드바 메뉴로 "최신글/인기글"의 플러그인을 배치시킴으로써 작성된 글중에서 인기가 많은 글과 최근 글을 방문자에게 노출 시켜줌으로써 이탈률을 감소 시키고 체류시간도 증가 시킬 수 있는 고민의 부분적 해결 방법이 될 수 있을것같습니다.

 

그런데 북클럽 스킨의 "최신글/인기글"의 플러그인의 순서는 최신글이 먼저 배치되어 있기 때문에 최신글만 노출되고 인기글은 방문자가 클릭했을때만 노출되는 단점으로 적용될 수 있는 부분으로 인기글을 기본적으로 노출시켜주게 되면 아무래도 많은 사람들에게 인기있는글인만큼 클릭률이 높아짐으로 인해서 이탈률이 감소할 가능성이 있지 않을까 생각해 볼 수 있습니다.

 

이러한 관점에서 봤을때 인기글에서 보여지는 글은 불특정 다수에 의해서 방문자의 문제를 해결해주거나 얻고자 하는 정보를 얻을 수 있는 글이 작성되어 있을 가능성이 많기 때문에 인기글을 기본 노출 시켜주거나 인기글과 최신글을 별도의 카테고리로 분리 시키는 방법에 대해서 확인해 보고자 합니다.

2. 최신글/인기글 → 인기글/최신글로의 순서 변경 방법.

"최근글/인기글"의 순서를 변경하기 위해서는 티스토리 블로그 관리자 메뉴 스킨편집 → html편집으로 이동하여 html코드를 수정하여 순서를 변경 할 수 있습니다.

 

html편집의 html탭에서 ctrl+f 단축키로 최근글 또는 인기글, recent, popular을 찾아 검색하게 되면 <!-- 최근글 -->, <!-- 인기글 -->과 같이 주석처리 되어 있는 html코드 위치에 아래의 코드를 발견 할 수 있습니다.

▼ 원본 html코드 <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>

빨간색으로 체크한 부분이 최근글과 인기글을 구분짓는 각각의 html코드이며 최근글은 상단의 <div id="recent" class="tab-list">부터 </div>까지 작성된 코드이고, 인기글은 <div id="popular" class="tab-list">부터 </div>까지 작성된 코드입니다.

 

따라서 최근글과 인기글의 노출 순서 변경은 해당 코드 위치를 변경해주는것으로 간단하게 변경해 줄 수 있습니다.

변경한 코드는 아래와 같이 변경하여 작성해 주시면 되겠습니다.

</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>

 

3. 최신글/인기글 → 최신글, 인기글 독립된 카테고리로 분리 방법.

최근글과 인기글이 작성된 html 코드를 확인하고 html 코드의 위치 수정만으로 서로의 노출 순서를 변경하는 방법을 위에서 확인해 봤는데 최근글과 인기글을 별도의 독립된 카테고리 형식으로 분리되는 방법을 확인해 보도록 하겠습니다.

 

최근글/인기글은 상단에 작성된 </div class="post-list tab-ui">의 css코드로 하위html코드를 감사주고 있기 때문에 css코드를 최근글과 인기글에 각각 감싸주는 형태로 코드를 수정해 주는것으로 최근글과 인기글을 독립적으로 분리시켜 노출 시킬 수 있습니다.

 

코드 수정은 아래와 같이 변경할 수 있습니다.

<!-- 인기글 --> <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> <!-- 최근글 종료 -->

---

티스토리 블로그에 무료로 제공되고 있는 북클럽 스킨의 최근글/인기글의 노출 순서를 변경하거나 서로 분리 시켜 독립적인 카테고리로 노출 되는 방법에 대해서 확인해 봤는데 인기글과 최근글의 순서를 변경하거나 인기글과 최근글을 독립적인 카테고리로 분리 시키는 기대 효과로 방문자의 이탈률을 감소 시킬 수 있겠습니다.