구글블로그 사용법: 다이나믹 뷰 사이드바 너비 조절과 자동 펼침

사용법과 팁: 구글블로그, 텀블러, 크롬, 파이어폭스, 애드센스, HTML...

이 블로그에 현재 적용된 템플릿이 다이나믹 뷰(Dynamic View) 템플릿이다. 왼쪽에 있는 사이드바의 너비를 조절하는 방법은 두 가지를 생각해 볼 수 있겠다.

하나는, 사이드바의 기본 너비는 좁게 설정하되, 마우스가 올라가면 펼쳐지게 하는 것이다.
사이드바가 넓어지면 그만큼 본문 폭이 좁아지게 되므로, 작은 모니터 사용자는 글을 읽기가 아주 불편해진다. 따라서, 이 방법이 방문자에게 편할 것 같다.

다른 하나는, 사이드바의 너비를 블로그에 잘 어울리도록 적절한 너비로 고정시키는 것이다.
글의 제목이 길지 않다면, 이 방법도 좋은 것 같다.

방법은
=> 블로그 대시보드 > 템플릿(Template) > 사용자정의(Customise)를 통해 템플릿 디자이너(Template Designer)를 연다
=> 왼쪽 메뉴의 맨 아래에 있는 고급설정(Advanced) > CSS추가(Add CSS)를 클릭하여 입력창을 열고, 입력창에 아래의 CSS를 복사하여 붙여 넣는다

너비 수치는 블로그에 잘 어울리도록 조절하면 된다.
코드를 추가하는 자세한 방법은 이 페이지를 참고하면 된다.


[사이드바 너비 지정: 자동 펼침 코드]

/* Sidebar Auto Expand
-------------------------------------------------------- */
#sidebar:hover {width: 350px;}
#sidebar {-webkit-transition: width 500ms ease-in;z-index: 99;}

※ 위 코드는 Nerds To Geeks 블로그에서 가져옴
※ 수치는 윗쪽에 있는 " 350 " 을 절절하게 조절하면 된다.


[사이드바 너비 지정: 고정 코드]

/* Sidebar Width
------------------------------------------ */
.sidebar #sidebar{width: 250px !important;}
.sidebar #content{margin-left: 250px;}

※ 이 코드의 두 수치는 같아야 한다.