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

티스토리 Book Club 스킨 최근글/인기글 편집

by 닐기 2019. 10. 28.

 

티스토리 Book Club 스킨의 사이드바 메뉴인 최근글/인기글을 편집해 보겠습니다.

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

 

 

▲ 기본은 이렇습니다. 최근글이 먼저 나오고 인기글을 클릭해서 보는 구조입니다.

이걸 인기글이 먼저 나오게 해보겠습니다. 정말 간단해요.

 

▲ 일단 이 부분이 어디에 있는지 div 구조를 파악해야 합니다. 크롬 브라우저입니다. IE에서도 가능합니다.

F12를 눌러서 소스를 보죠. 살펴보니 div post-list tab-ui에서 컨트롤해야 할 것 같네요.

 

 

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

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

 

2019/09/19 - [맛좋은 Soft] - 티스토리 스킨 수정 html/css 편집기 입력기 Sublime Text!!!

 

<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 순서를 바꿔주면 되겠죠?

반응형

댓글27