구글 블로그에 2번째 사이드바를 추가하는 법
Posted 2007/06/22 21:34블로그에 2번째 사이드바를 추가하는 법
티스토리 레이아웃 변경은 많이 볼 수 있지만 구글 블로그의 레이아웃 변경에 대한 얘기가 별로 없어서 한 번 다뤄봤다. 티스토리 유저는 단지 아이디어만 차용하면 될 것 같다.
블로거의 템플릿에서 레이아웃의 구성이 3개의 colume으로 되어있으면서 2개의 사이드바를 양쪽에 배치하는 방법에 대한 소개이다. 
1. 우선 3 column으로된 template을 다운받는다. (예: Webtalks Templates)
또는
2. Template HTML을 무작정 고치기
2. 구조와 레이아웃에 대한 이해
먼저 blog의 Layout이 몇 개의 section으로 구성되어 있다는 것을 머리에 넣고 가자.
표준적인 blogger 템플릿은 헤더 섹션, 사이드바 섹션, 메인 섹션 그리고 푸터 섹션으로 되어 있다. Blogger는 이런 섹션들 안에다 위젯(Widgets)들을 집어넣는데 이것들이 바로 템플릿 탭에서 우리가 선택할 수 있는 페이지 요소들이다.
그럼 표준적인 블로거의 구조를 살펴보자. 전혀 수정하지 않은, 새로운 블로그를 만들면 처음에는 이런 모습을 가지고 있다. 이 레이아웃은 4개의 섹션으로 되어 있는데 헤더, 메인(게시된 블로그 포함), 사이드바 그리고 푸터 이다. 그리고 HTML은 다음과 같다.
010: <body>
020: <div id='outer-wrapper'>l<div id='wrap2'>
030: <!-- skip links for text browsers -->
040: <span id='skiplinks' style='display:none;'>
050: <a href='#main'>skip to main </a>
060: <a href='#sidebar'>skip to sidebar</a>
070: </span>
080: <div id='header-wrapper'>
090: <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
100: <b:widget id='Header1' locked='true' title='Second Sidebar (Header)' type='Header'/>
110: </b:section>
120: </div>
130: <div id='content-wrapper'>
140: <div id='main-wrapper'>
150: <b:section class='main' id='main' showaddelement='no'>
160: <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
170: </b:section>
180: </div>
190: <div id='sidebar-wrapper'>
200: <b:section class='sidebar' id='sidebar' preferred='yes'>
210: <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
220: <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
230: </b:section>
240: </div>
250: <!-- spacer for skins that want sidebar and main to be the same height-->
260: <div class='clear'> </div>
270: </div> <!-- end content-wrapper -->
280: <div id='footer-wrapper'>
290: <b:section class='footer' id='footer'/>
300: </div>
310: </div></div> <!-- end outer-wrapper -->
320: </body>
라인 10-320은 body tag이다. 모든 코드는 이 두 코드 사이에 써야 한다.
라인 20-310은 두 개의 wrapper를 위한 div tag인데, wrapper는 외부 wrapper라고 한다.
wrapper는 wrap2라고도 한다. CSS에서는 이런 wrapper를 위한 폰트와 색깔, 그리고 다른 스타일을 정의할 수 있다.
라인 80-120은 헤더부분이다. 구조를 보면 80-120이 div wrapper이고, 그 안에 90-110이 section wrapper이고 라인100이 헤더 자체를 가지고 있는 위젯이다.
라인 130-270은 컨텐트 부분이다. 여기에서 컨텐트라 함은 블로그 게시물과 사이드바 이다. 라인 130-270의 div-wrapper는 컨텐트 wrapper라고 하고, 이 안에 있는 2개의 wrapper는 라인140-180을 메인 wrapper, 라인 190-240을 사이드바 wrapper라고 한다.
메인 wrapper안에 라인 150-170부분에 메인섹션이 있는데 여기에 블로그 위젯이 있고 이 위젯에 게시된 내용이 들어있다..
사이드바 wrapper의 안쪽에 라인 200-230부분의 사이드바 섹션이 있는데 여기에 아카이브 위젯과 (라인 210) 프로파일 위젯(라인 220)이 있다.
그리고 마지막으로 라인 280-300에 Footer 부분이 있다..
여기까지가 구조부분에 대한 개략적인 설명이었고, 다음은 이 템플릿의 형태를 변경하는 방법을 알아보자.
#outer-wrapper {
width: 660px;
padding: 10px;
....... }
#main-wrapper {
width: 410px;
float: left;
....... }
#sidebar-wrapper {
width: 220px;
float: right;
........ }
외부 wrapper부분은 길이가 660픽셀이다. 패딩이 10픽셀로 세팅되었으므로 외부 wrapper내의 모든 것은 경계에서부터 10픽셀씩 떨어진다. 그러므로 총 660픽셀에서 20을 뺀 640픽셀이 메인wrapper와 사이트바 wrapper 부분으로 배정된다.
메인wrapper는 410픽셀을 차지하고 좌측을 기준으로 정렬된다. 사이드바wrapper는 220픽셀을 차지하는데 우측으로 정렬된다.
메인 warpper와 사이드바 wrapper는 410+220 = 630픽셀의 영역을 차지한다. 그러므로 가운데에는 640-630=10 픽셀의 공간이 생긴다. 그러므로 두 번째 사이드바에서 좀 줄이고 싶으면 공간을 만들기 위해서 뭔가를 해야만 한다. 현 상태에서 그냥 한다면 사이즈가 맞지 않는다. .
두번째 사이드바 추가하기
우선 템플릿에 두 번째 사이드바를 추가할 것이다. 그 다음에 CSS를 추가하고 페이지에 그것을 맞출 것이다. <!--[if !supportLineBreakNewLine]--> <!--[endif]-->
Step 1: 템플릿을 백업하라.
Step 2: 오른쪽 사이드바를 unique하게 만든다.
라인 190-200을 수정한다.
190: <div id='right-sidebar-wrapper'>
200: <b:section class='sidebar' id='right-sidebar' preferred='yes'>
CSS style-sheet에서 "#sidebar-wrapper" 를 "#right-sidebar-wrapper"로
수정한다. 여기에서 템플릿을 저장하고 블로그 보기를 하면 잘 됐을 것이다. <!--[if !supportLineBreakNewLine]--> <!--[endif]-->
Step 3: 새로운 코드를 추가해서 왼쪽 사이드바를 만든다.
131: <div id="'left-sidebar-wrapper'">
132: <b:section class="'sidebar'" id="'left-sidebar'" preferred="'yes'/">
133: </b:section></div>
템플릿을 저장하고 페이지요소탭을 눌러보면 다음 그림과 같을 것이다..
헤더밑과 게시물 위 사이에 새로운 섹션이 생긴 것을 볼 수 있다. 그러나 아직 화면의 왼쪽 정렬이 되지 않았다. 그러므로 여기에CSS를 약간 추가해야 한다.
Step 4: 왼쪽 사이드바에 CSS 추가하기.
ICSS-style sheet에 다음 코드를 추가한다.
#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
그러면 페이지 레이아웃 탭이 다음과 같이 보일 것이다. :
이제 사이드바 섹션은 왼쪽정렬이 됐다. 그런데 오른쪽 사이드바가 갑자기 게시물 밑으로 내려가 버렸다. 이것은 2개의 사이드바와 메인섹션의 넓이가 840픽셀을 넘었기 때문이다. 뿐만 아니라 외부 wrapperd의 넓이인 660픽셀 보다도 더 크다..
Step 5. 외부wrapper와 헤더 wrapper의 넓이를 변경한다.
CSS-style sheet에서 #header-wrapper 와 #outer-wrapper definitions을 찾아서 그 넓이를 660 에서 860으로 변경한다.
Step 6. 페이지 요소를 추가한다.
최종적으로 왼쪽 사이드바에 페이지요소를 추가한다. 그러면 블로그 레이아웃이 다음과 같이 보일 것
이다.
'재테크,금융,주식투자 > 애드센스 최적화' 카테고리의 다른 글
| 애드센스 추천단위 버전 2.0 무엇이 바뀌었나 (1) | 2007/07/18 |
|---|---|
| 애드센스로 한 달에 얼마나 벌 수 있을까 (0) | 2007/07/07 |
| 구글 블로그에 2번째 사이드바를 추가하는 법 (0) | 2007/06/22 |
| 애드센스 많이 버는 필승·노하우 (0) | 2007/06/22 |
| 하루 1만명이 방문하는 블로그를 만드려면 (0) | 2007/06/22 |
| 고수의 블로그의 홍보전략 (0) | 2007/06/11 |
- Filed under : 재테크,금융,주식투자/애드센스 최적화
- Tag : 레이아웃변경
- Comment Trackback
