구글블로그 사용법: 사이드바(Sidebar) 상하좌우 위치 조정과 꾸미는 방법

구글 블로그에서 사이드바 위치를 위/아래 또는 왼쪽/오른쪽으로 이동시키거나 사이드바의 테두리선 배경색 등을 꾸미려면 아래와 같은 코드를 추가함으로써 간단히 할 수 있다.

코드를 추가하는 방법
블로그 대시보드 > 템플릿(Template) > 사용자정의(Customise) > 고급(Advanced) > 코드추가(Add CSS)로 이동하여 입력창에 추가하면 된다.  (자세한 방법은 링크페이지 참조)

#sidebar-right-1{
margin: 1.0em;
margin-top: -30px;

padding:5px 5px 5px 5px;

background: transparent;

border-radius: 7px;
border:1px solid #ccc;
border-bottom:1px solid #bbb;
border-width:1px 1px 1px;
border-bottom:1px line #ddd;
}

ㅇ #Sidebar-right-1 : 블로그에 사이드바를 추가하면 각각의 사이드바에 고유한 이름이 붙여진다. 여기서는 오른쪽(right)에 하나의 사이드바만 추가하였으므로 번호 "1"이 붙은 것이다.

ㅇ 사이드바를 위/아래 또는 왼쪽/오른쪽으로 위치 이동을 시키려면 margin을 조절한다.
margin-top을 별도로 한 것은 사이드바를 위쪽으로 당겨 올리거나 내리기 위한 것이다. 수치를 마이너스(-)로 주면 위쪽을 당겨 올려지고, 반대로 플러스(+)로 주면 아래쪽으로 밀려 내리게 된다.

ㅇ 사이드바의 안쪽 여백을 조절하려면 padding을 조절한다.

ㅇ 사이드바의 배경색을 지정하려면 background에 어울리는 색상을 지정하면되고, 위와 같이 transparent로 지정하면, 블로그의 기본 바탕색(배경색)이 그대로 보여진다.

ㅇ 사이드바의 테두리를 꾸미려면 border의 항목들을 조절하면 된다. border-radius는 테두리의 네 가장자리를 둥글게 다듬는 태그이다.

ㅇ 수치 단위는 px, pt, em, % 등을 쓸 수 있다.

ㅇ 위의 항목들을 다 넣을 필요는 없고, 필요한 항목만 추가하면 된다.