Whatever 스킨에 인기 포스트(인기글) 추가하는 방법

Whatever 스킨에 대한 설정법을 올리고 있습니다.

오늘은 Whatever 스킨에 인기 포스트를 추가하는 방법을 안내해드립니다. 

사실 Whatever 스킨은 깔끔한 게 매력있지만 의외로 부족하고 아쉬운 부분이 많은 스킨입니다.

카테고리도 없고, 좌우측에 사이드바도 없고, 하단 사이드바 폭도 이상하고, 인기 포스트 추가도 못하고 등등

저같은 경우에는 그럼에도 불구하고 Whatever 스킨에 정이 들어 쉽사리 다른 스킨으로 변경하지 못하고 이 스킨을 기본으로 조금씩 수정 보완하고 있습니다.

제가 아는 한에서 제가 알고 있는 방법들을 전달해 드릴테니 도움되었으면 합니다. 

 

지난 번 사이드바 폭 조절하는 것처럼 이것도 알고 나면 방법은 간단합니다.

 

1. 설정-꾸미기-스킨편집-html편집 으로 갑니다. CSS가 아님을 유의하세요

 

2. html 하단 어디든 클릭하여 커서를 HTML 명령어 속에 위치 시키기

 

3. ctrl+f 이용하여 sidebar 찾기

 

4. 찾아진 sidebar 위치 밑 명령어 확인

제대로 검색하셨다면 위와 같은 화면이 나오게 됩니다.

지난 글(사이드바 폭 변경 방법)에서 말씀드렸다시피 sidebar-1은 좌측 사이드바 입니다. 여기서는 sidebar 1,2,3이 중요하지 않기 때문에 여기까지만 찾으시면 됩니다.

일단 이 상태에서 정지하세요.

 

5. 인기 포스트 명령어 복사 하기

tistory.github.io/document-tistory-skin/sidebar/popular_post.html 

티스토리 공식 안내문 입니다. 

- 명령어에 대한 설명 -

- 인기 포스트를 넣기 위한 명령어 -

설명문은 참고만 하시고, 위의 알려드린 주소에서 명령어를 복사 하시면 됩니다.

링크 이동이 귀찮은 분들을 위해 명령어 복사 파일을 올려드리니 내려받아 보세요

인기 포스트 명령어.txt

0.00MB

 

6. html 에 붙여넣기

위에서 복사한 명령어를 붙여넣으면 됩니다.

붙여넣을 위치는 공지사항과 최근 포스트 어디든 상관없습니다만, 편의를 위해 '최근 포스트' 명령어 다음에 붙여넣기하시면 됩니다. 밑의 사진에서 빨간 투명상자가 최근 포스트에 대한 명령어 범위 이기 때문에 이 밑에 붙여넣으시면 됩니다.

- 최근 포스트 명령어 범위 -

 

붙여넣는 위치를 확실히 하기 위해 enter를 세번 친 상황입니다.

 

세번의 줄바뀜 사이에 커서를 두고 붙여넣기 하면 아래와 같은 결과가 나옵니다. 빨간 상자만 보시면 됩니다.

 

7. 명령어 일부 수정

위의 명령어를 그대로 활용하게 되면 아래와 같이 글씨가 깨지게 됩니다.

 

따라서 명령어 중 h3 를 h2로 변경하시고, 그 사이에 있는 '이 블로그 인기글'이라는 제목도 원하는 제목(인기 포스트)으로 변경하시면 됩니다. 

참고로 <!--이 블로그 인기글 --> 은 명령어에 반영되지 않는 주석 같은 개념이므로 신경쓰지 않으셔도 큰 문제는 없습니다만 나중에 사이드바 이름이 되므로 통일성을 기하기 위해 모두 인기 포스트로 이름을 바꾸기를 추천드립니다.

또한 가장 중요한 것으로 처음 부분의 <div class="popularPost">를 반드시 <div class="post"> 로 바꿔야 합니다.

그래야 글씨체 및 폰트가 깨지지 않습니다. 

마지막으로

<a href=""> </a>

하단부를 </li> 전까지 삭제합니다.

삭제의 의미는 인기 포스트에서 의미 없는 글 댓글 갯수, 대표 이미지, 카테고리 이름 같은 것들을 제외하기 위함입니다.

정리하면, 완성된 부분은 다음과 같습니다. 

참고를 위해 명령어를 다시 올려 드립니다.

인기 포스트 명령어 수정.txt

0.00MB

 

8. 결과 확인

아래 사진으로 보시는 것처럼 본문 메뉴는 변화가 없으나, 사이드바 메뉴에 이 블로그 인기글 이라는 모듈이 새로 만들어진 것을 알수 있습니다. 이를 이용하여 사이드바를 추가하면 됩니다.

- 본문 하단, 변화 없음 -

- 사이드바에 인기 포스트 추가 -

 

9. 사이드바2 에 추가 후 결과 확인

보시는 대로 중앙 사이드바에 인기 포스트가 새로 만들어진 것을 볼 수 있습니다.

 

마치며

처음부터 수정된 명령어를 그냥 제시하면 되는데 명령어가 어떻게 이뤄지는 지 조금이라도 이해하길 바라는 마음에서 일부러 초기의 맞지 않는 명령어부터 안내하였습니다.

도움 되었길 바랍니다.

 

참고 주소

티스토리 Whatever 스킨 사이드바 폭 조절 방법

티스토리 whatever 스킨 사이드바 추가 후기 그리고 잡담

티스토리 Whatever 스킨에 카테고리 넣는 방법 따라하기

티스토리 Whatever 스킨 설정 방법 총정리

 

제 글이 도움 되셨다면 ♥공감+구독+SNS공유+α 꾹 부탁드리며, 궁금한 사항은 언제든 댓글 주세요 :)