[블로그 tip] 티스토리 북클럽 스킨 수정
- 인기글, 최근글 노출 순서 변경 방법
- 인기글/최근글 원하는 명칭으로 변경하기
+ p.s. 오디세이 스킨 수정 방법
북클럽 스킨을 사용하는 블로그라면 이미 여기저기 알려져 있는 흔한 정보이지만, 혹시라도 유용하게 활용하실 분들이 있기를 바라는 마음에 공유합니다. 사실 html 구조, 원리만 알고 있으면 티스토리 블로그의 어떤 스킨에라도 공통적으로, 간편하게 적용할 수 있는 방법인데요. 아래 캡처 화면과 설명을 보시면서 따라 해 보시면 단 3분 컷으로 수정이 가능합니다!
0. 기초 작업
일단 [블로그 관리 > 스킨 편집 > html 편집] 화면에 접속합니다.
ctrl + F 누르고 키워드 단어로 '최근글' or '인기글'이라고 검색하여 html 구조를 찾습니다.
* 북클럽 스킨 주석 명칭 및 위치 <!-- 최근글/인기글 -->
* 오딧세이 스킨 주석 명칭 및 위치 <!-- 최근글과 인기글 -->
1. 북클럽 스킨 인기글/최근글 이름, 명칭 변경
티스토리 스킨에서 디폴트(항상 표출되는 고정 값) 명칭은 항상 '인기글', '최근글'인데요. 본인이 원하는 이름으로 얼마든지 쉽게 변경 가능합니다. 허니 바이브(Honey Vibe) 블로그 메인 화면 우측 사이드 바를 보시면 아시겠지만, 저는 영어로 바꿨습니다! ㅎㅎ
(예: Popular, Latest) 방법은 아래와 같습니다.
- 최근글, 인기글 영역을 검색해서 찾았다면 <h2> ~ </h2> 사이에 주목해보세요! h2를 추가로 검색하든지, 검색하지 않아도 너무나 명백하게 한국어로 최근글, 인기글이라고 대 놓고 적혀 있는 곳이 눈에 띌 것입니다!
제 경우에는 이미 수정해버려서 영어로 바뀌어 있는 것입니다. 수정하지 않고 기존 그대로 스킨 사용하고 계신 분들은 아마 최근글, 인기글로 보이실 겁니다. 이 부분을 원하는 아무 나라 언어, 아무 명칭으로 변경 후 저장하면 끝!
<h2> 최근글 </h2> --> <h2> 원하는 명칭 </h2>
<h2> 인기글 </h2>
2. 북클럽 스킨 인기글/최근글 순서 변경하는 방법
북클럽이나 오디세이 스킨의 경우 항상 '최근글'이 먼저 보이게 기본 값이 설정되어 있습니다. 그런데 만일 제 블로그처럼 '인기글이 먼저' 보이도록 순서를 변경하고 싶다면 이 또한 간단합니다. 아래 방법을 따라 하시면 됩니다.
사실 최근글, 인기글 이 부분은 우리에게 친숙한 '탭 메뉴(tab)'로 이루어져 있는데요. 즉 우리가 클릭, 클릭하는 순간 밑에 리스트가 전환이 되는 구조이죠. 그 구조를 살짝 바꿔줌으로써 보이는 순서를 변경할 수 있는 것입니다!
1. ctrl+F > tab-list 혹은 id="tt" 검색
: 최근글 탭 영역이 검색 됩니다.
: 최근글 영역은 <div id="tt" class="tab-list"> ~ </div>까지.
'/' 는 끝나는, 닫히는 태그를 의미합니다.
2. 그 밑으로 살짝 스크롤 내려 보시면 <div id="popular" class="tab-list"> 로 시작하는 인기글 영역이 보입니다. 인기글 탭 메뉴도 <div id="popular" class="tab-list"> ~ </div> 까지가 한 세트입니다. 복붙을 잘해주셔야 되는 한 덩이인 것이죠.
3. 이제 1과 2에서 찾은 영역을 잘 복붙 하여 위치(순서)를 변경하면 끝!!
3. 오디세이 스킨 최근글과 인기글 순서 변경하기
저는 오디세이 스킨을 사용하고 있지 않아서, 티스토리 스킨 적용 예시 사이트에 들어가서 개발자 도구로 소스를 분석해보았습니다. 실제로 오디세이 스킨 사용하시는 분들이 블로그 관리 > 스킨 편집 > html 편집 메뉴에 들어가셨을 때도 이와 똑같은 html 구조일 것이라 예상이 됩니다.
따라서 우선 스킨 편집에 들어가서 최근글, 인기글 영역을 검색해서 찾습니다. 그러고 나서 html 트리 구조에서 <li> ~ </li> 2개 세트의 순서만 잘 변경하면 됩니다! 안에 친절하게 글씨도 써져 있죠? 첫 번째 나오는 <li> ~ </li>는 최근글, 두 번째 나오는 <li> ~ </li>는 인기글에 해당됩니다. 닫히는 태그 </li>까지가 한 묶음이니 반드시 빠뜨리지 말고 잘 복붙 하시는 것 주의하세요!
쉽게 설명하자면, 아래 캡처 화면에서 하늘색 박스 부분(인기글)을 고대로 복사하셔서 연두색 박스 영역(최근글) 위로 올려주시기만 하면 됩니다! 그 후 저장하고 새로고침해보시면 최근글과 인기글 순서가 바뀌어 있을 것입니다!
** 공감과 댓글은 블로그 운영에 큰 힘이 됩니다 **
댓글