구글블로그 사용법: CSS코드 추가 변경하는 방법 2가지

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

구글 블로그에서 제공되는 템플릿은 여러가지가 있다. 어느 것을 사용하든, 블로그를 꾸미다 보면 CSS코드를 추가하거나 변경하게 된다.

구글 블로그에서 CSS코드를 추가하거나 변경하는 방법은 2가지가 있다. 하나는 템플릿디자이너(Template Designer)에서 하는 방법이고, 다른 하나는 HTML편집창에서 직접하는 방법이다. 첫 번째 방법이 쉽고 편하다.

템플릿디자이너와 HTML편집창으로 가는 경로는 아래 그림과 같다.
=> 블로그 대시보드 > 템플릿(Template)
구글블로그 사용법: 템플릿디자이너와 HTML편집창 가기

1. 템플릿 디자이너에서 CSS코드 추가하기
구글블로그 사용법: 템플릿디자이너에서 CSS코드 추가하는 방법
=> 그림과 같이 고급설정(Advanced) > CSS추가(Add CSS) 를 눌러 입력창을 연다
=> 입력창에 CSS코드를 붙여 넣는다.
그러면, 적용된 모습을 아래쪽의 미리보기 창에서 바로 볼 수 있다. 다이나믹 뷰 템플릿에서는 미리보기가 한 참 시간이 걸린다.

CSS코드를 추가할 때, 나중에 알아보기 쉽도록 하기 위해 주석을 붙이는 것이 일반적이다. 주석은 혼동을 일으키는 등과 같은 문제가 없다면, 굳이 붙이지 않아도 된다.

위의 그림에서 보이는 CSS코드를 예로 들면,
/* Hide Date and Author
------------------------------- */
.publish-info { display: none!important; }

[주석 부분 : 이 주석 부분은 굳이 붙이지 않아도 된다]
/* Hide Date and Author
------------------------------- */

[코드 부분]
.publish-info { display: none!important; }


2. HTML편집창에서 직접 CSS코드 추가하기
구글블로그 사용법: HTML편집창에서 CSS코드 추가하는 방법
위의 그림과 같이 HTML편집창이 열리면,
=> [컨트롤 + F]키를 쳐서 그림에서 연두색으로 표시한 것과 같은 검색창을 연다

=> 검색창에   ]]></b:skin>  을 복사하여 붙여 넣고 엔터키를 쳐서 그림과 같이 ]]></b:skin> 이 있는 위치로 이동한다
=> 추가할 CSS코드를
]]></b:skin> 바로 위에 붙여 넣고 저장(Save template)을 한다

그러면, 아래와 같은 모양이 된다.
주석부분
추가한 CSS코드
]]></b:skin>
주석부분은 혼동을 피하기 위한 것이므로, 혼동의 우려가 없다면 굳이 붙이지 않아도 된다.


※ 위 그림(HTML편집창)의 버튼 기능
[Back] 현재의 HTML편집창에서 빠져 나간다
[Save template] 변경한 내용을 저장한다
[Jump to widget] 특정한 위젯코드가 있는 위치로 이동한다
[Eidt template] HTML 편집모드로 전환한다
[Preview template] 추가 또는 변경된 내용을 적용하여 미리보기 한다
[Revert changes] 추가 또는 변경된 내용을 이전의 상태로 되돌린다

도움이 되었기를 바랍니다.