티스토리 스킨 제작기 - 사이드바

개요

블로그의 오른쪽에 위치한 사이드바도 간단한 수정 범위 내에서 제 취향대로 수정하였습니다.

Icon 추가

사이드 바에도 역시 밋밋한 텍스트를 조금 더 꾸며줄 수 있도록 font awesome 아이콘 라이브러리를 사용하여 아이콘을 추가하였습니다.

티스토리 스킨 제작기 - Navbar 수정의 상단 메뉴 Icon 넣기를 참고한다면 어렵지 않게 수정할 수 있을 것이라고 예상하기 때문에 여기서는 생략하겠습니다.

방문자 수 표시 방법 변경

기초 템플릿의 사이드 바의 방문자수는 한 줄에 작성되어 있어 모양새가 좋도록 줄 바꿈이 필요하다는 생각이 들었습니다. 2줄로 나누어서 표시하였습니다.

방문자 표시 수정전

방문자 표시 수정 후

[수정전 - 기본 템플릿]

  Today:   Yesterday:   Total:  

[수정후 - 현재 버전]

  Total: Today:   Yesterday:                                

링크 메뉴 추가

기초 템플릿 제작자의 의도와 달리 저는 블로그를 허브처럼 사용할 수 있도록 링크를 사이드바에 추가하고자 하였습니다.

링크 영역 추기

스킨 편집창에서 Recent articles를 검색합니다. 해당 내용을 모두 선택 후, 복사합니다. 이것을 다시 Visit logs 항목 위에 붙여 넣습니다.

잘 붙여 넣어졌는지 확인하기 위해서 적용 후, 블로그로 돌아가 봅니다.

Recent articles 가 두 개 표시된다면 원하는 대로된 것입니다.

명칭을 변경합니다. Recent articles를 Links로 수정합니다.

[수정전 - 기본 템플릿]

<div class="card-header">
  Recent articles
</div>

[수정후 - 현재 버전]

<div class="card-header">
  <i class="fas fa-link"></i>&nbsp;Links
</div>

다음으로는 실제로 블로그 관리 메뉴에서 추가한 링크가 화면에 표시되도록 티스토리의 치환자([##xxx##] 형식의 단어들)를 적용하였습니다.

티스토리의 치환자 목록 및 사용방법은 가이드 | Tistory를 참고하였습니다.

[수정전 - 기본 템플릿]

<s_rctps_rep>
  <a href=""></a>
  <br/>
</s_rctps_rep>

[수정후 - 현재 버전]

<s_link_rep>
  <a href="" onclick="window.open(this.href); return false"></a>
  <br/>
</s_link_rep>

로 수정합니다.

참고 : onclick="window.open(this.href); return false"는 새창에서 링크를 여는 기능입니다.

사이드바에 대한 수정사항은 여기까지입니다. 스킨 수정 창에서 저장버튼을 누르고, 스킨이 블로그에 적용된 모습을 확인합니다.

최종 수정 결과