티스토리 달력 넣기

블로그에 내가 한달에 얼만큼의 글을 올리는 지 알아보고 싶어 달력을 추가하고 싶어졌다.

그런데 달력 모듈을 기본지원을 안하네?!

구글에 쳐보니 내가 html을 수정해야 된다.

html을 한번도 만져본적이 없지만 구글이 있기에 호기롭게 나섰다.

 

역시나 있다!

https://tistory.noo9ya.com/67

Section 23 - 티스토리 반응형 스킨 만들기 - [사이드바] 달력

 

블로그 꼭대기에 왕 큰 달력 몇 번 넣는 등 삽질을 한 시간 정도 하다 구석에 이쁘게 넣기에 성공했다. 

html 구조에 익숙하지 않은 나같은 사람들을 위해 글을 남긴다.

핵심은 

<s_sidebar_element> ~~ </s_sidebar_element>

를  <s_sidebar>~~ </s_sidebar> 사이에 넣으면 된다. 이걸 모르고 여기 저기 넣어보다 한 시간이 흘렀다.

<div class="sidebar-1">
					
<s_sidebar>
	<s_sidebar_element>
    <!-- 달력 -->
    	<div class=" calendar">
        <h2 class="sr-only">CALENDAR</h2>
        

  
«   2025/01   »
  

    

      
일
      
월
      
화
      
수
      
목
      
금
      
토
    
  
  

    

      
 
      
 
      
 
      
1
      
2
      
3
      
4
    
    

      
5
      
6
      
7
      
8
      
9
      
10
      
11
    
    

      
12
      
13
      
14
      
15
      
16
      
17
      
18
    
    

      
19
      
20
      
21
      
22
      
23
      
24
      
25
    
    

      
26
      
27
      
28
      
29
      
30
      
31
      
 
    
  

    	</div>
	</s_sidebar_element>

	<s_sidebar_element>
	<!-- 카테고리 -->
	<nav class="category">
	
 전체 글 (220) 
  
 I am.... (5) 
 Woo宙 일상 (77) 
  
 책방 (22) 
 Woo宙 일기 (35) 
 잡다구리 (16) 
 돈money錢 (2) 


 공부 (76) 
  
 기초물리 (29) 
 기초수학 (23) 
 벡터미적분학 (6) 
 학습법 (6) 
 Programming (5) 
 C++ (5) 
 Language (1) 


 나중에 뭐 할지 고민 (31) 
  
 대학원 (11) 
 Autonomous driving (7) 
 verification (0) 
 할 것. (2) 


 Senior astronauts (18) 
 [스크랩] 읽어 볼 만한 것 (10) 




	</nav>
	</s_sidebar_element>
</s_sidebar>
</div>

이 단계가 끝나면 

블로그 관리 -> 꾸미기 -> 사이드바에 들어가 달력 모듈의 위치를 원하는 곳에 넣는다. 

 

마지막으로 달력의 모양을 이쁘게, 달력 날짜를 누르면 그 날짜 글을 보여주는 기능을 추가하기 위해 

스킨편집에서 CSS를 들어가 제일 마지막에 이 코드를 추가한다.

(찍었는데 성공했다!.)

 

/* calendar */
.calendar {}
.calendar .tt-calendar {}
.calendar .tt-calendar caption {font-size:1em}
.calendar .tt-calendar caption a:first-child, .calendar .tt-calendar caption a:last-child {color:#999; font-size:0.375em}
.calendar .tt-calendar caption a {vertical-align:middle}
.calendar .tt-calendar th, .calendar .tt-calendar td {padding:5px 0; text-align:center}
.calendar .tt-calendar th {font-size:0.875em; font-weight:normal}
.calendar .tt-calendar td {font-size:0.75em; color:#bbb}
.calendar .tt-calendar .cal_current_week {background:#f5f5f5}
.calendar .tt-calendar .cal_week2, .calendar .tt-calendar .cal_day_sunday {color:red}
.calendar .tt-calendar td a {display:inline-block; padding:2px 8px; background:#ff8149; color:#fff; border-radius:30px;}
.calendar .tt-calendar .cal_day4 {background:#333; color:#fff}
.calendar .tt-calendar .cal_day4 a {background:#333}


출처: https://tistory.noo9ya.com/67 [누구야 티스토리]