IT이야기

[팁] 티스토리 반응형 웹스킨 '#2' 공지사항 추가 및 사이드바 이름 부여하기

想像 2016. 2. 18. 13:26
반응형

티스토리가 직접 만든 두 번째 반응형 웹스킨 '#2'를 내놓았다. 이번 스킨은 심플하면서도 깔끔할 뿐만 아니라 글자체도 가독성이 높아 좋다. 무엇보다 티스토리에서 직접 만들어서 그런지 티스토리를 사용할 때 꼭 플러그인해서 써왔던 'SNS 글보내기','카테고리 글 더 보기' 기능도 예쁘게 구현되어 있어 편리하다. 그래서 본인도 봄을 맞아 티스토리 반응형 웹스킨 '#2'를 제 블로그에 적용해 보았다



그런데 티스토리 반응형 웹스킨 '#2'을 적용해 사용해 보니 몇가지 버그가 있었다. 그중 가장 먼저 눈에 뛰는 것은 ① [관리]-[사이드바] 설정 가보시면 아시겠지만 사이드바 메뉴의 이름이 없다는 것이다.  그냥 (이름없음 1), (이름없음 2), (이름없음 3), (이름없음 4), (이름없음 5), (이름없음 6), (이름없음 7)로만 표기되어 사이드바 메뉴들을 구분하기 힘들다 ② 또한 사이드바 선택메뉴에 공지사항 메뉴도 없었다.



그래서 [HTML/CSS]-[HTML]로 들어가 HTML 코드를 다음과 같이 수정했더니 버그가 수정되었다.


                            <div class="wrap_etc"> ☜  대체해야 할 위치

                                <div class="col_aside left_side">

                                <s_sidebar>

   <s_sidebar_element> <!-- 공지사항 -->

                                    <div class="box_aside">

                                    <strong class="tit_aside">Notice</strong>

                                    <ul class="list_board">

                                    <s_rct_notice>

                                    <s_rct_notice_rep>

                                    <li><a href="" class="link_board"></a></li>

                                    </s_rct_notice_rep>

                                    </s_rct_notice>

                                    </ul>

                                    </div>

                                    </s_sidebar_element> ☜ 새로 추가 

                                    <s_sidebar_element>

                                    <div class="box_aside"><!-- 최근 포스트 --> ☜ 새로 추가

                                        <strong class="tit_aside">Recent Posts</strong>

                                        <ul class="list_board">

                                            <s_rctps_rep>

                                            <li><a href="" class="link_board"></a></li>

                                            </s_rctps_rep>

                                        </ul>

                                    </div>

                                    </s_sidebar_element>


                                    <s_sidebar_element>

                                    <div class="box_aside"><!-- 최근 댓글 --> ☜ 새로 추가

                                        <strong class="tit_aside">Recent Comments</strong>

                                        <ul class="list_board">

                                            <s_rctrp_rep>

<li><a href="" class="link_board"></a></li>

    </s_rctrp_rep>

                                        </ul>

                                    </div>

                                    </s_sidebar_element>

                                    <s_sidebar_element><!-- 링크 --> ☜ 새로 추가

                                    <div class="box_aside">

                                        <strong class="tit_aside">Link</strong>

                                        <ul class="list_board">

                                            <s_link_rep>

                                            <li><a href="" class="link_board" target="_blank"></a></li>

                                            </s_link_rep>

                                        </ul>

                                    </div>

                                    </s_sidebar_element>

                                </s_sidebar>

                                </div>

                                <div class="col_aside right_side">

                                <s_sidebar>

                                    <s_sidebar_element><!-- 캘린더 --> ☜ 새로 추가

                                    <div class="box_aside box_calendar">

                                       

«   2024/03   »
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="box_aside box_tag">

                                        <strong class="tit_aside">Tags</strong>

                                        <ul class="list_tag">

                                            <s_random_tags>

<li><a href="" class="link_tag "></a></li>

    </s_random_tags>

                                        </ul>

                                        <a href="https://jsksoft.tistory.com/tag" class="link_more">more</a>

                                    </div>

                                    </s_sidebar_element>


                                    <s_sidebar_element><!-- Archives --> ☜ 새로 추가

                                    <div class="box_aside box_archive">

                                        <strong class="tit_aside">Archives</strong>

                                        <ul class="list_keep">

                                            <s_archive_rep>

                                            <li><a href="" class="link_keep"></a> ()</li>

                                            </s_archive_rep>

                                        </ul>

                                    </div>

                                    </s_sidebar_element>


                                    <s_sidebar_element><!-- 방문자통계 --> ☜ 새로 추가

                                    <div class="box_aside box_visitor">

                                        <dl class="list_visitor">

                                            <dt>Today</dt>

                                            <dd></dd>

                                        </dl>

                                        <dl class="list_total">

                                            <dt>Total</dt>

                                            <dd></dd>

                                        </dl>

                                    </div>

                                    </s_sidebar_element>

                                </s_sidebar>

                                </div>

                            </div>



사이드바 수정.txt


이렇게 HTML 코드를 수정하고 나니 아래와 같이 사이드바 메뉴가 수정보완되었다. 이제 사이드바 메뉴를 쉽게 추가하거나 제거할 수 있고 위치변경도 가능하다.


반응형