본문 바로가기

IT.컴퓨터.인터넷.취미/블로그 팁 & 스킨배포

티스토리 블로그 방문자 그래프를 깔끔하게 바꿔볼까요?

<블로그팁: 테이블 태그를 이용한 방문자 그래프 깔끔하게 꾸미는 방법>

가끔 가뭄에 콩나듯이 테이블에 대한 포스팅을 몇번에 걸쳐서 했었습니다.
아주 간단한 내용만 설명을 했었고 아직도 설명할 부분은 많은데 좀처럼 글을 쓰지 못하고 있네요...^^;;
테이블에 대한 포스팅은 세번밖에 못했네요...


그리고 중간 중간 테이블을 사용해서 광고, 플러그인 등을 정리하는 방법에 대해서도 종종 포스팅을 했었답니다.


잘 둘러보시면 제 블로그에는 테이블을 사용해서 정리한 부분이 상당히 많이 있답니다.
사이드바에도 몇개가 보이구요. 타이틀, 본문영역, 플로팅버튼 등 아직도 소개하지 않은 부분들이 있는데요.

오늘은 그 중 한가지 방법을 소개하려고 합니다.



포스팅을 준비하게 된 계기

대략 일주일 가까운 시간동안 블로그에 몇개의 포스팅만 하고 이웃분들의 블로그에는 대부분 들르지 못하고 조금은 바쁘게 한주를 보냈답니다. 그리고 오늘 몇몇분의 이웃분들에게 인사를 드렸구요.
그 이웃분 중에 한분이 좀 삐지셨더군요.... 제가 달아놓은 댓글에 쪼끔 오해를 하시는 바람에...ㅋㅋㅋ

그리고는 제 블로그에 이렇게 댓글을 달아놓으셨더군요...


앗!! 필명을 모.자.이.크. 해야하는데..... 일.부.러. 안했습니다.
서로 가끔씩 장난을 주고 받곤 한답니다... 프렌즈님은 이런 글로 또 삐지실 분이 아니죠....ㅎㅎ


댓글에서 보이듯이 방문자 그래프에 관심을 보이셔서 속시원히 알려드리기 위해 포스팅을 결심했답니다.

 

바로 위에 보이는 이 녀석 말입니다.

많은 분이 관심을 가진 것은 아니겠지만 제 글은 소수가 원하는... 아니 한사람이라도 원하는 글이라면 괜찮습니다.



방문자 그래프 플러그인 설정

방문자 그래프를 표시하기 위해서는 가장 먼저 플러그인 설정이 필요합니다.

플러그인 설정은 관리페이지에서 할 수 있구요. 이 플러그인을 활성화 시키는게 가장 먼저 해야 할 일입니다.


그 다음 사이드바 설정으로 이동하면 위와 같이 방문자 그래프 모듈이 추가된 것을 볼 수 있습니다.
이 모듈을 사이드바의 적당한 위치에 넣어주시면 되는데요. 방법은 아래 포스트를 참고하시면 됩니다.

티스토리 블로그 스킨 설명 - 3. 사이드바 모듈 뜯어보기


그래프를 사이드바에 적용한 모습입니다.
방문자 카운터와 배너링크 사이에 넣었는데요. 뭔가 조잡한 느낌이 듭니다.

하지만 이게 끝입니다. 더 뭘 어찌 할 방법이 없습니다.
방문자 그래프 자체가 치환자로 되어있고 모듈 자체를 수정할 방법이 없더라구요.


저도 이렇게 넣었다 뺐다 하면서 한동안 그래프를 사용하지 않고 있었습니다.
그러다 이리저리 고민을 하다가 약간의 팁을 알아낼 수 있었습니다.


그리고 그 방법대로 얼마전부터 블로그에 적용하고 있었습니다.

위는 기본제공되는 플러그인을 추가한 것이고 아래는 제가 나름 수정한 모듈입니다.



방문자 그래프 손보기

이리저리 고민하고 여러가지로 수정을 해봤지만 방법상의 한계는 있었습니다.
그래도 원하시는 분들을 위해 공개를 해보겠습니다.

우선 치환자로 추가된 모듈을 사용하는 것이 아니라 html태그를 이용해야 하기 때문에 html배너를 하나 추가합니다.


html배너는 위와 같은 화면으로 되어있구요. 사이드바 설정에서 나타나는 이름과 아래부분에 소스를 넣게 되어 있습니다.


이게 html배너에 들어갈 내용입니다. 테이블을 이용했구요. 그래프를 나타나게 하는 것은 치환자가 아니기 때문에 아래의 설명을 자세히 보셔야 설정 할 수 있습니다.




방문자 그래프를 구현하기 위한 소스

위와 같은 소스가 들어가게 되는데요. 위에 보이는 6자리숫자 라고 표기한 부분은 블로그마다 다르기 때문에 그에 맞는 숫자를 넣어주셔야 합니다. 각각의 블로그마다 다른 숫자로 블로그ID라고 생각하시면 됩니다.

우선 아래의 텍스트 파일을 다운 받으신 후 어떻게 수정하는지 계속해서 설명드릴게요.


소스 설명

1행 Blog Visitors 방문자 그래프의 이름을 사이드바 모듈과 같은 폰트로 표시
2행 테이블 정렬과 상단 여백지정
3행 셀 테두리와 내부 여백지정
4,5행 그래프 관련 소스


우선 관리페이지 HTML/CSS로 이동한 후 파일업로드 탭을 클릭하시면 위와 같은 화면을 볼 수 있습니다.
업로드 된 파일중 아무 파일이나 마우스 오른쪽 클릭을 하시고 속성을 클릭하시면 파일의 주소를 볼 수 있는데요.


위와 같이 파일 주소를 볼 수 있는 속성창이 뜨게 됩니다.
위에 표시한 부분처럼 blog/2자리 숫자/6자리 숫자/ 의 형식으로 주소가 표시되는데요.

어디의 숫자를 복사하면 되는지 아시겠죠?



소스를 완성하고 모듈을 저장한 후 미리보기로 먼저 확인을 하시고 이상이 없다면 저장을 하셔야 비로소 적용된다는거 잊지 마세요.

이제까지 방문자 그래프를 완벽하게는 아니지만 조금이나마 원하는대로 수정하는 방법에 대해 알아봤습니다.
어쩌면 별 쓸데없는 팁일 수도 있지만 초반에 언급했듯이 단 한사람이라도 원한다면 그걸로 만족합니다.^^