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

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

 

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

 

 

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

 

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

 

방법

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

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

  
«   2024/05   »
  

    

      
일
      
월
      
화
      
수
      
목
      
금
      
토
    
  
  

    

      
 
      
 
      
 
      
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>
		<!-- 글 보관함 -->
		<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;
}

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

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