[블로그 꾸미기] 티스토리 방문자 그래프 플러그인 적용

이번 포스트는 티스토리 방문자 그래프 플러그인 적용 방법에 대해서 알아보도록 하자.

블로그를 운영/관리 하다보면 오늘 몇명이 방문했고 어제 몇명이 방문했는지 신경쓰기 마련이다.

하지만 매번 관리모드로 들어가 어떤 키워드로 몇번 들어왔는지 확인하기가 귀찮은일이다. 그래서 블로그를 운영하다 보면 카운트도 중요하지만 그래프로 일주일 간의 그래프를 보여주고 있다.

이는 티스토리(tistory) 에서도 플러그인(모듈) 형태로 제공하고 있어 편리하게 적용하기 쉽도록 되어 있다.

해당 플러그인을 이용해 내 블로그에 기본적으로 제공되는 카운트 형태가 아닌 그래프 형태로 제공해보고자 한다.

1. 현재

티스토리에 방문자 카운트는 기본적으로 토탈, 오늘, 어제 기준으로 표시가 되어 있다.

하지만 위에서도 언급했듯이 주간 형태의 그래프로 표시하길 원하는 사용자 및 요구사항이 있다. 그렇다면 이를 어떻게 설정해야 하는지 알아보도록 하자.

가. 플러그인 설정

관리자 모드로 접속하면 왼쪽 메뉴에 "플러그인 설정" 이 존재한다. 

이를 선택하여 "방문자 통계 그래프" 를 클릭하면 위 캡쳐된 이미지와 같이 나타나게 된다. 이 상태에서 "저장" 버튼을 누르면 이제 해당 플러그인을 사용할 수 있는 환경이 된다.

나. 사이드바 위치 적용

왼쪽 상단에 보면 "방문자 그래프" 가 있고  "+" 버튼도 함께 존재한다. "+" 버튼을 클릭하여 추가하거나 Drag & Drop 을 이용해 자신이 원하는 위치에 끌어 놓으면 된다.

본인은 하단에 위치할 수 있도록 하단 기본 카운터 상단에 위치시켜 기본으로 나타나는 토탈, 오늘, 어제 카운터와 함께 보일 수 있도록 위치시켰다. 설정이 완료되었다면 상단에 "저장" 버튼을 클릭하여 상태를 저장한다.

다. 확인

이제 설정을 마무리 했으니 내 블로그에서 어떤 모습으로 내가 원하는 형태로 나오는지 확인해 볼 차례이다.

아직 방문자 수가 많지 않아 부끄럽긴 하지만 공개!!

자 공개된 방문자 그래프가 맘에 드는가?? 사이드바 메뉴를 기준으로 너무 오른쪽으로 치우쳐져 있기 때문에 마음에 들지 않는다. 사실 좀 맘에 들지 않는다. 그래서 어떻게 위치를 변경할 수 있을까 고민을 하였고 HTML/CSS 편집 모드로 열심히 고민해보기 시작했다. 하지만... 이것은 쉽지가 않다. 이유는 나. 에서도 본것과 같이 Drag&Drop 을 통해 정의되어 있기 때문에 이는 템플릿 형태로 반영이 되어 있으리라 추측하는 바이다.

그럼 어떻게 해야 하는가?? 방법이 없을까?? 많은 고민을 해보았지만 포기할 내가 아니니 더 찾아보기로 했고 방법을 찾아냈다!!

2.개선

따로 사이드바 플러그인 설정 화면이 아닌 "HTML/CSS 편집" 영역에서 변경하려고 한다.

그렇다면 어떻게 변경해야 하는지 잘~~~ 따라와 보시길.

제일 먼저 본문 상단에 보면 캡쳐된 내용중 "스킨치환자" 라는 설명을 확인할 수 있다. 그 옆에 보면 값은  으로 되어 있는것을 확인 할 수 있다.

해당 값을 이용하여 HTML/CSS 편집에서 적용해볼 것이다.

<s_sidebar_element> ~ </s_sidebar_element> 는 사이드바의 엘리먼트 임을 의미한다.

즉, 중간에 표시되어 있는 <s_sidebar_element> 태그 사이에 스킨치환자를 넣은것이다.

그렇다면 어떻게 보여지는가?? 기존과 달라진것은 없다.

내가 하고자 했던것은 위치가 이상했기에 이것을 조절하고 싶은 요구에 의해 시작하게 되었다.

즉, 방문자 그래프의 위치를 왼쪽으로 좀 이동시켜주길 원하는것이다.

그렇다면 다음과 같이 수정해보자.

위 마크업은 기본 CSS 를 어느정도 이해하는 사용자라면 쉽게 적용 가능하다.

상단, 오른쪽은 0px , 하단, 왼쪽은 각각 15px, -9px 정도 여백을 주겠다는 내용이다.

이제 화면에 어떻게 나타나는지 확인해 보자.

pixel 단위로 확인해본것은 아니지만 아까와 치우친 상태가 다르다는것을 확인할 수 있었다.

완성!!!!!!!!!

이 아니다..

사이드바 메뉴에 들어가보면 아래와 같이 "(이름 없음 1)" 이라는 메뉴가 추가가 된것이다.

추후 이것이 뭐지?? 라는 생각을 하지 말고 다음과 같이 수정해보길 바란다.

나는 "개인 방문자 그래프 모듈" 이라는 주석을 추가하였다.

그렇다면 다시 사이드바 메뉴에 들어가보면 어떻게 변했는지 확인해보자.

추가한 주석과 같이 "개인 방문자 그래프 모듈" 이라는 텍스트가 추가가 된것을 확인할 수 있다.

이와 같이 HTML/CSS 편집 메뉴를 통해 많은것을 바꾸고 적용할 수 있음을 알 수 있었다.

이상 티스토리(tistory) 방문자 그래프 플러그인 적용 방법을 마치겠습니다.