네이버&티스토리 블로그 실시간 접속자(방문자)수 위젯 : Who's.amung.us
안녕하세요. 오늘은 쉽고 간편하게 실시간으로 자신의 블로그 접속자 혹은 방문자 수를 확인하는 방법에 대해 알려 드리도록 하겠습니다. 바로 위젯을 설치해 실시간 접속자를 확인하는 방법인데요. 많이들 보셨을 것 같습니다. 네이버에서는 HTML 기능의 많은 부분들을 막아놓았기에 아무래도 고전 위젯으로 많이 보셨을 것 같은데요. 티스토리는 좀 더 개방적인 블로그이기에 다양한 위젯을 사용할 수 있습니다. 일단 Who's.amung.us에 접속을 해야겠죠?
Who's.amung.us : http://whos.amung.us/showcase/
접속을 하게 되면, 고전 위젯부터 시작해서 색깔, 작은, 탭, 지도 위젯 등으로 다양하게 구성돼 있습니다. 일반적으로 네이버 블로그에서는 고전 위젯을 사용할 수 있으며, 티스토리는 좀 더 확장성 있게 다양한 위젯을 사용해 볼 수 있습니다. 저는 티스토리에서는 색깔 위젯을 사용하기로 했습니다. 네이버 블로그에는 고전 위젯을 현재 사용중입니다.
자신의 위젯 소스 코드는 간단합니다. 접속했을 때 보이는 "귀하의 사이트에 이 코드를 복사" 밑에 있는 소스 코드가 바로 네이버&티스토리 블로그의 실시간 접속자(방문자)수를 확인할 수 있는 위젯 코드입니다.
저는 색깔 위젯을 선택해 티스토리 블로그 HTML/CSS 코드에서 위젯 코드가 나열된 곳에 붙여 넣기를 진행했는데요. 소스를 한 번 보실까요? 소스는 아래와 같습니다.
-티스토리 실시간 접속자 수 위젯 설정법-
<!-- 현재 방문자 수 체크 위젯 -->
<div align="center"> <script id="_waupfr">var _wau = _wau || [];
_wau.push(["colored", "사이트 코드 입력란", "pfr", "ffc20e000000"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/colored.js";
document.getElementsByTagName("head")[0].appendChild(s);
})(); </script></div>
</s_sidebar_element>
실질적인 코드를 복사하면, 위에 파란색 부분을 제외한 코드를 제공 받아 보실 수 있습니다. 제가 빨간 표시로 "사이트 코드 입력란"이라고 써둔 부분은 개인의 사이트 코드입니다. 접속하시면 받아보실 수 있죠. 대략적으로 "1wdn3swk29" 이런 식으로 이상한 영어가 적혀 있습니다. 이게 코드에요.
추가적으로 제가 삽입한 코드 <s_sidebar_element>는 위젯으로 설정한다는 의미이며, <div align="Center"></div> 코드는 가운데 정렬을 한다는 의미입니다. 참고하시기 바랍니다.
- 네이버 블로그 실시간 방문자 수 위젯 설정법-
<center><font face="돋움" color="#ffffff" size="3"><b>
실시간 방문자 조회</b></font><center><font face="돋움" color="#ffffff" size="4">
<a target="_blank" target="blank" href=http://whos.amung.us/stats/사이트 코드 입력란">
<img src="http://whos.amung.us/widget/사이트 코드 입력란.png" alt="website counter" width="81" height="29" /></a>
</font></center>
<font face="돋움" color="#ffffff" size="3"><b>
</b></font></center>
네이버의 경우 <Script> 코드를 위젯으로 인식하지 못하기에 위와 같이 다른 형식의 코드로 변환해주어야 합니다. 위에 "실시간 방문자 조회"라는 문구는 소개형식의 문구로 지우셔도 되며, 그냥 두셔도 됩니다. 또한 글씨체 역시 검색을 통해 변경이 가능합니다. 컬러 역시 코드를 변경하면 변경이 가능하며, 사이즈도 수정가능하니 참고하시기 바랍니다.
중요한 부분은 바로 아래의 <a target> 이후 코드입니다. 이게 실질적인 네이버 블로그 실시간 방문자수 위젯 코드입니다. 확인 후에 제대로 입력해주시면 됩니다. 사이트 코드 입력란은 기존에 티스토리 코드 위젯 설명 법에서 소개해드렸듯 코드만 입력해 붙여 주시면 됩니다. 어렵지 않죠?
이 코드는 바로 네이버 "+위젯 직접 등록 BETA"에 넣어 주면 제 기능을 하게 됩니다. 제가 공유하는 위젯 설정 소스는 현재 제가 네이버 블로그에서 사용 중인 코드입니다. 어떤 느낌인지는 제 네이버 블로그에 달려 있는 실시간 접속자 수 위젯을 확인해 보시면 와닿을 것 같습니다.
박스군 Blog : http://parksmiley.blog.me
티스토리는 <s_sidebar_element>를 통해서 위젯으로 설정해 관리자에 있는 사이드바를 통해 쉽게 위젯으로 사용이 가능합니다. 기존에 바로 HTML을 통해 위젯이 생성되었지만, 티스토리의 변화로 HTML/CSS에 직접 입력한 후에 위와 같이 위젯 설정을 진행해주셔야 합니다. 조금 복잡해지긴 했지만, 큰 틀은 변화 없으니 어렵지 않게 설정하실 수 있을 것 같군요. 가볍게 설정을 한 후에 위젯 위치만 설정해주면, 위와 같이 깔끔한 블로그 실시간 접속자(방문자)수 위젯 세팅이 완료됩니다. 어렵지 않죠? 간단하게 따라 할 수 있는 위젯 세팅법입니다.
'박스군 TISTORY > 블로그 관리' 카테고리의 다른 글
| 구글 애드센스(Google Adsense) 지급 보류 : 지급 설정 - 결제 수단 추가 (3) | 2016.07.07 |
|---|---|
| 구글 애드센스(Google AdSense) PIN 번호 발급 : 주소 인증 완료! (1) | 2016.06.29 |
| 유튜브 구독자 늘리기 : 유튜브 구독 버튼(YouTube Subscribe) 만드는 법 (2) | 2016.06.22 |
| 블로그 수익내기 : 구글 애드센스 용어 정리(예상 수입, 페이지뷰, 노출수, 클릭수, RPM) (2) | 2016.06.20 |
| 네이버 검색에 블로그 명으로만 노출이 된다면? 해결책은 오픈그래프! (0) | 2016.06.19 |
댓글