티스토리 사이드바 메뉴 기능 모듈 추가 방법(html 수정)
- 관리자 -> 스킨 편집 -> html 편집
- 사이드바 태그 사이에 코드를 삽입,
- 주의! 첫번째 사이드바에 추가했는데 반영이 안되면 다음 사이드바에 추가해야 반영되는 경우가 있음
<div class="sidebar-2">
<s_sidebar>
<!-- 추가 -->
</s_sidebar>
</div>
- 코드 삽입후 저장 -> 관리자 페이지 -> 사이드바 메뉴에 들어가면
기본 모듈과 설정된 모듈이 변경되어 있는 경우가 있음
필요에 따라 변경 설정이 필요할 수 있음
//-------------------------------------
* 카운터
<s_sidebar_element>
<!-- 카운터 모듈 -->
<div id="counter">
<dl>
<dt>Total</dt>
<dd class="total"></dd>
<dt class="today">Today</dt>
<dd></dd>
<dt class="yesterday">Yesterday</dt>
<dd></dd>
</dl>
</div>
</s_sidebar_element>
//-----------------------
- CSS 에 추가
#counter { font:0.85em Verdana, Helvetica, Arial, Gulim, sans-serif; padding: 10px 15px; margin-top: 20px; border: 1px solid #dedede; background-color: #eee; color: #999; line-height: 1.5; }
#counter dl, #counter dt, #counter dd { padding: 0; margin: 0; }
#counter dt { float: left; width: 80px; }
#counter dd.total { font-weight: bold; color: #333; }
//-------------------------------------
* 관리자
<s_sidebar_element>
<!-- 관리자 모듈 -->
<div id="adminMenu">
<ul>
<li class="tab_admin">
<a href="https://codens.tistory.com/m/manage">관리자</a>
</li>
<li class="tab_write">
<a href="https://codens.tistory.com/m/manage/entry/post">글쓰기</a>
</li>
</ul>
</div>
</s_sidebar_element>
//-----------------------
- CSS 에 추가
#adminMenu { margin: 8px 0 0 0; height: 45px; text-align: center;}
#adminMenu ul { background: #f0f0f0; height: 34px; padding: 7px 0 4px; margin-left: 4px; }
#adminMenu li { display:inline; background:none; padding: 0; margin: 0; }
//-------------------------------------
* 글 보관함
<s_sidebar_element>
<!-- 글 보관함 -->
<div class="archive">
<h5>ARCHIVE</h5>
<ul>
<s_archive_rep>
<li>
<a href=""> <span class="cnt">()</span></a>
</li>
</s_archive_rep>
</ul>
</div>
</s_sidebar_element>
//---------------------
- CSS 에 추가
//-------------------------------------
* 달력 추가
<s_sidebar_element>
<!-- 달력 -->
<div class="calendar">
<h1 class="sr-only">CALENDAR</h1>
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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>
//---------------------
- 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}
//-------------------------------------
참고