본문 바로가기
티스토리/· 스킨편집

티스토리 북클럽 스킨 최근글, 인기글 편집

by 닐기 2022. 1. 24.

북클럽 스킨의 사이드바 메뉴인 최근글, 인기글을 편집해 보겠습니다.

이 글은 누군가의 도움 요청으로 알려드렸는데 글로 남겨도 괜찮을 것 같아서 써봐요.^^

 

티스토리-북클럽스킨-최근글인기글-편집

 

▲ 최근글이 먼저 나오고 인기글을 클릭해서 보는 구조입니다. 인기글이 먼저 나오게 해 봅시다.

 

 

 

▲ 이 부분이 어디에 있는지 div 구조를 파악해야 합니다. 크롬 브라우저에서 F12를 눌러서 소스를 보죠. 살펴보니 div 'post-list tab-ui'에서 컨트롤해야 합니다.

 

 

 

▲ 스킨 편집 html 편집 화면으로 들어가서 찾기(Ctrl+f)로 post-list tab-ui를 찾아줍니다.

참고로 저는 html이나 css 편집 시 다른 편집기에서 수정 후에 복/붙합니다. 편집기는 sublimetext입니다. 무료니 이용해 보세요.

 

 

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

    <div id="recent" class="tab-list">~</div> : 최근글

    <div id="popular" class="tab-list">~</div> : 인기글

</div>

 

이런 구조로 되어있는데 이 구조의 순서를 바꿔주면 최근글/인기글 >> 인기글/최근글로 바뀝니다.

 

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

    <div id="popular" class="tab-list">~</div> : 인기글

    <div id="recent" class="tab-list">~</div> : 최근글

</div>

 

이렇게 하면 됩니다.

 

 

 

▲ 잘 변경되었습니다.

이번엔 인기글/최근글을 한 줄에 다 보이게 나열해보겠습니다.

 

 

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

    <div id="popular" class="tab-list">~</div> : 인기글

    <div id="recent" class="tab-list">~</div> : 최근글

</div>

 

이렇게 있는데 상위 div를 삭제하면 됩니다.

 

<!--div class="post-list tab-ui"-->

    <div id="popular" class="tab-list">~</div> : 인기글

    <div id="recent" class="tab-list">~</div> : 최근글

<!--/div-->

 

삭제해도 되지만 다음에 다시 쓸지도 모르니 이렇게 <!-- -->를 이용해서 주석 처리해도 됩니다.

주석 처리 태그는 화면에 보이지 않는 태그입니다.

 

!!! 이 주석 태그를 이용해 최근글, 인기글 중에 하나를 삭제할 수도 있을 것입니다.

 

 

▲ 인기글과 최근글이 한 줄로 다 보이죠.

순서를 바꾸려면 위에서 했던 것처럼 div 순서를 바꿔주면 되겠죠?