Yesterday : 63
Total : 881,180
- 쿠팡파트너스
- 구글에드센스
- 애드핏
- 애드픽
- 달빛이비추는 금빛작업실
- #폰요리
- 생명유지필수영양소
- 코코소프트
- 재테크포럼
- 나라디자인
- 기면기의 기억을 걷는⋯
- Carbon Fiber Workroom
- 작은설탕
- 김장배추의 게임스토리
- 문또또 라이프
- 필로소피아트
- TakeALook
- 하포의블로그
- 주니엘의 라이프 스토리
- neverending
- NEOEARLY*
- 서기닷컴
- 나 혼자 중얼??
- 먹보a의 살찌는 블로그
- 블로그팩
- 내다보는 (창)
- 집사 강가이버
- JunToday.com
- Hi Hello, Daily
- 영웅엔진
- 사람의 향기
- READ!
- Half and Half
- 비행인생
- Urban Country Diary
- 푸우시로의 지식창고
- Never Ending Story
- 오다
- 꽃길만 걷자
- 실버스타그램
- 하이공도리
- MY FIRST REFRAIN
- 브로페's
- 지금, 당신은 행복합니까?
- JS Storage
- 여행지스크랩북
- 재무컨설턴트 이주호
- 미친듯이 만들어 재끼자.
- 마음의 평온
- Papa's Lab
- Almost nothing
- OK건설워커
- Enjoy the monent ~ Lao⋯
- Lifelog of Sol
- moviescale
- The Invincible Iron Man
- 도메인연결
호기심 가득! 모지모지!
티스토리 반응형스킨 #2 모바일 화면에 방문자수 표시하기 본문
오래전에 추가한다 해놓고 크게 쓰임이 있지 않아서 생략했던 내용인데, 댓글로 요청해주신 분이 계셔서 간단히 적어봅니다.
블로그를 하다보면 어쩔 수 없이 방문자수를 계속 지켜보게되더라고요. 다른 블로거님들도 마찬가지일거라 생각됩니다. 물론 크게 신경쓰지 않는 블로거들도 분명 있을테지만요~
반응형 스킨#2의 경우 모바일버전에서는 표시가 되지 않습니다. 그래서 별도의 특별한 디자인은 하진 않고, 치환자를 적당한 위치에 위치시켜서 추가해봤습니다.
방법은 매우 간단합니다. 일단 아래 사진을 참고해주세요~
위와 같이 HTML상에 티스토리 방문자 치환자를 추가해줍니다.
<div class="m_visitor">
Today : [##_count_today_##]<br />Yesterday : [##_count_yesterday_##]<br />Total : [##_count_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="[##_image_##]" class="img_profile" alt="프로필사진">
</span>
위 부분 아래에 밑의 소스를 붙여넣으시면 됩니다.
<span class="txt_profile">
<a href="본인블로그주소" title="블로그홈">글목록</a><span class="txt_bar"></span>
<a href="[##_guestbook_link_##]" title="방명록">방명록</a><span class="txt_bar"></span>
<a href="#" title="티스토리친구하기" onclick="window.open('[##_blog_##]toolbar/popup/link','','width=500,height=520');">이웃추가</a>
</span>
도움이 되셨을지 모르겠네요.
도움되셨다면~ 아래 하트버튼 꾸욱~!~^^
-
Paint Design_7 2016.04.28 23:34 신고 적어주셨네요?감사합니다~오전에 적용시켜야겠네요~ㅋㅋ
-
모지모지 2016.06.24 20:36 신고 일반 홈피는 따로 프로그램이 들어가야할겁니다. 방법은 잘 모르겠네요.^^
-
모지모지 2016.06.25 21:43 신고 티스토리에서 제공하는 치환자를 그냥 넣은거예요 요게 오늘 방문수죠 html상에 위치잡아 넣어주면 알아서 방문자수로 바뀌어서 나타납니다.
-
모지모지 2016.06.27 10:12 신고 아 제가 하나를 빠뜨리고 알려드렸었네요. 죄송~~~
목록에서 제가 말한 속성에다가 {}안에
border-radius:10px;과 함께 overflow:hidden을 넣어보세요.그러면 라운드처리될겁니다. -
ss솔 2016.08.02 11:42 신고 모지모지님! 반응형 2번스킨 설치하고 글 읽어보면서 열심히 고쳐봤어용 ^ㅇ^
근데 이거는 이상하게 적용이 잘 안되네요.... 왼쪽에 사이드라고 해야되나요? 배경이미지 뜨는 부분에 글목록/방명록/이웃추가부분 글씨 어떻게 하얗게 만들 수 있을까요?ㅠㅠ 개발자도구로 열심히 뒤져봐서 검은색을 흰색으로 바꿔봤더니 블로그 글 제목도 흰색으로 바껴서 바로 다시 돌려놨네요ㅋㅋㅋㅋㅋㅋㅋ
또 모지모지님 스킨은 모바일로 봐도 윗부분에 배경이미지가 뜨던데, 이거 방법 올려주실 생각은...없으신가요? +ㅇ+
옛날처럼 밀어주기 기능있음 커피 팍팍 쏴드리고싶네여..!! -
윈드송 2016.08.26 19:44 신고 많이 늦었지만 도움이 될까 싶어 댓글을 답니다. 모지모지님이 올려주신 소스 대신에 아래의 소스를 동일한 추가하고
먼저 모지모지님이 올려주신 소스에서 title="어쩌구저쩌구"라는 부분을 모두 class="link_profile"로 수정하세요.
그런 다음 CSS란으로 가서
65 ~ 66번 라인에 있는 .area_head .area_profile .txt_profile 다음에 아래 소스를 추가하고 저장하시면 됩니다.
.area_head .area_profile .link_profile{font-weight:200;font-size:12px;color:#fff;opacity:0.8;filter:alpha(Opacity=70)}
.area_head .area_profile .link_profile:hover{text-decoration:none}
참고로 소스에서 각자가 뜻하는 바도 적어놓겠습니다.
font-weight:폰트굵기
font-size:폰트사이즈
color:폰트색깔
opacity:폰트투명도
hover{text-decoration:none}:마우스를 올리면 반응하는 텍스트에 효과 유무를 결정
none은 효과 비적용입니다만 underline으로 치환하면 마우스를 올릴 경우 밑줄이 쳐지게 됩니다 -
주니엘 2016.09.26 11:44 신고 모지모지님 항상 글 잘보고갑니다!
혹시 왼쪽에 투데이, 예스터데이, 토탈 나오게끔 하는 방법도 알려주실 수 있나요?! -
주니엘 2016.09.26 11:48 신고 그리고 글목록/방명록/이웃추가 하니
디폴트 색상이 회색인데 흰색이나 다른색으로 변경은 힘든가요? -
모지모지 2016.09.26 17:03 신고 티스토리 치환자라는게 있습니다.
Today:
Yesterday:
Total:
요걸 HTML상에 넣으시면 되고요.
자세한건 아마 검색해보시면 많은 관련글을 찾으실 수 있을거에요~^^ -
모지모지 2016.09.26 17:05 신고 글자색은 제 블로그를 기준으로 했을때...
.area_head .area_profile .txt_profile a {}속성에 적용이 되어 있네요.
CSS파일에서 찾아보시면 color지정되어 있을겁니다. -
모지모지 2016.09.27 09:25 신고 님 블로그를 보니까 stlye.css의 14번째줄 a()속성에 color:#333이 지정이 되어있네요. 추가하신거같은데...이게 전체 링크텍스트에 적용되는거라서 따로 지정하는 방법을 쓰셔야하는데...
.area_head .area_profile .txt_profile a {color:#fff}를 그 아래줄에 추가한번 해보세요. -
주니엘 2016.09.27 13:33 신고 오오오 됐어요!!! 오왕ㅋㅋ감사해요!!
-
주니엘 2016.09.27 13:27 신고 모지모지님 정말 감사합니다!!!
-
모지모지 2016.09.30 11:07 신고 HTML 및 CSS편집에 관심있으시다면...http://www.mojimoji.co.kr/594 요글도 참고하시면 많은 도움이 되실겁니다.
-
주니엘 2016.09.30 12:41 신고 감사합니다!! 참고하겠습니다! (__)
-
소피아친구 2016.11.23 14:30 신고 모지모지님.
메인화면 글목록/방명록/이웃추가 이건 어떻게 하는 건가요?
다른 분거 있길래 따라 해봤는데 잘 안되요. -
모지모지 2017.02.10 23:12 신고 제블로그기준으로 67번째줄인데 아마 비슷한 줄수에
<span class="txt_profile">가 있을거예요.
그 아래로 아래 소스를 붙여보세요~^^
<a href="http://www.mojimoji.co.kr" title="블로그홈">글목록</a><span class="txt_bar"></span>
<a href="" title="방명록">방명록</a><span class="txt_bar"></span>
<a href="#" title="티스토리친구하기" onclick="window.open('toolbar/popup/link','','width=500,height=520');">이웃추가</a> -
모지모지 2017.02.10 23:13 신고 아~ 위 소스에서 블로그홈 주소는 님 블로그 주소로 변경하시고요~^^
-
하이공도리 2016.11.27 20:57 신고 제가 딱 필요한 기능을 시원하게 적어주셨네요 ㅎㅎ
잘보고갑니다. 감사합니다. -
mocdori 2017.02.23 17:11 신고 모지님~ 따라만 해도 척척되네요^^ 감사합니다~
-
밀리언마일러 2018.01.16 06:07 신고 안녕하세요
이제 막 티스토리 블로그 시작해서 이것저것 해보고 있는데요^^;; 저한텐 너무 어렵네요 흑흑 ㅜㅜ
그래도 모지모지님 블로그 보고 많은 도움 되고 있습니다. 위에 어떤분이 문의 주신 글에 "메인화면 글목록/방명록/이웃추가 이건 어떻게 하는 건가요?" 이거 보고 답글 주신거 대로 적용해서 잘 되었는데요^^ 이거 글자 색깔은 어떻게 바꾸는 건가요? ㅜㅜ 그 부분 글자 색을 흰색 같은 밝은 색으로 바꾸고 싶거든요~~~ 알려 주시면 감사하겠습니다!!! -
모지모지 2018.01.16 17:46 신고 윗 댓글 중에 주니엘님 질문에 답해놓은게 있는데 그렇게해서 해결되실지 모르겠네요
-
밀리언마일러 2018.01.17 04:15 신고 답변 감사합니다...댓글들 보고 어찌어찌 하다보니까 됐네요 ㅎㅎ!!!!! 감사해요!!^^
그리고 위에 댓글들 보다 보니까 "모지모지님 스킨은 모바일로 봐도 윗부분에 배경이미지가 뜨던데, 이거 방법 올려주실 생각은...없으신가요? +ㅇ+" 이런 질문글 있던데...저도 이거 궁금했거든요...혹시 어떻게 하는건지 알려 주실수 있으세요?ㅜㅜ -
모지모지 2018.01.18 19:07 신고 오래전에 만지작거리던거라 기억이 날지 모르겠네요. 시간 나면 꼭 올려보겠습니다.
-
모지모지 2019.02.02 18:04 신고 될지 안될지 모르겠네요. 피씨화면 속성엔 height:auto, 모바일화면엔 height:값 이렇게 함 해보면 될라나요;