티스토리 북클럽 스킨 사이드바 최신글 인기글 나누는 방법

티스토리 블로그를 열고 북클럽 기본 스킨을 적용하면 우측 사이드바에 최신글(최근글)과 인기글 목록이 편성되어 있다. 따로 설정하지 않으면 두 메뉴가 같은 탭에 있어서 인기글은 따로 클릭해야 목록을 볼 수 있다.

방문자의 편의를 위해 두 메뉴를 따로 나누려면 간단한 html 설정을 통해 가능하다.

* 블로그 적용 스킨에 따라 진행방법은 다를 수 있으며 이 글은 북클럽 스킨 기준입니다.

최신글 인기글 나누는 방법

최근글 인기글

북클럽 스킨 후 최신글과 인기글은 위처럼 하나의 탭에 같이 묶여 있다. PC버전 방문자라면 그나마 마우스 클릭을 할 수 있지만, 모바일 방문자는 우측 햄버거 바 - 사이드 바 스크롤 내리기 - 인기글 클릭의 과정을 거쳐야 한다. 모바일은 글씨도 작은 편이라 유저의 메뉴 접근이 어려울 수 있으니 글 노출을 위해 두 메뉴를 따로 분리하는 것도 좋은 방법이다.

스킨 편집

우선 티스토리 로그인 - 관리 화면 왼쪽 메뉴 - 스킨 편집 메뉴 선택 후 위의 [html 편집] 버튼을 클릭하자.

확인

화면에 문제 수정 안내 팝업 창이 나오면 [확인] 버튼을 눌러서 html 화면에 접근할 수 있다.

html

화면 위에 HTML 문구가 보이면 아래 코드가 있는 곳 아무 곳을 마우스 왼쪽 클릭하고 Ctrl + F 키를 눌러보자. 그러면 위처럼 Find 검색 창이 나오는데 이곳에 '최근글' 문구를 입력하면 된다.

사이드바 메뉴

이제부터 조금 복잡해 보이지만 최대한 간단히 설명해 보자면, 먼저 위 스크린샷에서 빨간 세로줄 부분이 최근글과 인기글의 영역이다.

- 맨 위 코드 : <s_sidebar_element>
- 맨 아래 코드 : </s_sidebar_element>

위에는 공지사항과 아래 댓글 영역이 보이는데 이곳은 그냥 두면 된다.

두 메뉴를 분리하려면 최신글/인기글 영역을 선택해서 지운 뒤 빈자리에 아래 첨부한 코드를 붙여 넣으면 된다. 메모장 다운로드 후 전체 코드를 복사하자.

s_sidebar_element.txt

0.00MB

코드 복사 붙여넣기

코드는 위처럼 붙여 넣으면 되고 이후 [적용] 버튼을 클릭하면 작업을 완료할 수 있다. 참, 그전에 화면 왼쪽 위에 있는 [미리보기] 버튼을 눌러서 잘 적용되었는지 확인하는 것도 좋다.

* 위에서 <h2>와 </h2>로 감싸져 있는 곳(스크린샷의 빨간 네모)에는 원하는 이름을 입력하면 적용된다. 이 블로그는 예시로 최신 글은 Recent, 인기 글은 Popular라고 정하였다.

분리된 메뉴

[미리보기]를 했을 때 위처럼 메뉴가 분리된 모습으로 나왔다면 성공이다.

추가로 팁을 작성하면 블로그 관리 화면 - 스킨 편집 - 사이드바로 이동 후 드래그&드롭으로 순서를 편하게 조절할 수 있다.

사이드바 설정

위 설정 화면에서 메뉴 이름 왼쪽의 햄버거(☰)를 마우스 왼쪽으로 잡으면 드래그할 수 있다. 드래그한 아이콘은 원하는 곳에 끌어다 드롭하면 되고 [변경사항 저장]을 통해 적용할 수 있다. 만약 필요 없는 메뉴가 있다면 이름 오른쪽 마이너스(-)를 클릭하면 된다.

사이드바 설정

또한 화면을 아래로 내리면 사이드바 메뉴 노출 글 숫자와 글자 수를 설정할 수 있으니 참고하자.

참고 글

티스토리 설정 공략집

 

티스토리 블로그 사이드바 효과와 설정 방법

 

티스토리 사이드바 최신글 댓글 글자 수 줄 설정하는 방법

 

티스토리 블로그 스킨 설정 방법, 북클럽 추천 이유