블로그스팟의 레이아웃의 활용 (다양한 가젯(위젯) 및 HTML/자바스크립트 추가하기) - 구글 블로그 꾸미기 13

구글 블로그(블로그스팟, Blogspot)의 레이아웃

제가 구글 블로그의 레이아웃에서 가젯을 추가하는 방법의 글을 계속 소개하다보니,
매번 이 내용을 반복 작성하는 것보다는,

아예 독립글로 소개하고 링크를 거는 편이 좋을 것 같아 별도로 상세 글을 작성해 둡니다. .

구글 블로그 레이아웃

구글 블로그(블로그스팟, Blogspot)의 레이아웃이 뭔가요?

구글 블로그의 레이아웃은 블로그의 시각적 구성 요소들을 배치하고 관리할 수 있는 편집 도구입니다.
실제 배치되는 화면의 구성요소들을 한 눈에 보고 편집할 수 있는 기능을 제공합니다.

블로그의 화면 배치와 위젯 구성 구조를 설정하는 화면이라고 생각해주세요.

레이아웃 화면의 역할은 무엇인가요?

구글 레이아웃은 여러 섹션으로 구성되어 있습니다.

섹션의 구성은 블로그 테마(스킨)에 의해서 결정됩니다.

레이아웃 화면은 테마에 의해서 결정되어져 있는 섹션들에
가젯(위젯)을 추가하거나 삭제하는 작업을 할 수 있는 도구입니다.

섹션 헤더 영역에는 블로그 제목을 넣을 수 있고,

사이드바에는 프로필, 라벨, 인기/최신 글, 광고배너 등을 배치할 수 있습니다.

메인바디에는 글을 보여주는 방식을 배치하고

푸터에는 저작권 문구 등을 보여 줄 수 있습니다.

드래그 앤 드랍을 지원하여 위의 각 섹션별로 가젯(위젯)을 이동 시킬 수도 있습니다.

레이아웃 편집 화면은 어떻게 접속하나요?

blogger.com으로 접속하신 후 아래 메뉴에서 확인하실 수 있습니다.

구글 블로그 레이아웃 메뉴 위치

제 블로그의 레이아웃 화면은 아래와 같이 구성되어 있습니다.

헤더/ 빌보드/ 메인 바디/ 사이드바 등등으로 구성되어 있습니다.

메인으로 사용하시는 테마(스킨)에 따라서 배치 위치가 변경됩니다.

구글 블로그 레이아웃 화면

설치 가능한 가젯(위젯)은 무엇이 있나요?

아래와 같은 가젯들이 준비되어 있습니다.

레이아웃 화면에서 어느 위치든 상관없이

가젯 추가 버튼을 누릅니다.

가젯 추가 버튼

그럼 사용하실 수 있는 가젯의 목록이 화면에 뜹니다.

필요에 맞게 적당한 위젯을 삽입하시면 됩니다.

예시 : 사이드바에 가장 많이 본글 가젯 달기

제 블로그 상의 사이드바에는 아래와 같이 가장 많이 본 글 가젯을 달 수 있습니다.

(다른 가젯 배치 순서도 참고하세요)

사이드바에 가장 많이 본글 가젯 달기

위의 그림처럼 가장 많이 본 글 위젯을 사이드바 섹션에 위치시키면 됩니다.

(물론 블로그 테마(스킨)에 따라 명칭과 배치 위치는 조금씩 달라집니다.)

Html/자바스크립트 가젯(위젯) 설치

이중에서 Html/자바스크립트 가젯(위젯)은 그 쓰임새의 범위가 넓고,
자유도가 매우 높습니다.

직접 필요한 코드를 코딩을 하거나,
온라인상의 코드를 복사하여 붙여넣어 활용 할 수 있습니다.

제가 제 블로그 상에서 종종 소개하는 html/자바스크립트 코드는 이 가젯을 활용하셔야 합니다.

가젯추가 버튼 누르기

위의 HTML/자바스크립트 를 클릭하시면, 아래와 같은 화면이 나옵니다.

제목은 식별을 위한 가젯(위젯)의 이름을 넣으시고,

콘텐츠 칸에 스크립트 코드를 복사해서 넣으시면 됩니다.

다만, 제목을 넣는 경우에 블로그 화면상에도 표시가 됩니다.
필요에 따라 제목을 넣으시거나 생략하시면 됩니다.

레이아웃 배치상에서 페이지 본문 적당한 섹션에 배치해주세요.

글 읽기와 관련된 코드의 경우 페이지 본문에 배치해야 제대로 작동하는 경우가 많으니 참고하세요.

레이아웃 배치 위치 - 페이지 본문 섹션에 배치

맺음말

구글 블로그(블로그스팟, Blogspot)의 가젯 메뉴는 한 번 손대기 시작하면

이것 저것 재미있게 블로그를 꾸밀 수 있는 요소들을 제공합니다.

해보기 전에는 어렵게 느껴지지만,

금방 HTML/자바스크립트 코드를 찾아다니고, 광고 배너를 배치하고 있는 자신의 모습을 발견하시게
될 것입니다.

한번 도전해보세요.