구글 블로그 커스터마이징 하는중

블로깅 도구로 WordPress를 선택하지 않은 가장 큰 이유는 바로 커스터마이징을 위해서는 돈을 지불해야 한다는 점 때문이었다.

그에 반해 구글 블로그(Blogger)는 CSS와 HTML을 직접 수정할 수 있다. (약간에 제약이 있긴하다.)

다른 건 다 귀찮아도 남이 만들어 놓은 것 활용해서 이것저것 해보는 것이야 말로 프로그래머의 본능 아니겠는가? 게다가 구글에서 만들어 놓은 건데 활용하는 재미가 아주 솔솔하지 않겠는가? (마치 하둡을 활용하는 것마냥. ㅋ)

일단 기본 제공되는 템플릿과 관리도구로 할 수 있는 것을 최대로 활용하여 블로그를 디자인한 후, 템플릿 메뉴에서 'HTML 편집' 버튼을 클릭하면 내부소스를 직접 수정할 수 있다. 시작 전에 고급 사용자만 수정하라는 경고창이 뜨는데, 나는 초급 사용자이지만 과감하게 무시하고 '계속'을 클릭하였다. HTML 소스에서 구글에서 제공하는 XML namespace(b, data, expr)를 사용하는 element를 확인해보면, 대부분 변수 선언과 CSS 정의를 하고 있는 것을 확인할 수 있다. 여기서는 사실상 CSS를 변경하여 스타일에 변화를 주는 정도의 작업을 할 수 있고, 가젯의 위치를 바꾸거나 제거하기 위해서는 상단의 '가젯 코드 펼쳐서 보여주기' 체크박스를 클릭하여야 한다.

이제 블로그의 원본소스와 템플릿의 HTML 편집 화면을 비교해 가면서, 원하는데로 변경시켜보자. 내가 첫번째로 한 것은 글의 최하단에 존재하는 '작성자'를 글제목 밑으로 이동시키고자 하였다. 레이아웃 편집툴에서 위치를 조절할 수 있게 되어 있지만, 버그인지 실제로 페이지에 반영되지 않아 직접 수정하였다. 크롬의 개발자툴(크롬에서 단축키 F12)로 블로그의 원본 소스가 어떻게 생성되었는지 확인하여 '작성자'에 해당하는 element가 "<span class='post-author"로 시작한다는 것을 파악하였다. 그 다음은 HTML 편집 화면에서 해당 요소를 찾아 원하는 위치로 옮겨주면 된다. 물론 글제목 아래에 해당하는 element가 무엇인지도 파악해야 하고 우측정렬이라든지 여러 스타일 요소들도 변경해주어야 하는 번거로운 작업이다. 하지만 하고 나니 뿌듯하군.

결과는 지금 읽고 있는 이 글의 글제목 아래에 '작성자'와 '작성시간'이 옮겨져 있을 것을 보면 알 수 있을 것이다.

구글 블로그에 블로깅하기... 시작은 순조롭구먼... ㅋ