티스토리에 XE플래시 카운터 달기 (전체방문자 이전 기능)

티스토리에 XE플래시 카운터 달기 (전체방문자 이전 기능)
기존 텍스타일 서비스인 토트에서 티스토리로 이전하며 이것저것 바꿀 수 있는 재미가 있는 요즘.
기존 카운터가 사용하고 싶었지만 티스토리 자체 카운터는 역시 별로 인 듯해서
부족한 실력에 고민하다 하나 만들어봤네요.
플래시는 XE의 카운터 플래시를 사용했으며 텍스타일등에서도 사용하는 기본 카운터 이기도 하다.

티스토리에 XE플래시 카운터 달기 (전체방문자 이전 기능)

처음엔 플래시 파일 스킨에 업로드하고 위의 태그 하나 넣으면 끝 날줄 알았다.
보통 카운터류의 플래시는 카운터 값만 변수로 넣어주면 작동한다.
하지만 여기가 삽질의 시작일줄 미쳐 몰랐다.

당장 위와 같이 작동시킨다면 새로 만든 블로그는 정상 작동할 것이다.
하지만 문제는 1000카운터 이상부터 발생한다.
기존 블로그에선 하루에도 많으면 천명이상 카운터가 있었고 실제 적용하니 정상 작동하는 줄 알았다.
몇일 지나 천명을 넘기니 문제가 발생했다.


티스토리에 XE플래시 카운터 달기 (전체방문자 이전 기능)

실제 카운터 파일을 onpc_counter.swf?n=123,456,7890로 테스트해보면
위와 같이 1~0까지 잘 표시된다.
하지만 티스토리의 카운터 치환자는 php의 number_format($count) 처럼 작동한다.
그래서 제일 뒤 전체 카운터의 값이 7890이 아닌 7,890으로 변환된다.
php만해본 필자는 티스토리에서 php만 지원된다면 몇 줄의 코드만 넣어 변환하면 끝이겠지만

서비스행태의 블로그에서 지원 할리 없으니 삽질을 많이 했다. ㅜㅜ (설치형 블로그에선 가능하다.)
초보의 한계라고도 볼 수 있겠다. 뭐~ 시간이 흘러 처음해보는 자바 스크립터를 이용해서 변환에 성공했다.

이제 초보가 만들었지만 초보도 이용 가능한 XE 플래시 적용하기를 해보자!!
(참고로 자바 스크립터는 처음 만져봐서 효율적이진 않을 것이다. 그래도 작동엔 문제가 없으니 넘어가자)

티스토리에 XE플래시 카운터 달기 (전체방문자 이전 기능)

래의 첨부파일 2개를 받으면 onpc_html.txt라는 파일이 있다.
이것을 메모장 등으로 열고 복사를 해두자.

그리고 한가지 팁!!
11번째줄 ctc = ccnt * 1 + 0 ; 여기의 마지막 숫자0을 다른 수로 바꾸면
전체 카운터 값에서 증가시킬 수 있다.
실제 통계치 + 임의의 숫자 값이 표시된다.
블로그 이전으로 기존 전체 카운터 추가시에 사용하면 될듯하다.

전체 카운터가 보이는 것만 오르는 거라 통계자체가 오르지는 않는다.


티스토리에 XE플래시 카운터 달기 (전체방문자 이전 기능)

자신의 티스토리 블로그에 접속 후 1~4번 순서로 클릭 후~
onpc_count.swf 파일을 업로드하자! (첨부파일은 아래에 있다)


티스토리에 XE플래시 카운터 달기 (전체방문자 이전 기능)

업로드가 완료되면 html/css 편집기로 가서 좀 전 복사해둔 소스를 넣기만 하면 된다.
1,2번으로 가서 #과 #사이에 @소스파일을 붙여넣기 하면 됨
아래에 저장 버튼을 눌러 저장하면 완료!!

참!! 소스를 넣기 전에 사이드바에서 카운터 모듈을 켜 놔야 한다.

소스를 넣을 위치 찾는 방법!!

Ctrl + F키를 눌러 현재 웹페이지의 특정 단어를 쉽게 찾을 수 있다.


티스토리에 XE플래시 카운터 달기 (전체방문자 이전 기능)

일단 카운터로 검색하자
카운터 모듈이 나오면 성공!
스킨마다 틀리겠지만 만약 카운터로 안 나온다면


티스토리에 XE플래시 카운터 달기 (전체방문자 이전 기능)

##_count_total_##으로 찾아보자.

모두 끝났다 이제 블로그 메인으로 가보자~

티스토리에 XE플래시 카운터 달기 (전체방문자 이전 기능)

사이드바에 위 처럼 플래시로 된 카운터가 생겼을 것이다.
적용 방법은 쉬우나 삽질한다고 고생 좀 했다.
물론 자바 스크립터를 잘 다룰 줄 안다면 1분도 안 걸렸을 것이다. ㅜㅜ

참고!!


티스토리에 XE플래시 카운터 달기 (전체방문자 이전 기능)

사이드바 설정에서 HTML 배너 출력 기능으로 하면 삭제 수정이 편하겠지만…
위처럼 사이드바에서 추가하면 플래시가 작동 안 한다.
적확하게는 플래시는 뜨나 카운터 수자를 불러올 치환자가 사이드바 HTML로는 못 불러오는 듯하다.
그냥 위 방법 대로 HTML/CSS편집으로 해결하면 된다.
그래도 규격을 지켜서 인지 끝나고 난 후 사이드바 꾸미기에 가보면 (이름없음1)으로 나온다.
삭제나 이동은 자유롭게 할 수 있다.


onpc_html.txt파일과 onpc_counter.swf파일 2개이며
zip압축과 자동압축풀림 두개 준비했다. (7z사용)
그냥 텍스트 파일과 플래시 파일을 올리려는 티스토리에선 플래시가 첨부파일이 아닌 플래시 작동으로 붙어버려 압축해서 올립니다.
귀찮으셔도 압축 풀어 사용하세요~

추가사항!!!!
최신 크롬, 파이어폭스에서 플래시 표시 문제가 있네요.
다운 받으신 파일 적용하실 때 아래 코드 추가 해주시면 됩니다.
type=’application/x-shockwave-flash’ wmode=’transparent’ 
플래시파일이라는 표시와 배경화면 투명하게 해주는 추가 코드입니다.
위치는 embed과 src사이에 넣어 주시면 됩니다.

 파일에 수정해서 새로 올립니다.  파일명2012 붙은 게 수정버전이에요.

 
다운로드
 
다운로드

카운터가 많을 경우 잘리는 경우가 있네요. width값을 늘려서 어느정도는 가능하지만
몇 천만 단위에서는 정렬 문제로 카운터 숫자가 가려지네요.
그래서 편법으로 카운터를 두줄로 만들어봤어요. 프렌즈님의 제보로 알게 되었고요. 두줄이지만 적용 가능합니다.

 
다운로드

사이드바에 들어갈 태그만 위 파일로 수정하시면 됩니다.

 
다운로드

기존 플래시 카운터에서 심플하게 플래시나 이미지를 사용하지 않는 카운터 버전을 추가합니다.
플래시 지원 아래 표시가 안되던 iOS 등의 모바일 기기에서도 출력이 가능합니다.
디자인도 비슷하게 적용해봤지만 폰트문제로 조금은 차이가 납니다. 블로그에 맞는 버전 둘 중에 하나 골라 사용하세요.
(2012.03 추가)

티스토리에 XE플래시 카운터 달기 (전체방문자 이전 기능)
티스토리에 XE플래시 카운터 달기 (전체방문자 이전 기능)

Comments

No comments yet. Why don’t you start the discussion?

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다