사이드 바 - 달력 / 글 보관함 / 링크

방법

스킨마다 있을 수도 있고 없을 수도 있는 사이드 바의 각 아이템들 중에...

 

북클럽 스킨에는 달력 / 글 보관함 / 링크 가 없네요... 쩝...

 

 

• 달력은 월별 / 일별로 글을 모아 보기에 편하고...
  (스스로에겐 1일1포스팅이 잘 되고 있는지도 알 수 있고. ㅋ)
• 글 보관함은 지난 6개월간 월별로 글수를 볼 수 있고... 
• 링크는... 뭐 외부 링크들을 주욱 모아 놓으니 좋고...

 

이런저런 이유로 혹시 이들이 필요하다면 (어떤 스킨이건) 간단히 추가 할 수 있습니다.

 

방법

관리 > 스킨편집 > html 에서 </s_sidebar> 를 찾아 그 위에 아래 내용을 넣어줍니다.

​​<s_sidebar_element>
​​​​<!-- 달력 -->
​​​​<div class="calendar">
​​​​​​<h2><span class="blind">달력</span></h2>
​​​​​​                                                                                                                                                                                                                                                                                                                      

«   2025/04   »


일
월
화
수
목
금
토




 
 
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
 
 
 



​​​​</div>
​​</s_sidebar_element>

​​<s_sidebar_element>
​​​​<!-- 글 보관함 -->
​​​​<div class="archive">
​​​​​​<h2>월별 포스팅</h2>
​​​​​​<ul>
​​​​​​​​<s_archive_rep>
​​​​​​​​​​<li><a href=""> <span class="cnt">()</span></a></li>
​​​​​​​​</s_archive_rep>
​​​​​​</ul>
​​​​</div>
​​</s_sidebar_element>

​​<s_sidebar_element>
​​​​<!-- 링크 -->
​​​​<div class="links">
​​​​​​<h2>링크</h2>
​​​​​​<ul>
​​​​​​​​<s_link_rep>
​​​​​​​​​​<li><a onclick="window.open(this.href); return false" href="http://noo9ya.tistory.com/admin/entry/post/"></a></li>
​​​​​​​​</s_link_rep>
​​​​​​</ul>
​​​​</div>
​​</s_sidebar_element>
...
...
</s_sidebar>

그리고 CSS에 스타일을 추가합니다.

.sidebar .archive, .sidebar .calendar, .sidebar .links {
​​margin-bottom: 36px;
}
.sidebar .archive ul li a {
​​display: block;
​​overflow: hidden;
​​white-space: nowrap;
​​text-overflow: ellipsis;
}

/* 달력 */
.calendar .tt-calendar {
​​margin-left: -4px;
}
.calendar .tt-calendar caption {
​​/* 이번달 */
​​font-size: 0.875em;
​​font-weight: bold;
}
.calendar .tt-calendar caption a:first-child,
.calendar .tt-calendar caption a:last-child {
​​/* 이전달, 다음달 버튼 */
​​margin-top: -3px;
​​position: relative;
​​display: inline-block;
​​color: #999;
​​font-size: 1.5em !important;
}
.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_week2,
.calendar .tt-calendar .cal_day_sunday {
​​/* 일요일 */
​​color: red
}
.calendar .tt-calendar th:last-child,
.calendar .tt-calendar td:last-child {
​​/* 토요일 */
​​font-size: 0.75em;
​​color: blue;
}
.calendar .tt-calendar .cal_current_week {
​​/* 이번 주 */
​​background: #f5f5f5
}
.calendar .tt-calendar td a {
​​display: inline-block;
​​padding: 2px 3px;
​​background: #4E92DF;
​​color: #fff;
​​border-radius: 10px;
​​width: 13px;
}
.calendar .tt-calendar .cal_day4 {
​​/* 오늘 날짜 */
​​background: #ccc;
}

물론 스킨에 맞춰.. 또는 개인의 취향에 맞춰 스타일은 만져주시면 되겠죰?!

이렇게 저장 후 관리 > 꾸미기 > 사이드바에서 필요한 요소들만 골라 쓰시면 되겠습니다.