구글 블로거 테마에 카테고리 메뉴 추가하기

티스토리 블로그를 사용하다 구글의 블로거를 사용해 보신 분들은 메뉴 구성을 직관적으로 쉽게 할 수 있는 시스템이 아니어서 불편함을 느낄 수 있습니다.

하지만 블로거는 나름대로 티스토리와는 다른 잘 알려져 있지 않은 장점들도 많습니다.

대표적인 것이 블로거에서는 Robot.txt를 어느 정도 수정할 수 있습니다. 

어쨌든 이 포스팅은 블로거의 불친절한 스킨을 극복하기 위한 작업 중 하나로 카테고리 메뉴를 만들어 보도록 하겠습니다.

 

1. 가젯 추가

편의상 우측에 사이드바가 있는 테마를 사용 중이며 사이드바에 카테고리를 만든다고 가정합니다.

주의해야 할 것은 이 포스팅처럼 설정하는 경우의 카테고리 개념은 티스토리나 네이버의 카테고리 개념과는 조금 다릅니다. 라벨 또는 레이블이라고 불리는 기능을 이용해 하나의 글이 두 개 또는 세 개 그 이상의 카테고리에 포함될 수 있다는 점입니다. 티스토리의 태그와 비슷한 기능이라고 생각하시면 됩니다.

 

블로거 관리 페이지에서 해당 블로그를 선택한 다음 레이아웃을 선택하고 사이드바 메뉴에서 가젯 추가를 눌러 줍니다.

 

 

 

2. 코드 삽입

가젯 추가 버튼을 누르면 미리 준비된 삽입 가능한 가젯들이 보이게 되는 데, 이 중에서 HTML/자바스크립트 가젯을 클릭해 추가합니다.

 

 

발행되는 포스팅에 붙어 있는 라벨들과 카테고리 메뉴에 있는 라벨들은 영문의 경우 대소문자를 구분하므로 이 부분을 유의해야 합니다.

카테고리로 사용할 제목을 적어주고 아래의 코드를 내용에 복사하여 붙여 넣기 해 줍니다.

 

<ul>
<li><a href="/">HOME</a></li>
<li><a href="search/label/Flutter">Flutter</a></li>
<li><a href="search/label/tool">tool</a></li>
<li><a href="search/label/no code">no code</a></li>
</ul>

 

이 중에서 HOME을 제외한 Fluter, tool, no code 등을 자신의 블로그에서 사용할 주요 카테고리 제목으로 사용하시면 됩니다.

예를 들어 글을 발행할 때 두 개의 라벨을 적어 준 글은 두 개의 카테고리 모두에서 나타나게 됩니다.

 

 

3. 코드 삽입 위젯의 배치 및 저장

사이드 바에서 코드가 삽입된 위젯을 원하는 위치에 배치하고 저장하면 작업이 완료됩니다.

추후에 카테고리를 추가할 경우 이 위젯의 수정을 누른 다음 추가하는 라벨 코드만 더해주면 됩니다.

 

 

작업이 끝나고 저장한 다음 블로그를 새로고침하면 아래와 같이 사이드바에 추가된 카테고리 메뉴가 보이게 되며, 클릭하면 해당 라벨이 있는 글들이 나오게 됩니다.

 

 

4. 기타 라벨 가젯을 활용한 카테고리 구성 방법

위의 방법은 코드에 해박한 사람이라면 좀더 멋지게 꾸며 볼 수도 있겠지만 저 같은 초보자들로서는 별로 추천하지 않습니다. 제가 추천하는 방법은 위의 방법보다 기존에 이미 준비되어 있는 라벨 가젯을 활용하는 방법입니다.

관리 페이지에서 가젯 추가를 누른 다음 라벨 가젯을 추가합니다.

그런 다음 라벨 정렬은 가나다순, 표시는 목록, 글 수 표시, 모든 라벨로 옵션을 설정하면 라벨이 붙어 있는 모든 글이 위에서 카테고리를 만든 경우와 동일하게 생성되며 해당 카테고리의 발행 글수가 자동으로 표시되므로 오히려 더 나은 점도 있습니다.

 

다만, 이렇게 구성할 경우 카테고리를 별로 신경쓰지 않아도 자동화되는 장점이 있는 반면 목록에 HOME이 표시되지 않는 데 이 문제는 또 다른 가젯인 페이지 가젯을 추가하여 해결하면 됩니다.