구글블로그 사용법: 라벨가젯(Label gadget) 꾸미기 - 여백 마진 패딩 폰트 테두리 배경 색상 등

구글블로그의 라벨가젯(Label Gadget)이 어떻게 보면 좀 멋이 없는 듯하다. 그래서인지 라벨가젯을 아예 새로 만들어 붙이는 블로거들이 많이 보이고 HTML 코드도 많이 있다.

굳이 별도로 만들지 않더라도, 간단한 CSS 코드 추가만으로도 어느 정도까지는 블로그에 어울리도록 꾸밀 수 있다. (CSS코드를 추가하는 방법은 링크 페이지 참조)

아래 그림의 왼쪽은 구글블로그 심플템플릿의 기본 가젯 모습이고, 아래는 배경색, 테두리 그리고 글자크기의 세 항목만 추가하여 꾸민 예이다.

1. 라벨가젯 꾸미기

[라벨가젯을 꾸미는 CSS 코드]

#Label1 { ~~~~~ }

ㅇ Label1의 수자 "1"은 첫번째로 추가한 라벨가젯을 지칭한다. 블로그에 라벨가젯을 여러개  달았다면, 첫 번째 단 것은 " Label1 ", 두 번째 단 것은 " Label2 ".... 식으로 번호가 붙여진다.

ㅇ ~~~ 부분에는 HTML에서 쓸 수 있는 여러가지 속성들을 추가하여 꾸미면 된다. 아래는 흔히 쓰이는 속성들을 보인 것이다.

border: 3px solid #82D200;  <= 테두리
border-radius: 0px;   <= 테두리 둥글게
background: #E0FFAE;    <= 배경색
margin: 0px;   <= 바깥 여백
padding: 7px;   <= 안 여백
font-size:1.3em;  <= 글자 크기
font-family: 바탕;   <= 글꼴
text-decoration: none;  <= 글자 꾸밈

ㅇ 위와 같이 하면, 왠 만한 것은 꾸밀 수가 있다. 하지만 color 속성을 주어도 글자의 색상은  바뀌지 않는다. 라벨에는 링크가 걸리기 때문에, 블로그의 기본 링크 속성이 그대로 적용되기 때문이다. 글자의 색상도 바꾸려면 아래와 같이 하면 된다.


2. 라벨가젯 꾸미기 - 폰트 색상도 바꾸기

[라벨가젯을 꾸미는 CSS 코드 - 폰트 색상도 바꾸기]

#Label1 {margin: 0px; padding: 10px; border: 1px dashed #bbb; border-radius:5px; ~~~}
#Label1 a {~~~}
#Label1 a:visited {~~~}
#Label1 a:active {~~~}
#Label1 a:hover {~~~}

#Label1 h2 {~~~}

ㅇ Label1 h2 는 라벨 가젯 타이틀 속성을 제어한다.
ㅇ ~~~ 부분은 위에서와 같이 꾸미고자 하는 속성들을 추가하여 블로그에 어울리도록 조절하면 된다.
ㅇ 위에서는 적용되지 않는 color도 지정할 수 있으므로 아래와 같이 색상을 주면 된다.
color: #0055E5;
ㅇ CSS코드를 추가하는 방법은 위와 같이 블로그 템플릿디자이너에서 하면 쉽다.