구글블로그 사용법: 포스트 푸터 (post footer) 꾸미기 - 항목설정, 순서 정렬, 여백, 폰트, 테두리 등

구글 블로그의 포스터 푸터(post footer)에 표시할 수 있는 항목들은 다양하고 또 표시하거나 숨기는 것도 쉽게 잘 되어 있다. 포스터 푸트가 페이지에 잘 어울리게 꾸미는 방법을 정리해 본다.

[1. 표시하거나 숨길 항목 선택과 순서 지정]

어떤 항목을 표시하고 숨길 것인지 그리고 순서를 어떻게 할 것인지는 블로그 설정에서 할 수 있고, 클릭만으로 할 수 있게 잘 되어 있다.

> 블로그 대시보드 > 레이아웃(Layout) > 블로그 포스트 가젯 (Blog Posts gadget)의 오른쪽 아래에 있는 편집(Edit)을 클릭한다. 그러면 아래 그림과 같은 '블로그 글 설정 (Configure Blog Posts)' 창이 열린다.
> 설정창에서 표시하고자 하는 항목을 클릭하여 체크(v)를 한다
> 창의 아래 쪽에 있는 '항목 정렬 Arrange Items'에서  항목을 마우스로 끌어서 순서나 위치를 조절한다
> 그 아래에 있는 [저장 Save] 버튼을 눌러 저장을 한다
구글블로그 사용법: 포스트 푸터 (post footer) 꾸미기와 순서 정렬, 여백 등 조절하는 방법

[2. 포스터 푸트 색상 설정하기]

포스터 푸터의 글자색, 배경색, 테두리색은 템플릿디자이너에서 간단히 할 수 있다. 아래의 그림을 보면 금방 이해가 될 것이므로 설명은 생략하기로 한다.
> 블로그 대시보드 > 템플릿(Template) > 사용자 설정(Customise)을 누르면 아래 그림과 같은 템플릿 디자이너 창이 열린다.
구글블로그 사용법: 포스트 푸터 (post footer) 꾸미기와 순서 정렬, 여백 등 조절하는 방법

[3. 포스터 푸트 꾸미기: 글자크기와 종류, 여백, 테두리선 등]
포스터 푸트의 글자 종류, 글자 크기, 여백 등을 세부적으로 꾸미려면 아래의 CSS코드를 넣어주면 된다.

[포스터 푸트 꾸미는 CSS 코드 예]
.post-footer {margin-left: 10px;}
.post-footer-line-1 {padding: 7px;}
.post-footer-line-2 {color: green;}
.post-footer-line-3 {text-decoration;}

위 첫번째 그림의 아래쪽에 있는 포스터 푸트 영역을 보면 세 줄로 영역이 나뉘어 있음을 알 수 있다. 위 CSS코드의
첫번째는 포스터 푸트 영역 전체에 적용되는 코드이고
~~ -1 은 포스터 푸트영역 가운데 첫번째 줄에 적용되고
~~ -2 는 두번째 줄에 적용이 되고
~~ -3 은 세번째 줄에 적용이 된다.

꾸미고자 하는 영역에 맞는 코드에 폰트 여백 테두리 등의 속성인자를 추가하고 알맞게 설정하여 넣어 주면 된다. (CSS코드를 추가하는 방법은 별도로 설명해 놓은 페이지 참초) 


도움이 되기를 바랍니다.