구글 블로그 카테고리 만들기 (라벨 가젯 + 항상 펼치기 + 디자인)

목차

• [1 단계] 라벨(태그) 가젯을 활용해 카테고리 만들기
• [2 단계] 카테고리 항상 펼치기
• [3 단계] 카테고리 디자인
• [참고] 카테고리 분류 작업 요령
• NEW! [입문자용] 가장 간단한 방법
• NEW! [중급자용] 부모 자식 구조 만들기

블로그 글을 분류하는 카테고리는 블로그의 전체적인 구성을 쉽게 알 수 있게 하고, 관심있는 분야를 모아서 볼 수도 있기 때문에 블로그에서 중요한 부분입니다.

막상 구글 블로그에서 카테고리 가젯(도구)을 찾아보니 없는 것 같아 답답했을 거라 생각합니다. 하지만 Blogger에도 카테고리를 만들 수 있습니다. 바로 라벨(태그) 가젯을 활용해서 말이죠.

본래의 라벨 가젯은 태그 기능으로 작은 분류에 사용하도록 하고, 라벨 가젯으로 만든 카테고리는 카테고리 기능으로 큰 분류에 사용하도록 합니다.

구글 블로그에 카테고리를 넣어 봅시다. 블로그 성능을 저하시키지 않는 Blogger에서 제공하는 라벨(태그) 가젯을 활용해서 카테고리를 만드는 전체 과정은 간단하다면 간단하고 복잡하다면 복잡합니다.
[1 단계] [2 단계] [3 단계] 따라만 오세요.

1단계라벨(태그) 가젯을 활용해 카테고리 만들기

우선 아래의 동영상을 참고해서 카테고리의 기본 틀을 만듭니다.
아직 다듬어지지 않은 상태이지만 어떤 방식인지 동영상을 보고 따라해 보면 어느정도 감이 올 겁니다🙂

2단계카테고리 항상 펼치기

카테고리가 항상 펼쳐져 보여지는 것을 원치 않는다면 이 단계는 건너 뛰어도 됩니다🚀 하지만 항상 펼쳐져 있는 것이 일반적입니다. 바로 아래 링크된 페이지의 내용을 참고하면 문제없이 진행할 수 있습니다.

라벨(태그) 가젯 항상 펴기

3단계카테고리 디자인

마지막으로 아래의 검은색 박스 안에 있는 CSS 코드를 추가하면 끝!입니다. CSS 코드를 어떻게 추가하는지 모르신다면, 바로 아래 링크된 페이지의 내용을 참고하세요.

구글 블로그 CSS 코드 추가 / 변경

/* 카테고리 기본 스타일 */
.list-label-widget-content li {
  display: block !important; /* 한 줄에 하나씩 배치 */
  background-color: transparent; /* 배경색 투명하게 */
  border: 0; /* 테두리의 굵기 0 */
  padding: 8px 8px; /* 상하 좌우 안쪽 여백 모두 8px */
}

/* ※블로그 테마가 Soho일 경우 추가한다 */
.list-label-widget-content li:after {
  content: none !important;
}

🍀 /* ... */ 이 부분은 코드에 대한 설명을 적어놓은 것입니다. 삭제해도 괜찮습니다.

카테고리가 적용된 테마 Contempo 보기 카테고리가 적용된 테마 Soho 보기

💡 기타 다른 테마들도 위와 같은 방법 1~3 단계로 접근하면 가능합니다.

💡 카테고리 만들기, 다른 방법 (2020.08.05)

위 내용이 어렵게 생각된다면 '구글 블로그 라벨 100% 활용하기' 페이지를 참고해서 카테고리를 만들어 보세요.

💡 아래에 있는 '카테고리 분류 작업 요령'은 참고로 한번 읽어보세요.
↓↓↓

참고카테고리 분류 작업 요령

블로그의 카테고리는 세세하게 나누지 않는다!

일반적으로 카테고리를 세세하게 분류하다가는 범위가 미묘하게 겹치는 카테고리들이 생겨나기 마련이고 나중에는 작성한 글을 어느 카테고리에 넣어야 되는지 고민해야 하는 상황이 벌어질지도 모르며 명확하게 카테고리가 분류되어 있지 않으면 블로그 방문자 입장에선 블로그 내에 원하는 정보가 없다고 잘못 판단할 수도 있습니다.

그리고 세분화된 하나의 카테고리에 하나의 글만 달랑 있는 경우도 생기게 됩니다.

물론 블로그의 종류나 특성, 게시글 수 등에 따라서 카테고리를 분류하는 기준은 달라지고 카테고리를 세분화하는게 더 나은 경우도 있습니다.

블로그의 카테고리와 라벨(태그)은 용도가 다르다!

일반적으로 블로그 글은 먼저 카테고리로 크게 분류되고 다시 태그로 작게 분류됩니다. 카테고리는 얼추 알아도 블로그를 막 시작했다면 태그는 알기 어렵기 때문에 애당초 카테고리가 있는데 왜 태그가 있나? 라는 의문이 생길 법한데

블로그를 책에 비유하자면 카테고리는 책의 장(chapter)이고 태그는 보통 책의 맨 끝에 있는 색인(index) 같은 거라고 생각하면 좀더 쉽게 이해할 수 있습니다.

태그는 카테고리와 관계없이 어떤 키워드로 글과 글을 연결시킬 수 있는 공통의 키워드이고 SNS(페이스북, 트위터)의 해시태그와는 달리 해시 기호(#)가 없고 띄어쓰기가 가능합니다.

입문자용가장 간단한 방법

앞서 소개한 1~3단계를 하지 않아도 됩니다.

아래 동영상을 확인하세요.

1. 블로그 주소를 입력하세요.
예) https://myblog.blogspot.com

2. 쉼표로 구분해서 라벨을 입력하세요.
예) 과일, 스포츠, 드라마

🍀입문자용 참고 사항

장점은 '쉽다'

단점은 '각 라벨에 해당하는 게시 글의 수를 미리 확인할 수 없다', 예를 들어 '과일(7)' 이렇게는 안 됩니다. 게시 글의 수에 큰 의미를 두지 않는다면 이 방법으로 카테고리를 만드세요!

테마 Contempo, Soho, Emporio, Notable에서 테스트를 완료하였습니다.

중급자용부모 자식 구조 만들기

상위 카테고리와 하위 카테고리를 만들 수 있습니다.

결과물 미리 보기

아래 코드를 'HTML/자바스크립트 가젯'을 통해서 넣으면 됩니다. 넣을 때 제목란은 입력하지 않는 게 자연스럽습니다.

🍀중급자용 참고 사항

• '[입문자용] 가장 간단한 방법'에서 자동으로 만든 코드에 수동으로 코드를 추가함. 모두 자동화하는 거는 다음에 해 보도록 하겠습니다.
• 'JavaScript 접기 펼치기 (샘플 코드) > JavaScript 없이 펼치고 접기'를 참고해서 코딩하였습니다.