티스토리 스킨 사이드바에 달력 캘린더 모듈 넣기 (feat.고래스킨)

티스토리 무료 스킨중 개인적으로 깔끔하고 예쁘고 차분하다고 생각되는 고래스킨에는 기본적으로 캘린더를 제공하고 있지 않습니다. 때문에 일기나 매매일지 같은 걸 주제로 하는 블로그에는 조금 아쉬운 부분이 있기도 합니다.

 

이러한 고래 스킨을 비롯하여 캘린더가 없는 티스토리 스킨에 커스텀으로 캘린더 모듈을 넣는 방법을 소개하겠습니다.

티스토리 스킨 사이드바에 달력이 추가된 모습

사이드바 달력

 

추가 방법

HTML 편집

다음 html 코드를 html편집의 </s_sidebar> 바로 윗 부분에 추가합니다.

# #사이의 공백은 삭제해주세요.

<s_sidebar_element>
	<!-- 달력 -->
	<div class="module popularPost">
		<div class="calendar">
		<h1 class="sr-only">캘린더</h1>
			[# #_calendar_# #]
		</div>
	</div>
</s_sidebar_element>

달력 HTML 코드

 

CSS 편집

아래 코드를 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:#0f6789}
.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:#4d747c; color:#fff; border-radius:30px;}
.calendar .tt-calendar .cal_day4 {background:#496d83; color:#fff}
.calendar .tt-calendar .cal_day4 a {background:#333}

달력 CSS 코드

저장 잊지 마세요.

 

 

관리자화면 사이드바 추가

관리자 사이드바 달력 추가

사이드바 설정에서 달력을 원하는 위치로 드래그합니다.

이제 사이드바에서 달력이 표시됩니다.