티스토리 글쓰기 달력 추가하기

 

최근에는 꾸준히 1일 1포스팅 실천 중인데 바로바로 확인할 수 있는 게 있으면 좋겠다고 생각하던 차에

티스토리에서 제공하는 글쓰기 달력이 있다는 걸 다른 분들 블로그에서 보고

나도 달아야지 달야지 하다가 드디어 추가 했습니다.

 

 

티스토리 글쓰기 달력 추가 방법

 

1. 아래 코드를 복사합니다.

<s_sidebar_element>
  <!-- 달력 -->
  <div class="calendar">
    <h2>달력</h2>
    <!-- 주석제거 후 적용 -->
    [<!-- ##_calendar_## -->]
  </div>
</s_sidebar_element>

※ <h2>달력</h2> 부분은 변경 가능하며 저는 다른 사이트바 엘리먼트 타이틀 부분과 맞추기 위해서 h2로 코딩했습니다.

 

 

 

 

2. 관리자단 꾸미기 > 스킨 편집

 

 

 

 

 

3. html편집 클릭

 

 

 

 

4. <s_sidebar> </s_sidebar> 사이 원하는 위치에 넣어줍니다.

 

저 같은 경우에는 사이바에 태그 엘리먼트 아래에 위치하고 싶어서

ctrl+f를 눌러서 태그로 위치를 찾아서 그 아래에 넣었습니다.

 

 

 

 

5. 사이드바에 추가합니다.

위에 코드를 넣어주면 관리자 > 꾸미기 > 사이바에 달력이 나타날 것입니다.

 

혹시 위치가 안 맞거나 하면 여기서 수정한 후 저장합니다.

 

 

 

 

 

6. css를 넣어줍니다. 

 

위에까지 잘 따라 했다면 아래와 같은 못생긴 달력이 하나 나올 것입니다.

여기에 스타일을 넣어줄 건데요

스타일은 각자 원하는 모양으로 넣어주면 됩니다.

저는 아래와 같이 적용시켰습니다.

/* calendar */
.calendar {margin-bottom: 3rem;}
.calendar .tt-calendar {}
.calendar .tt-calendar caption {font-size: 0.855em;margin-bottom: 0.7em;}
.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.700em;font-weight:normal;color: #555;}
.calendar .tt-calendar td {font-size:0.75em;color: #7e8ba3;}
.calendar .tt-calendar .cal_current_week {}
.calendar .tt-calendar .cal_week2, .calendar .tt-calendar .cal_day_sunday {color:red}
.calendar .tt-calendar td a {display:inline-block;background: #f5f8fc;color: #4c7dff;border-radius: 100%;width: 22px;height: 22px;line-height: 20px;}
.calendar .tt-calendar .cal_day4 {color: #00aecd;}
.calendar .tt-calendar .cal_day4 a {background: #2868f7;color: #fff;}

 

스타일도 마찬가지로 복사한 후 css에 적용시켜주면 됩니다.

 

 

 

 

7. 완성

포스팅한 날짜에는 파란 글씨에 하늘색 배경으로 적용돼있는 것을 확인할 수 있습니다.