계층적 레이블을 설정하고 활용하는 방법
Blogger는 기본적으로 계층적(하위 레이블 또는 서브카테고리) 구조를 완벽히 지원하지 않지만, 레이블을 효과적으로 활용해 계층적 구조를 시뮬레이션할 수 있습니다. 이를 통해 GanaToday 스타일의 다단계 메뉴(예: Health > Sports, Health > Childcare)를 구현할 수 있습니다. 아래에 Blogger에서 계층적 레이블을 설정하고 활용하는 방법을 단계별로 설명드리겠습니다. 1. 계층적 레이블 개념- Blogger의 레이블은 단일 태그로 작동하지만, 슬래시(/)나 다른 구분자를 사용해 계층을 표현할 수 있습니다.
- 예: "Health/Sports", "Health/Childcare"는 "Health"라는 상위 레이블 아래 "Sports"와 "Childcare"라는 하위 레이블로 해석됩니다.
- 이 방식은 Blogger의 기본 기능 내에서 수동으로 구조를 만들어내는 방법입니다.
- 포스팅 작성:
- Blogger 대시보드에 로그인 후 "새 게시물"을 생성합니다.
- 타이틀: "LAFC vs 산호세 어스퀘이크스 경기 포스트뷰 - 2025년 9월 14일"
- 본문: 경기 관련 내용 작성.
- 레이블 입력란에 계층적 레이블 입력:
- "Health/Sports", "2025-09-14"
- 여러 레이블을 쉼표로 구분: "Health/Sports, 2025-09-14"
- 게시물을 게시합니다.
- 중요: 레이블은 포스팅마다 일관되게 사용해야 하며, 상위 레이블(예: "Health")과 하위 레이블(예: "Sports")을 구분할 수 있는 명명 규칙을 정하세요.
- 단계:
- Blogger 대시보드 > "테마" > "HTML 편집"을 클릭합니다.
- <b:widget id='Label1' type='Label'> 섹션을 찾아 수정합니다.
- 아래 예제 코드를 참고해 계층적 메뉴를 추가합니다.
<b:widget id='Label1' type='Label' locked='false' title='Categories' display='list'>
<b:includable id='main'>
<ul class='label-menu'>
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:label.url'><data:label.name/></a>
<!-- 하위 레이블 확인 및 표시 -->
<b:if cond='data:label.name contains "/"'>
<ul class='submenu'>
<b:loop values='data:labels' var='sublabel'>
<b:if cond='data:sublabel.name startsWith data:label.name + "/"'>
<li><a expr:href='data:sublabel.url'><data:sublabel.name.replace(data:label.name + "/", "")/></a></li>
</b:if>
</b:loop>
</ul>
</b:if>
</li>
</b:loop>
</ul>
</b:includable>
</b:widget>
CSS 추가 (HTML 편집기 내 <head> 태그 아래):
<style>
.label-menu { list-style: none; padding: 0; }
.label-menu li { position: relative; }
.submenu { display: none; position: absolute; background: #fff; border: 1px solid #ccc; min-width: 150px; }
.label-menu li:hover .submenu { display: block; }
</style>
- 설명:
- data:label.name contains "/" 조건으로 슬래시가 포함된 레이블(예: "Health/Sports")을 감지.
- startsWith로 하위 레이블(예: "Health/Sports")을 상위 레이블(예: "Health") 아래 표시.
- :hover로 마우스 오버 시 서브메뉴가 나타나도록 설정.
- 테마를 저장한 후, 블로그에 접속해 레이블 메뉴가 계층적으로 표시되는지 확인합니다.
- 예: "Health"를 클릭하면 "Sports", "Childcare" 같은 하위 레이블이 드롭다운으로 나타나야 합니다.
- 포스팅을 추가하며 레이블을 일관되게 사용해 구조를 유지합니다.
- 장점:
- Blogger의 기본 기능 내에서 계층적 구조를 구현 가능.
- 사용자 정의가 가능해 GanaToday의 다단계 메뉴를 모방할 수 있음.
- 한계:
- 수동으로 레이블을 관리해야 하므로 대규모 콘텐츠에서 복잡해질 수 있음.
- 테마 수정이 복잡할 수 있으며, 오류가 발생할 경우 백업이 필요.
<script>
function filterByLabel(label) {
const posts = document.getElementsByClassName('post');
for (let post of posts) {
if (label === 'all' || post.classList.contains(label.replace(/\//g, ''))) {
post.style.display = 'block';
} else {
post.style.display = 'none';
}
}
}
</script>
결론Blogger에서 계층적 레이블을 구현하려면 슬래시(/)를 사용한 명명 규칙과 테마 수정이 핵심입니다. "Health/Sports"와 같은 방식으로 상위-하위 관계를 정의하고, HTML/CSS로 메뉴를 커스터마이징하면 GanaToday의 구조를 효과적으로 반영할 수 있습니다. 더 구체적인 수정이나 테스트가 필요하면 말씀해 주세요! 웹 검색이 필요할 경우도 알려주시면 도움드리겠습니다.
0 댓글