원래 내가 사용하는 스킨은 현재 사용율 1위인 iendev이 만드신 IS BASE ver.0.33이다.
최초에 이를 선택하여 애드센스 광코 코드를 넣고보니 사이드바를 하나 더 추가하고 싶은 마음이 생겼다. 손쉽게 3단 스킨을 선택하여 사용할 수도 있었지만 다시 애드센스 코드를 일일이 삽입해주는 것이 여간 귀찮은 것이 아니었다. 그래서 새로운 사이드바를 추가할 수 있는 방법을 알아보았다. (필자의 말이 아님 원본출처 필자의 말)
먼저 사이드바를 추가하는 과정의 큰 틀을 살펴보겠다.
ⓐ style.css을 편집을 가해야 한다.
ⓑ style.css에서 우선 "새로운 사이드바"을 선언한다.(기존의 사이드바를 참고한다)
ⓒ style.css에서 새로운 사이드바를 구현하기 위한 필요한 요소들을 설정한다.(기존의 사이드바를 참고한다)
ⓓ skin.html에서 추가된 사이드바에 모듈이나, 다른 내용을 추가한다.(기존의 모듈을 참고한다.)
큰틀의 흐름은 여기까지이다. 이제 상세하게 알아보도록 한다.
1. style.css부분을 살펴보아 다음과 같은 부분을 찾아, 빨간색과 같이 새로운 사이드바를 선언한다.
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 .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 .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짜리 세로로 긴 모양의 이미지 광고를 넣을 수 있었다.
출처 : http://blog.sooli.com/tag/%EB%B0%B0%EB%84%88%EB%8B%AC%EA%B8%B0
google_language="ko"; //한국어로 나오게 하기
google_language="ja"; //일본어로 나오게 하기
google_gl = "JA";
