구글블로그 사용법: 블로그 헤더 이름옆에 그림, 가젯, 위젯, 애드센스, 광고 ... 넣기
구글 블로그의 블로그 이름(이미지) 옆에 애드센스 광고를 넣거나, 트위트나 페이스북 같은 소셜버튼을 달아 놓은 경우를 볼 수 있다.
블로그 헤드 공간을 블로그 이름 공간과 가젯 공간으로 나누어, 블로그 이름 옆에 가젯을 추가하려면 아래와 같이 하면 된다.
1. 헤더에 공간 나누기
=> 블로그 대시보드 > 템플릿(Template) > HTML편집(Edit HTML)을 눌러 위의 그림과 같은 HTML 편집창을 연다.
=> 위젯 바로가기(Jump to widget) > 헤더1(Header1)을 선택하여, 아래와 같은 '헤드(Header1) 코드부분으로 이동한다.
=> 위의 코드 바로 아래에, 아래의 코드를 붙여 넣는다.
=> 그러면, 아래와 같이 된다.
=> 저장하기(Save Template)를 눌러 추가한 내용을 저장한다.
2. 블로그 이름(또는 이미지) 공간과 가젯 공간 속성 설정코드 넣기
CSS 코드를 넣는 방법은 2가지가 있다.
1) HTML 편집창에서 직접 넣기
현재 작업중인 HTML 편집창에서, [컨트롤 + F] 키를 쳐서 '찾기' 입력란을 열고,
" ]]></b:skin> "을 찾은 다음, 아래와 같이, 바로 그 위에 코드를 붙여 넣어면 된다.
=> 저장하기(Save Template)를 눌러 저장한다.
※ 이 방법으로 하면, 템플릿 저장이 잘 안되거나, 저장하는데 시간이 한 참 걸리기도 하므로, 가급적이면, 아래의 두 번째 방법으로 하는 것이 편하다.
2) 템플릿 디자이너에서 넣기
현재 작업중인 HTML 편집창의 저장(Save Template)을 눌러 위 "1. 헤드 공간 나누기"에서 추가한 내용을 저장하고
=> 뒤로가기(Back)를 눌러 이전단계로 빠져 나온다
=> 템플릿(Template) > 사용자정의(Customise)를 눌러 아래와 같은 블로그 템플릿 디자이너(Blogger Template Designer)를 연다
=> 왼쪽 항목에서 고급(Advance) > 세부메뉴의 맨 아래에 있는 CSS 추가(Add CSS)를 눌러 입력창을 연다
=> 입력창에 위의 코드를 붙여 넣고, 블로그에 적용(Apply to Blog)를 눌러 저장한다.
※ 위의 코드에서, 각 공간의 너비(width)와 안쪽 여백(padding), 바깥 여백 (margin)을 알맞게 조정하여 맞추면 된다.
3. 가젯 넣기
블로그 대시보드 > 짜임새(Layout) >를 눌러 레이아웃 페이지로 가보면,
=> 옆의 그림과 같이 블로그 이름(Header) 가젯 아래에 새로운 가젯을 추가할 수 있는 "가젯 추가(Add a Gadget)" 버튼이 추가 되어 있다.
=> 이제는 다른 가젯을 추가하듯이 원하는 가젯을 추가하면 된다.
※ 다른 기능도 마찬가지지만, 이 기능도 다이나믹 템플릿(Dynamic Template)에서는 적용이 되지 않는다.
사용법 어찌
여기에 그림, 가젯, 위젯, 애드센스..... 등 원하는 것을 넣음
블로그 헤드 공간을 블로그 이름 공간과 가젯 공간으로 나누어, 블로그 이름 옆에 가젯을 추가하려면 아래와 같이 하면 된다.
1. 헤더에 공간 나누기
=> 위젯 바로가기(Jump to widget) > 헤더1(Header1)을 선택하여, 아래와 같은 '헤드(Header1) 코드부분으로 이동한다.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='자신의 블로그 이름 또는 이미지' type='Header'/>...</b:widget>
</b:section>
<b:widget id='Header1' locked='true' title='자신의 블로그 이름 또는 이미지' type='Header'/>...</b:widget>
</b:section>
=> 위의 코드 바로 아래에, 아래의 코드를 붙여 넣는다.
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
<div style='clear: both;'/>
=> 그러면, 아래와 같이 된다.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='자신의 블로그 이름 또는 이미지' type='Header'/>...</b:widget>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
<b:widget id='Header1' locked='true' title='자신의 블로그 이름 또는 이미지' type='Header'/>...</b:widget>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
=> 저장하기(Save Template)를 눌러 추가한 내용을 저장한다.
2. 블로그 이름(또는 이미지) 공간과 가젯 공간 속성 설정코드 넣기
#header, body#layout #header {width: 30%; display: inline-block; float: left;}
#header-right, body#layout #header-right {width: 60%; display: inline-block; float: right; padding: 3px 5px 5px 3px;}
#header-right .widget {margin: 0;}
#header-right, body#layout #header-right {width: 60%; display: inline-block; float: right; padding: 3px 5px 5px 3px;}
#header-right .widget {margin: 0;}
CSS 코드를 넣는 방법은 2가지가 있다.
1) HTML 편집창에서 직접 넣기
현재 작업중인 HTML 편집창에서, [컨트롤 + F] 키를 쳐서 '찾기' 입력란을 열고,
" ]]></b:skin> "을 찾은 다음, 아래와 같이, 바로 그 위에 코드를 붙여 넣어면 된다.
여기에 위의 코드
]]></b:skin>
]]></b:skin>
=> 저장하기(Save Template)를 눌러 저장한다.
※ 이 방법으로 하면, 템플릿 저장이 잘 안되거나, 저장하는데 시간이 한 참 걸리기도 하므로, 가급적이면, 아래의 두 번째 방법으로 하는 것이 편하다.
2) 템플릿 디자이너에서 넣기
현재 작업중인 HTML 편집창의 저장(Save Template)을 눌러 위 "1. 헤드 공간 나누기"에서 추가한 내용을 저장하고
=> 뒤로가기(Back)를 눌러 이전단계로 빠져 나온다
=> 템플릿(Template) > 사용자정의(Customise)를 눌러 아래와 같은 블로그 템플릿 디자이너(Blogger Template Designer)를 연다
=> 입력창에 위의 코드를 붙여 넣고, 블로그에 적용(Apply to Blog)를 눌러 저장한다.
※ 위의 코드에서, 각 공간의 너비(width)와 안쪽 여백(padding), 바깥 여백 (margin)을 알맞게 조정하여 맞추면 된다.
3. 가젯 넣기
블로그 대시보드 > 짜임새(Layout) >를 눌러 레이아웃 페이지로 가보면,
=> 옆의 그림과 같이 블로그 이름(Header) 가젯 아래에 새로운 가젯을 추가할 수 있는 "가젯 추가(Add a Gadget)" 버튼이 추가 되어 있다.
=> 이제는 다른 가젯을 추가하듯이 원하는 가젯을 추가하면 된다.
※ 다른 기능도 마찬가지지만, 이 기능도 다이나믹 템플릿(Dynamic Template)에서는 적용이 되지 않는다.