제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
Posted
Filed under Life Story
사용자 삽입 이미지
위에 보인데로 니꼰 쿨픽스3200 이다. 캐논 EOS 5D는 아직 나에게 너무 과분한 존재라 디지털 카메라에 대해서 더 잘 알고난후에 DSLR을 접해야 할듯 싶다. 니콘으로 찍어도 잘만 나오드만...
요즘은 무슨 카메라부터 시작해서 렌즈까지 차한대값이니 무서워서 사겠나. 아예 지르더만. ㅎㅎ
삼발이와 빛이 제대로만 있어준다면 부족하지 않은 사진이 나오는건 틀림이 없다.

2008/01/16 03:31 2008/01/16 03:31
Posted
Filed under Life Story



세상이 점점 좋아진다고 해야할까? ㅋㅋㅋ
우리나라도 저런날이 올까? 난리나겠지 풉 ^^;

2008/01/11 04:21 2008/01/11 04:21
Posted
Filed under Beautiful Girl
사용자 삽입 이미지
실제 방송을 봤어야 했는데...

예전엔 안그랬는데 정말 이쁜 여인네들이 저러면 왜이리 사르르 녹는지...

2008/01/09 05:43 2008/01/09 05:43
Posted
Filed under Life Story
하긴 삼성이라면 이러고도 남겠지 뭐...



2부


해경들 진짜 미쳤구먼. 너무나도 의도적인 행동만 골라했으니 저 진실이 밝혀질때면 여러사람 죽을거 같다는 생각이...
하긴 기름 퍼질때까지 초동조치를 전혀 안한것도 문제 있지만 책임문제도 전혀 거론되지 않은것도 심각한 문제이기도 한데 언론들은 도대체 어디에다 초첨을 두는건지도 의아했고 자원봉사자들 위주로만 포커스를 맞추고 있는것또한 이상한게 한두가지가 아니였다. 에구구 정말 삼성 곱게 봐줄려고 해도 전혀 아니네...
2008/01/07 22:11 2008/01/07 22:11