태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

Simple X 스킨을 적용해서 쓰다가 상단 사이드바가 기본으로 펼쳐 졌으면 해서

적용 시켜 보았습니다.

간단하게 3군데만 고치시면 됩니다.

1. style.css 에서 #sidebar 로 검색

/* 블로그 레이아웃 */
#container {width:/*@post-width:100=*/ 800px /*@*/; margin:0px auto; background-color:#fff; }
#header {width:/*@post-width:100=*/ 800px /*@*/; border-bottom:4px solid #000; position: relative; }
#header h1 {float:left; width:/*@post-width:-100=*/ 600px /*@*/;  margin-top:/*@title-height:-27=*/ 23px /*@*/; word-break:break-allt:left; word-wrap:break-word; }
#blogMenu {float:right; margin-top:/*@title-height:-23=*/ 27px /*@*/; position: absolute; right: 0; bottom: 11px; }
#sidebar {display:none; padding-top:40px; padding-bottom:21px; border-bottom:1px solid #000; }
.sidebar-one, .sidebar-two, .sidebar-three, .sidebar-four {word-break:break-allt:left; width:155; word-wrap:break-word; overflow:hidden; }
.sidebar-one {float:left; width:155px; margin-right:20px; }
.sidebar-two {float:left; margin-right:20px; }
.sidebar-three {float:left; margin-right:20px; }
.sidebar-four {float:left; }
.sidebar { width: 190px; }
#content {width:/*@post-width=*/ 700px /*@*/; padding:50px 50px 0 50px; }
#tt-body-media #content { padding-top: 30px; }
#footer {width:/*@post-width:100=*/ 800px /*@*/; margin-top:65px; margin-bottom:66px; border-top:1px solid #E7E7E7; }

위에 빨간 글씨 " display:none; " 지우시면 됩니다.
그럼 페이지 로딩시 상단 사이드바가 보이게 됩니다.

2. skin.html 에서 blogMenu 로 검색
<!-- 블로그메뉴 -->
  <div id="blogMenu">
   <ul>
    <!-- 블로그 사용 환경 (설치형/티스토리)에 맞게 아래 주석으로 처리된 메뉴를 활성화 시키시기 바랍니다. -->
    <li class="tab_home"><a href="[##_blog_link_##]" title="Home">Home</a></li>
    <li class="tab_tag"><a href="[##_taglog_link_##]" title="Tag">Tag</a></li>
    <li class="tab_media"><a href="[##_blog_link_##]media" title="MediaLog">MediaLog</a></li>
    <li class="tab_location"><a href="[##_localog_link_##]" title="LocationLog">LocationLog</a></li>
    <!-- <li class="tab_key"><a href="[##_keylog_link_##]" title="KeyLog">KeyLog</a></li> -->
    <li class="tab_guestbook"><a href="[##_guestbook_link_##]" title="Guestbook">Guestbook</a></li>
    <li class="tab_admin"><a href="[##_owner_url_##]" title="Admin">Admin</a></li>
    <li class="tab_write"><a href="[##_owner_url_##]/entry/post" title="Write">Write</a></li>
    
<li id="sidebar_open" style="display:none"><a href="#" title="sidebar open">sidebar open</a></li>
    <li id="sidebar_close"><a href="#" title="sidebar close">sidebar close</a></li>
    
   </ul>
  </div><!-- close blogMenu -->

위에 id="sidebar_close" 에 있던 style을 id="sidebar_open" 쪽으로 옮겨 줍니다.
그럼 처음 로딩시 close 버튼이 보이게 됩니다. 이미 펼쳐 있는데 open 버튼이 보이면 안되겠죠? ^^

3. skin.html 에서 visible_tf 로 검색
.....

function visible_tf() {
var btn_open = document.getElementById('sidebar_open');
var btn_close = document.getElementById('sidebar_close');
var obj_sidebar = document.getElementById('sidebar');
/*obj_sidebar.style.display = 'none';*/ 또는 obj_sidebar.style.display = 'block';
 btn_open.onclick= function() {
  obj_sidebar.style.display = 'block';
  btn_close.style.display = 'inline';
  btn_open.style.display = 'none';
 }
 btn_close.onclick=function() {
  obj_sidebar.style.display = 'none';
  btn_close.style.display = 'none';
  btn_open.style.display = 'inline';
 .....

위에 처럼 주석 처리를 해주거나 none 을 block으로 바꿔 주시면 됩니다.
자바스크립트에서 초기화를 해주는 건데 none으로 되어 있어서 로딩하면서 닫힙니다.


::고수님들이야 바로 아시겠지만 저처럼 초보는 삽질을 많이 하기에 필요하신분들 유용하게 쓰세요^^


Posted by 싸블 트랙백 4 : 댓글 33

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. addr | edit/del | reply BlogIcon 눈내리는마을。 2010.05.19 00:39 신고

    좋은 정보 감사합니다~!!!

  3. addr | edit/del | reply RealCat 2010.06.29 17:29 신고

    감사합니다.
    한방에 해결했어요^^
    님덕에 한 1시간은 절약한듯해요.
    감사요~

  4. addr | edit/del | reply BlogIcon noelg 2010.08.10 14:59 신고

    됐다ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ아 진짜고맙습니다ㅜㅜㅜㅜㅜㅜ

  5. addr | edit/del | reply BlogIcon MS-Photography 2010.10.18 22:44 신고

    아 정말 정말 고맙습니다.ㅠㅠㅠㅠ 겨우했어요 ㅠㅠㅠㅠㅠ

  6. addr | edit/del | reply 2010.12.11 01:04

    비밀댓글입니다

  7. addr | edit/del | reply BlogIcon 신사냥이 2011.01.05 16:54 신고

    하루 종일 찾던 문제를 한 방에 해결했네요~ 감사합니다.

  8. addr | edit/del | reply BlogIcon tiptoe 2011.01.12 16:24 신고

    말 그대로 삽질중이었는데;; 감사합니다~

  9. addr | edit/del | reply BlogIcon 용작가 2011.08.31 16:26 신고

    유용한 팁 잘 읽고 갑니다 ^^

  10. addr | edit/del | reply BlogIcon 199080 2011.09.19 08:52 신고

    정말 궁금했던건데 너무 감사해요ㅠㅠ

  11. addr | edit/del | reply BlogIcon MBLAQst 2012.01.08 21:16 신고

    정말 감사해요ㅠ ㅠ

  12. addr | edit/del | reply BlogIcon Misun Kim 2012.02.26 01:07 신고

    이 방법 계속 찾고 있었는데 드디어!! 너무 감사합니다. ^^

  13. addr | edit/del | reply 2012.07.01 08:30

    비밀댓글입니다

  14. addr | edit/del | reply BlogIcon 멜레 2012.07.25 16:03 신고

    아 유용한 정보 감사합니다ㅠ

  15. addr | edit/del | reply BlogIcon 리얼케이티 2013.03.14 04:01 신고

    사이드바 메뉴 펼치는 방법을 검색하면, 주로 카테고리 펼치기에 관한 내용이 많았는데..
    이 포스팅 덕분에 저도 큰 도움을 받았습니다. 정말 감사합니다..^^

  16. addr | edit/del | reply BlogIcon MarcoAeolus 2013.06.24 16:08 신고

    좋은정보 감사드립니다!!

  17. addr | edit/del | reply BlogIcon solleim 2013.12.13 02:36 신고

    덕분에 성공하고 갑니다. 사이드바 펼치기는 찾기 힘들었는데.. 감사해요 :)

  18. addr | edit/del | reply 2014.06.25 00:12

    비밀댓글입니다

  19. addr | edit/del | reply BlogIcon 울새찡 2014.11.16 19:03 신고

    와...진짜 계속 검색해서 찾아보는데 이대로 하니깐 드디어 되네여ㅠㅠㅠㅠ 좋은 정보 감사합니다ㅠ

  20. addr | edit/del | reply BlogIcon 권건우 2015.04.08 06:00 신고

    감사합니다!

  21. addr | edit/del | reply BlogIcon XINDY 2016.12.17 18:56 신고

    너무나 감사합니다 똑같이 차근차근 따라하니 성공!!! 님같은 분이 계셔서 저같은 초보는 블로그할맛이 납니다! 너무 감사합니다!!!!