구글 블로거(Blogger) 위젯 설정 및 해더 만들기 [일본 블로그]

프로젝트/일본 블로그  2016.04.08 00:30

안녕하세요. 명월입니다.
이전 포스트에서 저는 구글 블로그(Blogger)의 템플릿을 초기화하고 Hello world까지 설정했습니다.


링크 - 구글 블로거(Blogger) 초기화 [일본 블로그]


이번에는 초기화된 블로그에 헤더를 작성하겠습니다. 먼저 헤더에 들어갈 위젯을 확인하겠습니다.



헤더에 사용할 위젯은 페이지 헤더이고, 레이아웃은 header에다 추가시키겠습니다. 그런 후에 템플릿에 다시 가서 소스를 확인하면 위젯이 추가된 것을 확인할 수 있습니다.



헤더 스킨 시작에서 종료 부분이 추가되었습니다. 구조적으로 보면 <b:widget> 안에 <b:includable>의 테이블이 있는 것을 확인할 수 있습니다.


Blogger 도움말 - 레이아웃 위젯 태그



위 도움말을 확인해 보면 widget에서는 id='main'인 includable를 호출한다고 나와 있습니다. 다시 main의 태그 안을 보면 if cond='data:image' else로 분할 태그가 있습니다. 이 뜻은 위젯 안에서 이미지를 설정했으면 if 안의 처리를 아니면 else 처리를 하는 것입니다. 저는 이미지설정을 아예 안 하니 깔끔하게 삭제하겠습니다. 저 중에서 필요한 부분은 include의 title 부분이네요.



위처럼 소스를 바꿨습니다. 쉽게 설명하면 id='main'의 includable 태그 안에 title을 넣고 id='title'의 includable 태그 안에는 헤더에서 쓸 태그를 넣었습니다. 이걸 웹으로 표시해서 소스 보기로 확인하겠습니다.



실제 소스에서는 이렇게 변환되네요. 위젯이 별거 아닙니다. 전체적으로 봤을 때 치환자와 숨겨진 데이터 코드가 많아서 그렇지 구조 자체는 어렵지는 않네요. 기본적인 태그가 완성되었으니 CSS를 입혀서 헤더를 만들겠습니다.



현재 들어가면 헤더가 된 것이 보이겠지만 진행 중인 프로젝트이니 보는 시점에 따라 달라 보입니다.
예제 블로그 링크 - 스킨 테스트


댓글 0개가 달렸습니다.
댓글쓰기