티스토리 반응형 스킨 #2 PC화면좌측 방문수 추가하기

 

어느 분의 요청으로

블로그 좌측화면에 방문수추가하는 방법을

간단히 적어보겠습니다.

 

 

제 블로그를 기준으로 위와 같이

PC화면(넓은화면)에서

오늘 방문자, 어제 방문자, 총 방문자 수를

표시하는 방법입니다.

* 기본 스킨과는 조금 다른 부분이 있을 수 있습니다.

 

방법은

1. HTML상에 소스를 넣기

2. CSS에 스타일속성을 추가하기

순 입니다.

 

 

첫번째,

HTML상에 좌측 붙이고자 하는 부분을 찾아

소스를 넣습니다.

 

 

      <div class="top_visitor">
           Today:&nbsp;&nbsp;&nbsp;&nbsp;
           Yesterday:&nbsp;&nbsp;&nbsp;&nbsp;
           Total:
      </div>

 

 

는 아시겠지만

티스토리에서 제공하는 치환자입니다.

즉, 이 부분이 알아서 방문자수가 표시되는 부분입니다.

 

HTML 상의 위치는 제블로그 기준이기 때문에

따라하시는 분은 기존 소스를 참고해서

적당한 곳에 붙여주세요. 대략 저 위에 표시된대로

74줄 근처일거라고 생각됩니다.

* 붙여보시고 여러번 바꿔보시며 찾아보셔도 됩니다.

 

 

 

HTML상에 소스를 붙였다면

다음은 위와 같이 CSS를 추가하는 겁니다.

 

위에 표시된 165줄근처에 아무곳이나 넣으면 됩니다.

 

.top_visitor {margin-top:0px;font-size:12px; color:#a7a7a7}

역시나 제 블로그 기준이기때문에

본인 CSS파일에 맞게 적당한 곳에 넣으셔도 적용이 됩니다.

 

* CSS를 잘 모르시는 분은 가급적 아래쪽 혹은 끝 줄 쪽에는 적지마세요.

이유는 화면별로 CSS속성이 적용되는 부분이 적용이 되어있어서

반영이 되지 않을 수 있습니다.

 

여기까지하면 PC화면일 경우, 방문자수가 표시되게 됩니다.

 

 

그런 다음 마지막으로 한가지 추가작업,

모바일 화면에서는 방문자수 표시하는 부분이 다를 수 있기 때문에

보이지 않게 해야합니다.

 

방법은 바로 위의 이미지에 나타난 속성처럼

@media
only screen and (max-width:738px){

부분을 찾습니다.

간단히 설명드리자면 좌우폭 738px보다 작은 화면일 경우

아래 적히 속성들이 적용된다라는 뜻입니다.

 

 

 

위와 같이

그 아래 적당한 줄에

 .top_visitor {display:none}

를 추가합니다.

 

적용되었는지 확인해보시고,

혹 다르게 표현된다면 질문 남겨주십시오~~

급하게 내용을 적다보니

부족한 부분이 있을 수 있습니다.

 

요청하신 분 도움이 되었으면 좋겠네요~^^