Section 26 - 티스토리 반응형 스킨 만들기 - [사이드바] 방문자수(카운터)

이번 섹션은 "방문자수(이하 카운터)" 사이드바 모듈을 만들도록 하겠습니다.

카운터 모듈을 끝으로 사이드바 모듈의 섹션은 모두 끝나기 때문에 조금만 더 힘을 내봅시다~

 

카운터는 아시다시피 내 블로그에 방문했던 총 방문자 수, 어제 방문자 수, 오늘 현재까지 방문자 수를 나타내 주는 기능인데 우리는 사이드바 모듈로 만들어서 언제든지 사용/미사용으로 설정할 수 있게 만들겠습니다. 
※ 이 카운터는 사이드바 모듈로 만들어도 되지만 블로그 아무곳에나 넣으셔도 상관없는 기능입니다.

그럼 바로 코드 들어갑니다~

 

 

 

STEP 1. skin.html 사이드바 카운터 모듈 코드 추가

                    
                        
                        

                            
COUNTER
                            
Total : 
                            

                                Yesterday : 
                                |
                                Today : 
                            
                        
                    

• : 총 방문자수
• : 오늘 방문자수
• : 어제 방문자수

※ 카운터 티스토리 치환자는 그냥 넣기만 하면 나오기 때문에 코드 구조 설명은 생략합니다.

 

 

 

STEP 2. 사이드바에 카운터 모듈 추가

사이드바에 카운터 모듈 추가

1. "사이드바 카운터 모듈 코드"를 추가하면 기본 모듈에 "방문자수"가 표시됩니다.
   이 "방문자수" 모듈을 사이드바에 추가합니다.
2. 사이드바 영역에 추가한 후 "변경사항 저장" 버튼을 클릭하여 저장합니다.

 

 

 

STEP 3. style.css 사이드바 방문자수(카운터) 모듈 스타일 추가

/* counter */
.counter {font-family:'Roboto', tahoma, 'Noto Sans', sans-serif; font-size:0.688em; text-align:center; letter-spacing:1px}
.counter .total {display:block}
.counter .today-yesterday {color:#999}
.counter .today-yesterday strong {font-weight:normal; color:#333}
.counter .pipe {display:inline-block; margin:0 4px; color:#eee}

• 사이드바 링크 모듈 스타일 아래에 추가합니다.

 

 

 

STEP 4. 사이드바 방문자수(카운터) 모듈 결과 확인

사이드바 카운터 모듈 결과 확인

 

 

 

티스토리 사이드바 관련 섹션이 모두 끝났습니다. ㅠㅠ

그동안 고생 많으셨습니다!!
이제 티스토리 반응형 스킨 만들기의 9부 능선을 넘어섰습니다.
약간의 디자인 및 네비게이션 수정과 반응형 디자인을 위한 스타일 수정까지 완료하면 스킨 만들기가 끝납니다.
얼마 안남았으니 조금만 더 파이팅해요!!