프로그래밍/블로그
[티스토리 스킨] 부트스트랩(bootstrap) + 티스토리(tistory) - 5. 사이드바 꾸미기
2016. 9. 11. 15:00

사이드바는 티스토리에 의해 렌더링 되는 부분이므로 '관리 > 사이드 바'에서도 수정이 가능합니다.

 

설명

카테고리와 같은 구성요소는 티스토리에서 생성해서 보내주기 때문에 CSS도 수정하고 자바스크립트도 이용해야 원하는 모양으로 만드는 것이 가능합니다.

 

html 태그에서 추가했는데 보이지 않는다면 '관리 > 사이드 바'에 들어가 추가해주셔야 합니다.

사이드 바는 '<s_sidebar_element></s_sidebar_element>'사이의 구성요소를 사용합니다.

이 안에 구성요소를 만들어야 '관리 > 사이드 바'에도 표시됩니다.

 

 

 

 

코드

사이드바는 패널을 이용하여 제목을 만들고 내용물을 채워 모양을 잡습니다.

 

bootstrap_tistory_005.txt

 

여기서 주의해서 봐야 할 것은 '<s_sidebar_element></s_sidebar_element>'입니다.

기본이 되는 카운터 모듈을 살펴보겠습니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 3-13. 방문자 수 -->
<s_sidebar_element>
    <!-- 카운터 모듈 -->
    <div class="panel panel-default">
        <div class="panel-heading">방문자</div>
        <ul class="list-group">
            <li class="list-group-item">전체<span class="badge"></span></li>
            <li class="list-group-item">오늘<span class="badge"></span></li>
            <li class="list-group-item">어제<span class="badge"></span></li>
        </ul>
    </div>
</s_sidebar_element>
<!-- /3-13. 방문자 수 -->
 cs

 

이런 식으로 사용하면 사이드바에서 아래와 같이 확인할 수 있습니다.

'<s_sidebar_element>'바로 아래에 주석으로 사이드바 앨리먼트에 이름을 지정할 수 있습니다.

 

 

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!-- 3. 사이드바 -->
<s_sidebar>
    <!-- 3-1. 블로그 이미지 + 블로그 설명 -->
    <s_sidebar_element>
        <!-- 블로그 로고 모듈 -->
        <div class="text-center"><img src="https://tistory1.daumcdn.net/tistory/693272/attach/620f72dd048645d4b55b2bd494640403" alt="블로그 이미지" /></div>
        <div class="text-center"> <span class="userID">당근천국</span></div>
    </s_sidebar_element>
    <!-- 3-1. 블로그 이미지 + 블로그 설명 -->
    <!-- 3-2. 공지사항 리스트 -->
    <s_sidebar_element>
        <!-- 공지사항 모듈 -->
        <s_rct_notice>
            <div>
                <ul class="list-unstyled">
                    <s_rct_notice_rep>
                        <li>
                            <span class="label label-info">공지</span>
                            <a href=""></a>
                        </li>
                    </s_rct_notice_rep>
                </ul>
            </div>
        </s_rct_notice>
    </s_sidebar_element>
    <!-- 여기까지 - 3-2. 공지사항 리스트 -->
    <!-- 3-3. 관리자 메뉴 -->
    <s_sidebar_element>
        <!-- 관리자 모듈 -->
        <div>
            <ul class="list-unstyled">
                <li>
                    <span class="label label-success">관리</span>
                    <a href="https://danggun.tistory.com/manage">관리자</a>
                </li>
                <li>
                    <span class="label label-success">관리</span>
                    <a href="https://danggun.tistory.com/manage/entry/post">글쓰기</a>
                </li>
            </ul>
        </div>
    </s_sidebar_element>
    <!-- /3-3. 관리자 메뉴 -->
    <!-- 3-4. 검색 -->
    <s_sidebar_element>
        <!-- 검색 모듈 -->
        <div>
            <s_search>
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="내용 검색" name="" value="" onkeypress="if (event.keyCode == 13) {  }" />
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" onclick=""><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                    </span>
                </div><!-- /input-group -->
            </s_search>
        </div>
    </s_sidebar_element>
    <!-- 여기까지 - 3-4. 검색 -->
    <s_sidebar_element>
        <br />
        <!-- 카테고리 모듈 -->
        <div id="category">
            
분류 전체보기 (11628)
당근의 생활 (181)
게임 (10590)
기타 프로젝트 (47)
프로그래밍 (808)
임시저장 (2)
        </div>
    </s_sidebar_element>
    <!-- 3-6. 태그 박스 -->
    <s_sidebar_element>
        <br />
        <!-- 태그목록 모듈 -->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">태그 목록</h4>
            </div>
            <div class="panel-body">
                <s_random_tags>
                    <a href="" class=""> </a>
                </s_random_tags>
            </div>
        </div>
    </s_sidebar_element>
    <!-- 여기까지 - 3-6. 태그 박스 -->
    <!-- 3-7. 최근에 올라온 글 -->
    <s_sidebar_element>
        <!-- 최근 포스트 모듈 -->
        <ul class="list-group panel-default">
            <li class="list-group-item  panel-heading">
                <h4 class="panel-title">최근 글</h4>
            </li>
            <s_rctps_rep>
                <li class="list-group-item">
                    <span class="badge"></span>
                    <a href=""> .</a>
                </li>
            </s_rctps_rep>
        </ul>
    </s_sidebar_element>
    <!-- /3-7. 최근에 올라온 글 -->
    <!-- 3-8. 최근에 달린 댓글 -->
    <s_sidebar_element>
        <!-- 최근 댓글 모듈 -->
        <ul class="list-group panel-default">
            <li class="list-group-item  panel-heading">
                <h4 class="panel-title">최근 댓글</h4>
            </li>
            <s_rctrp_rep>
                <li class="list-group-item">
                    <a href=""> .</a><small> - </small>
                </li>
            </s_rctrp_rep>
        </ul>
    </s_sidebar_element>
    <!-- /3-8. 최근에 달린 댓글 -->
    <!-- 3-9. 최근에 받은 트랙백 -->
    <s_sidebar_element>
        <!-- 최근 트랙백 모듈 -->
        <ul class="list-group panel-default">
            <li class="list-group-item  panel-heading">
                <h4 class="panel-title">최근 트랙백</h4>
            </li>
            <s_rcttb_rep>
                <li class="list-group-item">
                    <a href=""> .</a><small> - </small>
                </li>
            </s_rcttb_rep>
        </ul>
    </s_sidebar_element>
    <!-- /3-9. 최근에 받은 트랙백 -->
    <!-- 3-10. 글 보관함 -->
    <s_sidebar_element>
        <!-- 최근 보관함 모듈 -->
        <ul class="list-group panel-default">
            <li class="list-group-item  panel-heading">
                <h4 class="panel-title">글 보관함</h4>
            </li>
            <s_archive_rep>
                <li class="list-group-item">
                    <span class="badge"></span>
                    <a href=""> .</a>
                </li>
            </s_archive_rep>
        </ul>
    </s_sidebar_element>
    <!-- /3-10. 글 보관함 -->
    <!-- 3-12. 링크 -->
    <s_sidebar_element>
        <!-- 링크 모듈 -->
        <ul class="list-group panel-default">
            <li class="list-group-item  panel-heading">
                <h4 class="panel-title">링크</h4>
            </li>
            <s_link_rep>
                <li class="list-group-item">
                    <a href="" onclick="window.open(this.href); return false"> </a>
                </li>
            </s_link_rep>
        </ul>
    </s_sidebar_element>
    <!-- /3-12. 링크 -->
    <!-- 3-13. 방문자 수 -->
    <s_sidebar_element>
        <!-- 카운터 모듈 -->
        <div class="panel panel-default">
            <div class="panel-heading">방문자</div>
            <ul class="list-group">
                <li class="list-group-item">전체<span class="badge"></span></li>
                <li class="list-group-item">오늘<span class="badge"></span></li>
                <li class="list-group-item">어제<span class="badge"></span></li>
            </ul>
        </div>
    </s_sidebar_element>
    <!-- /3-13. 방문자 수 -->
    <!-- 3-14. 티스토리 로고, 구독하기 버튼 -->
    <s_sidebar_element>
        <!-- 배너 모듈 - 티스토리 -->
        <div style="margin:8px 0; font:11px dotum; text-align:center;">
            <a href="http://www.tistory.com" style="margin-bottom:4px; display:block;"><img src="http://i1.daumcdn.net/cfs.tistory/static/images/t_logo.png" alt="tistory" /></a>
            <a href="http://www.tistory.com/join">티스토리 가입하기!</a>
        </div>
    </s_sidebar_element>
    <!-- /3-14. 티스토리 로고, 구독하기 버튼 -->
    <!-- RSS 링크 -->
    <s_sidebar_element>
        <!-- RSS 링크 -->
        <div class="botton">
            <a href="https://danggun.tistory.com/rss" onclick="window.open(this.href); return false">
                <img src="./images/rss.gif" alt="rss" />
            </a>
        </div>
    </s_sidebar_element>
    <!-- /RSS 링크 -->
</s_sidebar>
<!-- /3. 사이드바 -->
 cs

티스토리툴바