제2의 비엔지니어 인생관을 꿈꾸며

Posted
Filed under Study

원래 내가 사용하는 스킨은 현재 사용율 1위인 iendev이 만드신 IS BASE ver.0.33이다.
최초에 이를 선택하여 애드센스 광코 코드를 넣고보니 사이드바를 하나 더 추가하고 싶은 마음이 생겼다. 손쉽게 3단 스킨을 선택하여 사용할 수도 있었지만 다시 애드센스 코드를 일일이 삽입해주는 것이 여간 귀찮은 것이 아니었다. 그래서 새로운 사이드바를 추가할 수 있는 방법을 알아보았다. (필자의 말이 아님 원본출처 필자의 말)


먼저 사이드바를 추가하는 과정의 큰 틀을 살펴보겠다.

ⓐ style.css을 편집을 가해야 한다.

ⓑ style.css에서 우선 "새로운 사이드바"을 선언한다.(기존의 사이드바를 참고한다)

ⓒ style.css에서 새로운 사이드바를 구현하기 위한 필요한 요소들을 설정한다.(기존의 사이드바를 참고한다)

ⓓ skin.html에서 추가된 사이드바에 모듈이나, 다른 내용을 추가한다.(기존의 모듈을 참고한다.)

큰틀의 흐름은 여기까지이다. 이제 상세하게 알아보도록 한다.


1. style.css부분을 살펴보아 다음과 같은 부분을 찾아, 빨간색과 같이 새로운 사이드바를 선언한다.

#tool      {
   width:100%;
   min-height:10px;
   clear:both;

      }
 #container {     블로그 전체를 선언한 곳
   width:910px;  전체폭을 선언한 곳.  이곳은 추가사이드바의 가로폭을 더해줘야 한다.
   border:0px ;
   margin:0px auto;
   padding:0px;   
 }
 #header {  
   margin-bottom:10px;
   min-height:10px;
   clear:both;
   overflow:hidden;  
 }
 #content {
   float:left;
   width:540px;              우리가 글을 쓰는 본문 폭.
   overflow:hidden;  
 }
 #sidebar {
   display:block;
   float:left;
   width:190px;
   margin-left:10px;
   overflow:hidden;
 }
 #newsidebar {           새로운 사이드바 이름을 newsidebar라고 하였다.
   display:block; 
   float:left;
   width:160px;             가로폭은 160px으로 하였다.
   margin-left:0px;
   overflow:hidden; 
}

블로그 전체폭이 좁을경우 추가 사이드바가 기존의 사이드바의 밑에 보여지는 경우가 있다. 이때는 블로그 전체 폭을 10px정도 더 늘려가며 제대로된 폭을 찾아보자.



2. 추가 사이드바를 설정하는데 필요한 요소를 찾기위해 기존의 사이드바가 어떤식으로 되어 있는지 살펴보자

/* ***** sidebar ***** */

#sidebar                       { }        <!--이부분이 기존의 사이드바 설정 시작부분 -->
#sidebar .side_item         { padding:10px 10px 10px 10px;  padding-left:8px; border-left:1px solid #999999; border-right:1px solid #999999; background-color:#f9f9f9; }

#sidebar a:link          { color:#333;  text-decoration:none;}
#sidebar a:visited       { color:#333;  text-decoration:none;}
#sidebar a:hover         { color:#C45050;  text-decoration:none;}
#sidebar a:active        { color:#333;  text-decoration:none;}
        
#sidebar ul                    { list-style:none;}
#sidebar li                    { padding-left:0px;}
#sidebar h3                    { cursor:pointer; font-family:tahoma,dotum; font-size:11px;  font-weight:bold; color:#C45050; background:url(images/line_dot_gray.gif) 0px 22px repeat-x; margin-bottom:10px;}
#sidebar .item_title            { font-family:tahoma,dotum; font-size:11px;  font-weight:bold; color:#C45050; margin-bottom:35px;}
#sidebar .cnt                  { font:0.85em Tahoma, Helvetica, Arial, Gulim, sans-serif;  color:#f60;}
#sidebar .date                 { font:10px Tahoma;  color:#888;}
#sidebar .name                 { font:0.9em Dotum, Arial, sans-serif;  color:#888;}

각종 모듈에 대한 설정들이 들어서 있다.

#sidebar .btn             { margin-top:10px;} <!--이부분이 기존의 사이드바 끝 -->



3. 이제 "기존의 사이드바"의 코드를 다음과 같이 sidebar를 newsidebar로 바꾸어 기입한다. 이를 다신 "기존의 사이드바 아래"에 추가한다.

#newsidebar                       { }                          <!-- 추가 사이드바 시작 -->
#newsidebar .side_item         { padding:10px 10px 10px 10px;  padding-left:8px; border-left:1px solid #999999; border-right:1px solid #999999; background-color:#f9f9f9; }

#newsidebar a:link          { color:#333;  text-decoration:none;}
#newsidebar a:visited       { color:#333;  text-decoration:none;}
#newsidebar a:hover         { color:#C45050;  text-decoration:none;}
#newsidebar a:active        { color:#333;  text-decoration:none;}
        
#newsidebar ul                    { list-style:none;}
#newsidebar li                    { padding-left:0px;}
#newsidebar h3                    { cursor:pointer; font-family:tahoma,dotum; font-size:11px;  font-weight:bold; color:#C45050; background:url(images/line_dot_gray.gif) 0px 22px repeat-x; margin-bottom:10px;}
#newsidebar .item_title            { font-family:tahoma,dotum; font-size:11px;  font-weight:bold; color:#C45050; margin-bottom:35px;}
#newsidebar .cnt                  { font:0.85em Tahoma, Helvetica, Arial, Gulim, sans-serif;  color:#f60;}
#newsidebar .date                 { font:10px Tahoma;  color:#888;}
#newsidebar .name                 { font:0.9em Dotum, Arial, sans-serif;  color:#888;}


기존의 사이드바를 참고해보면 이부분에 달력, 카테고리, 카운터 등이 복잡하게 기입되어 있는 것을 볼 수 있다. 나는 이곳에 모듈은 넣지 않고 광고만 넣을 것이므로 아무것도 넣지 않았다.
 

 
#newsidebar .btn               { margin-top:10px;}      <!--추가 사이드바 끝 -->




3. 이제 skin.html에서 "추가 사이드바"의 내용을 정해야 한다. skin.html에서 사이드바의 내용이 어떤식으로 설정되어 있는지 살펴보자


 <div id="sidebar">
   <b class="ntop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
   
   <div class="side_item" id="side_item">
   <s_sidebar>

    <s_sidebar_element>
     <div class="아무이름이나넣으세요">

                   이부분에 모듈이나 다른 내용이 들어 간다.

      </div>
    </s_sidebar_element>
   </s_sidebar><div class="sbox_hblank1"></div>
   </div>
   
   <b class="nbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>  
   <br /><br />
 </div>
 <!-- sidebar close -->



4. 기존의 사이드바의 내용을 설정한 것을 참고하여 다음과 같이 sidebar를 newsidebar로 바뀌어 기존의 사이드바 끝부분 다음에 추가하여 준다.

     <!-- 추가 사이드바 -->
  <div id="newsidebar">
    <b class="ntop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
   
    <div class="side_item" id="side_item">
    <s_newsidebar>

     <s_newsidebar_element>

      <div class="아무이름이나 넣으세요">

이부분에 원하는 광고코드를 넣어주면 된다. 나는 160px*~~인 세로로 긴 모양의 광고를 넣었다.
 
      </div>
     
     </s_newsidebar_element>


    </s_newsidebar><div class="sbox_hblank1"></div>
    </div>
   
    <b class="nbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>  
    <br /><br />
       </div><!-- 추가 사이드바 끝-->



5, 이와같이 다소 복잡한 과정을 거친 뒤 현재 나의 블로그와 같이 새로운 사이드바를 추가하여 그곳에 가로 160px짜리 세로로 긴 모양의 이미지 광고를 넣을 수 있었다.











네이버 PHP PLAY  에서 복사해 왔음 사이드바에 배너추가하는걸 검색해도 나오지 않길레 이리저리 뒤지다가 겨우 찾았음.
2008/01/19 10:17 2008/01/19 10:17