티스토리 반응형스킨 #2 모바일 화면에 방문자수 표시하기

 오래전에 추가한다 해놓고 크게 쓰임이 있지 않아서 생략했던 내용인데, 댓글로 요청해주신 분이 계셔서 간단히 적어봅니다.

 

블로그를 하다보면 어쩔 수 없이 방문자수를 계속 지켜보게되더라고요. 다른 블로거님들도 마찬가지일거라 생각됩니다. 물론 크게 신경쓰지 않는 블로거들도 분명 있을테지만요~

 

반응형 스킨#2의 경우 모바일버전에서는 표시가 되지 않습니다. 그래서 별도의 특별한 디자인은 하진 않고, 치환자를 적당한 위치에 위치시켜서 추가해봤습니다.

 

 

 

 

방법은 매우 간단합니다. 일단 아래 사진을 참고해주세요~

 

 

위와 같이 HTML상에 티스토리 방문자 치환자를 추가해줍니다.

 

<div class="m_visitor">
Today : <br />Yesterday : <br />Total :
</div>

 

순서대로 오늘, 어제, 총 방문자를 나타내는 치환자입니다.

그런 다음, 이제는 CSS상에서 class="m_visitor"의 위치와 표시를 어떻게 할지를 지정해주면 됩니다.

 

설명에 앞서, 알아두셔야할 건 반응형이라서, 화면별로 설정을 해줘야하는데, 브라우저의 사이즈별로 세가지로 나뉩니다. PC상에서 브라우저의 좌우폭을 조정해가면 화면을 확인해보시면 알 수 있을겁니다. 쉽게 설명을 드리자면, 가장 큰 화면일때, 중간화면일때, 모바일화면처럼 작을때...

 

우선, 화면이 가장 큰 경우와 중간화면일때에는 나타나면 안되겠죠? (사실, 방문자수가 이미 표시가 되어있으니)

 

 

위와 같이 위 쪽 줄 부분 적당한 곳에 아래 소스를 추가해줍니다.

 

/* visitor */
.m_visitor {display:none}

 

.m_visitor를 보이지 않게 하란 뜻이예요~

 

이렇게되면 세가지 사이즈 모두 나타나지 않게 됩니다.

 

 

 

 

근데 모바일화면(작은사이즈)에서는 표시가 되어야하니 보이게하는 소스를 넣을 위치를 찾아봅니다. 위의 줄 근처가면

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

가 보일겁니다. 화면이 738px 이하일때는 { }의 스타일대로 표현하란 뜻입니다.

 

 

 

 

 

위치는 적당한 곳에 위에서 말한 { }이면 어디든 상관이 없습니다. 아래의 소스를 넣습니다.

 .m_visitor {display:block;position:fixed;right:20px;bottom:60px;text-align:right;font-size:12px}

위치와 폰트는 제가 적당히 잡아봤습니다. 수정도 가능하니 조금씩 고쳐가며 확인해보시면 되겠습니다~^^

 

 

참고로, 아래로 쭉 내려가시면 중간사이즈를 표현하는 곳도 있는데 그 곳에는 굳이 추가하지 않아도 됩니다. 맨 위에서 이미 모두 보이지 말라고 해뒀으니까요~, 즉, 3가지 사이즈 모두 보이지 말라고 하고 나서, 예외로 작은 사이즈 모바일화면에서는 보여라라고 한 것입니다. 요것만 항상 생각해두면 화면별로 다른 요소들을 추가/삭제할때 의외로 쉽습니다.

 

 

 

첨부내용 : 문의 주신 분이 계셔서 내용을 추가합니다.

글목록/방명록/이웃추가 하는 방법

 

제 블로그의 좌측 혹은 상단메인배너쪽에 보시면

글목록/방명록/이웃추가라는메뉴가 추가되어있을텐데요.

해당 위치에 붙이는 법입니다.

 

저의 HTML기준으로 56번째줄 근처에 보시면 아래와 같이 프로필 사진표시되는 부분이 있습니다.

<span class="thumb_profile">
       <img src="https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png" class="img_profile" alt="프로필사진">
</span>

 

위 부분 아래에 밑의 소스를 붙여넣으시면 됩니다.

<span class="txt_profile">
       <a href="본인블로그주소" title="블로그홈">글목록</a><span class="txt_bar"></span>
       <a href="https://budlike.tistory.com/guestbook" title="방명록">방명록</a><span class="txt_bar"></span>
       <a href="#" title="티스토리친구하기" onclick="window.open('toolbar/popup/link','','width=500,height=520');">이웃추가</a>
</span>

 

도움이 되셨을지 모르겠네요.

 

 

 

 

도움되셨다면~ 아래 하트버튼 꾸욱~!~^^