티스토리 블로그 사이드바 추가하기

마음에 딱 드는 스킨을 찾기는 쉽지 않을겁니다.
스킨이 마음에 들면 모르겠지만..그렇지 않은 경우 그래도 그중에 가장 마음에드는 스킨을 선택하고 조금수정해서 마음에 들게 만들어야 겠지요.. 그렇게 만드는건 더 힘들어요 ㅠ.ㅠ 
잘 만들수 있으면 좋으련만.....

제가 사용한 사이드바 추가하는  방법을 소개 합니다.
사이드바를 추가해서 광고를 넣으면 어떨까 하는생각에 사이드바를 추가하기위해 여기저기 찾아다니며 많이 알아봤는데 쉽지가 않더군요. 애초에 맨땅에 해딩하는거라. 이해도 잘안되고, 시간도 많이 걸리고....
하여간 성공하긴 했어요...

티스토리에서 제공하고 있는 "기본스킨"에 사이드바를 추가하는방법입니다.

관리자 > 스킨 > HTML/CSS편집 으로 들어갑니다.
창이 2개이고 위쪽은 skin.html 아래쪽은 style.css입니다.

먼저 css부분의 수정입니다.
css부분에서 아래와 같은 부분을 찾습니다 위쪽에 있습니다.

/* 반드시 들어가야하는 스타일 끝 - 이 아래는 자유롭게 추가, 삭제 가능 */
.
.
/* 블로그 레이아웃 */
.
.
.
#sidebar {
  float:right;
  width:190px;
}

파란색 부분이 사이드바 부분입니다 이부분을 복사하셔서
바로 아래쪽에 붙여넣기하시고.
#sidebar1 {
  float:right;
  width:190px;
}

위와같이 이름을 바꿔 주세요...기본에서 1만 추가한것입니다.

그리고 나서
아랫쪽으로 쭈~~~~욱 내여오시면..
사이드바 설정 부분이 있습니다..
아래와 같이....찾으셨나요?

/* ***** sidebar ***** */ (이부분은 복사하지마세요)
#sidebar ul                    { padding:0;  margin:0;  list-style:none;}
#sidebar li                    { background:url(images/bul.gif) 0 6px no-repeat;  padding-left:7px;}
#sidebar h3                    { font-size:1em;  font-weight:bold; color:#7870ab; padding-top:20px; border-bottom:1px solid #ccc; margin-bottom:5px;}
#sidebar .cnt                  { font:0.85em Tahoma, Helvetica, Arial, Gulim, sans-serif;  color:#f60;}
#sidebar .date                 { font:0.85em Verdana, Helvetica, Arial, Gulim, sans-serif;  color:#888;}
#sidebar .name                 { font:0.9em Dotum, Arial, sans-serif;  color:#888;}

사이드바 설정부분(파랑색부분)을 복사하셔서 바로 밑에 붙여넣기 하세요
아래와 같이 아래와 같이 가장윗쪽에서 추가한 사이드바 이름으로 변경해줍니다.
기본에 1을 추가한것말이죠...
여기서도 마찬가지로 1만 추가해주시면 됩니다.

#sidebar1 ul                    { padding:0;  margin:0;  list-style:none;}
#sidebar1 li                    { background:url(images/bul.gif) 0 6px no-repeat;  padding-left:7px;}
#sidebar1 h3                    { font-size:1em;  font-weight:bold; color:#7870ab; padding-top:20px; border-bottom:1px solid #ccc; margin-bottom:5px;}
#sidebar1 .cnt                  { font:0.85em Tahoma, Helvetica, Arial, Gulim, sans-serif;  color:#f60;}
#sidebar1 .date                 { font:0.85em Verdana, Helvetica, Arial, Gulim, sans-serif;  color:#888;}
#sidebar1 .name                 { font:0.9em Dotum, Arial, sans-serif;  color:#888;}

위와같이 해주시면 사이드바1(sidebar1 ) 에 대한 기본설정이 된것입니다.
일단 요기까지 한후에..html부분 수정으로 들어갑니다.

이제 html부분 수정입니다.
먼저 html창에서  아래와 같은 부분을 찾아야 합니다.
사이드바 부분입니다.

  <div id="sidebar">
   <s_sidebar>
    <!-- 기본 사이드바 -->
    <s_sidebar_element>
     <!-- 블로그 이미지 모듈 -->
     <div id="blogImage"><img src="https://t1.daumcdn.net/cfile/tistory/274A6B4E5583F28812" alt="블로그 이미지" /></div>
    </s_sidebar_element>
         .
         .
         .
    <s_sidebar_element>
    <!-- 카운터 모듈 -->
     <div id="counter">
      <ul>
       <li class="total">Total : </li>
       <li class="today">Today : </li>
       <li class="yesterday">Yesterday : </li>
      </ul>
     </div>
    </s_sidebar_element>  
   </s_sidebar>

여기에서 필요한 부분은 가장 앞부분과 가장뒷부분입니다.
이부분을 복사해서 붙여넣기 해야합니다.

  <div id="sidebar">
   <s_sidebar>
    <!-- 기본 사이드바 --> (이부분은 설명부분, 없어도 된다는뜻이죠...)
    <s_sidebar_element>
                                      요부분에 내용이 들어갑니다.
                                      필요한 것을 추가하면 됩니다. 광고를 따로 여기에 두던지 ..
    </s_sidebar_element>  
   </s_sidebar>

일단은 여기에 블로그이미지를 넣어둡니다.
그리고 1추가해아죠? 이이름은 기본적으로 같아야합니다.

   <div id="sidebar1">
   <s_sidebar1>
    <!-- 기본 사이드바 --> (이부분은 설명부분입니다. )
    <s_sidebar1_element>
     <!-- 블로그 이미지 모듈 --> (이부분은 설명부분입니다. )
     <div id="blogImage"><img src="https://t1.daumcdn.net/cfile/tistory/274A6B4E5583F28812" alt="블로그 이미지" /></div>
    </s_sidebar1_element>  
   </s_sidebar1>

위와 같이 말이죠 나중에 블로그이미지(파란색부분)을 지우시고 다른것을 넣으면 됩니다.
원래 사이드바는 건드리지 마시고 원래사이드바 앞쪽이나 뒷쪽에 붙여넣기 하세요

여기까지 하시면 기본적인 것은 된것입니다.
미리보기 해 보시면 새로운사이드바가 생겼을껍니다.
설정해두신 블로그기본이미지가 보이시나요?
기본블로그폭 조정을 하지 않았기에 아랬부분에 있을수도 있습니다.

이제부터는 수치조정을 해야 합니다..
이제부터가 진짜 시작이라고 할수있지요.
위의 내용은 그냥 복사 붙여넣기만 하는정도 이구요
폭이나 칼라 위치등을 조정하다보면 시간이 많이 걸립니다.

다시 css창으로 가셔서 아래 부분을 찾습니다.
처음 사이드바 추가했던부분입니다.

/* 블로그 레이아웃 */

 

#container {
  width:/*@post-width:200*/740px/*@*/;
  border:1px solid #bbb;
  margin:30px auto;
  padding:10px; 
  background-color:#fff;
}블로그 전체화면 규정정한 부분.. 740px라고 된것이 전체 폭을 나타냅니다. 수정하세요.
#header {
  padding:/*@title-height:-41=padding-top:;*/50px/*@*/ 10px 0 20px;
  background-color:/*@title-background-color*/#7870ab/*@*/;
  margin-bottom:8px;
  /*@title-background-image=:;*/ /*@*/
  /*@title-background-image-position=:;*/ /*@*/
  /*@title-background-image-repeat=:;*/ /*@*/
} 블로그상단면 블로그 타이틀 부분을 규정한 것입니다.
#content {
  float:left;
  width:/*@post-width*/540px/*@*/;
  overflow:hidden;
}블로그본문 부분을 규정한 것입니다. 540은 본문 폭을 나타냅니다.
#sidebar {
  float:right;
  width:190px;
}기본 사이드바 부분을 규정한 것입니다. 190은 사이드바 폭입니다.
#sidebar1 {
  float:right;
  width:190px;
}우리가 추가한 사이드바 부분 입니다. 190은 사이드바 폭입니다.
#footer {
  clear:both;
  padding:20px 0 0 0;
}본문 아랫쪽 가장밑에 위치한 부분입니다.

 위에서 각 폭들의 조정, 바탕칼라, 위치등을 조정합니다.

 아래 부분은 제사이드바 규정부분의 일부입니다.
참고해보세요, 몇번해보다보면 조금씩 익숙해 지실겁니다.
 {
  float:left; (화면에 보일때 왼쪽에 보임. center, right 변경가능)
  width:160px; (사이드바 폭)
  overflow:hidden; (사이드바폭을 넘을시 넘는부분은 안보임)
  border:0px solid #bbb; (사이드바를 보드로 ..)
  padding:0px;  (보드 사이드면에서 떨어질거리)
  background-color:#fff; (보드의 바탕색 규정)
  margin-left:5px (외쪽에서 5px만큼 떨어집니다)
}

수치를 하나하나 변경하시면서 미리보기 하시면서 조정해야 합니다.
생각과 달리 시간도 많이 걸리고 잘안됩니다.

여기까지가 제가 알고있는 사이드바 추가 방법입니다.
더 좋은 방법이 있을수도 있겠지요...
지금보니 설명이 너무 엉성해보이기도 하는군요..
그래도 도움이 되기를...