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

티스토리 #2스킨은 가장 많이사용하는 스킨 중 하나입니다.

하지만 기본스킨을 사용하기에는 너무 매력없다고 생각이 드는데, 오늘은 PC화면 좌측에 방문자수가 표시되게 하는 방법을 알려드리려고 합니다. 기본스킨에는 로고 아래에 닉네임만 표시되어 있었습니다. 이렇게 치환자를 이용하여 추가를 하면 깔끔한 스킨이 완성됩니다.

티스토리 반응형#2스킨에 글목록/방명록/이웃추가 넣기

이렇게 방문자수가 나타나게 추가를 하는 방법을 알려드리겠습니다.

추가하는 방법

티스토리 방문자수 추가.txt

먼저 순서는 1. HTML상에 소스를 넣기 2. CSS에 스타일속성을 추가하기 입니다. 위에 소스파일을 올려두었으니 다운받으시면됩니다. 

먼저, HTML에서 txt_profile을 찾아주세요. 위치를 찾기 어렵다 하시는 분들은 ctrl+f를 누르시고 프로필사진을 검색 해 주시면 됩니다.

<div class="top_visitor">

           Today:&nbsp;&nbsp;&nbsp;&nbsp;

           Yesterday:&nbsp;&nbsp;&nbsp;&nbsp;

           Total:

</div>

위와 같은 위치에 1번 서식을 삽입해주세요.

두번째로, CSS를 수정 해야합니다.

#2를 설정하신 분들은 footer을 검색해주시면 위와같은 위치로 이동하게 됩니다.

적당한 위치에 2번 코드를 삽입합니다.

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

여기까지 하시면, PC화면 상에 방문자수가 나타나게 됩니다.

하지만 여기가 끝이 아닙니다. 모바일에서 나타나지 않게 설정하는 것이 좋습니다.

저는 스킨 색이 어두운색이다 보니 글씨색은 흰색으로 설정을 하였습니다.

색을 다른것으로 바꾸시려면 color 뒤에 색을 색상표를 참고하셔서 원하는 색을 넣으시면 적용이 됩니다.

삽입하는 위치를 쉽게 설명 해 드리자면, #2스킨을 적용하신 분들이라면 스킨을 검색하시면 

@media

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

라는 부분이 보입니다.

간단히 설명드리자면 좌우폭 738px보다 작은 화면일 경우 아래 적히 속성들이 적용된다라는 뜻입니다.

이 아래에 3번 코드를 삽입합니다.

 .top_visitor {display:none}

여기까지 했으면, PC화면에는 나타나고 모바일에서는 나타나지 않는 방문자수가 삽입이 완료 됩니다.

공감(♡)과 댓글은 큰 힘이 됩니다.

BY. 별블리