블로그 위쪽(헤더/header) 카테고리 정돈하기

이렇게 되면 완성되었다고 볼 수 있겠습니다.

 보통 블로거 템플릿을 변경해주는 사이트에서 템플릿을 바꿔준 후에 위쪽 헤더(header) 부분에 자기가 실제로 쓰는 카테고리를 지정해줘야 합니다. 지정해줘야 블로그를 검색하기 더 쉬워지고, 만약 지정해주지 않으면 그 부분은 아무런 의미 없는 부분이 되기에(눌러도 뭐 뜨는 것이 없으니) 바꿔주는 것이 필수적입니다. 다소 귀찮은 작업인데 그렇다고 해서 저 부분을 아예 지워버릴 수도 없습니다. 어떤 분은 귀차니즘 때문인지 바꿔주지 않고 그대로 쓰시는 분도 있긴 했습니다만… 하여튼 그런 연유로 최근에 블로그 헤더를 정돈했습니다.

 하는 법은 다음과 같습니다. 일단 코드를 찾아야 합니다. '탬플릿' -> 'HTML 편집'을 누른 후 ctrl + f으로 검색을 합니다. <div class='menu-nbt-menu-container'> 부분을 검색합니다. 꼭 저 부분 전체가 아니라 container 등 일부만 검색해도 찾다보면 나옵니다. 찾은 후 밑으로 내리다보면 제가 실제로 헤더를 설정한 부분이 있습니다.


<li><a href='http://tothetopclass.blogspot.kr/search/label/%EA%B8%B0%ED%83%80'>기타</a>
<ul class='sub-menu'>
<li><a href='http://tothetopclass.blogspot.kr/search/label/%EA%B7%BC%ED%99%A9%20%EB%B0%8F%20%EC%9E%A1%EB%8B%B4'>블로그 관련 이야기</a></li>
  <li><a href='http://tothetopclass.blogspot.kr/search/label/%EB%B8%94%EB%A1%9C%EA%B7%B8%20%EA%B4%80%EB%A0%A8%20%EC%9D%B4%EC%95%BC%EA%B8%B0'>근황 및 잡담</a></li>
</ul>
</li>


*너무 난잡해서 이해가 안가신다면 밑에 다소 간략하게 쓴 부분을 보신다면 도움이 되실 것입니다.

 설명 들어갑니다. 가장 윗 줄이 가장 넓은 범주를 보여주는 부분입니다. 여기서는 '기타' 카테고리를 보여줍니다. 그 밑에 ‘sub-menu’라는 부분이 있는데, 저 부분을 채워줘야 '기타'의 하위 카테고리를 표시할 수 있을 것입니다.
 일단 저기 어지럽게 URL이 있는 부분이 있습니다. 부분은 아마 처음 상태에서는 <li><a href=’#'>IT 관련</a> 식으로 #으로 표시되어 있을 것입니다. 티스토리에서는 저 곳에 실제 쓰는 카테고리를 적어주면 쉽게 해결되지만 구글 블로거는 저 부분에 직접 URL을 넣어줘야 합니다. 블로거는 기본적으로 태그가 카테고리의 기능을 하기 때문에 태그 부분을 누른 후 나오는 URL을 저기에 넣었습니다.
 그리고 기타 혹은 블로그 관련 이야기 라고 되어 있는 부분이 있습니다. 저 부분이 실제로 화면에 표시되는 글자입니다. 그렇기에 저는 제 카테고리를 저 부분에 입력해둔 것입니다.


<li><a href='IT 관련 URL'>IT 관련</a>
<ul class='sub-menu'>
<li><a href='어플리케이션 리뷰 URL'>어플리케이션 리뷰</a>
<ul class='sub-menu'>
<li><a href='전체 리뷰 URL'>전체 리뷰</a></li>
<li><a href='MY STYLE URL'>MY  STYLE</a></li>
<li><a href='내가 쓰는 어플리케이션 URL'>내가 쓰는 어플리케이션</a></li>
</ul>
</li>
<li><a href='IT 관련 리뷰 URL'>IT 관련 리뷰</a></li>
<li><a href='IT 관련 이야기 URL'>IT 관련 이야기</a></li>
</ul>
</li>


 원래 ‘ ’ 부분은 URL을 적어둬야하지만 지금은 편의상 간단하게 썼습니다. 위에서 두 번째와 네 번째 줄에 ‘sub-menu’가 각각 있음을 알 수 있습니다. 즉 하위의 하위 카테고리를 표시해둘 때 쓰는 기능입니다. 똑같이 하면 되는 것이 아니냐고 할 수 있지만 하나 헷갈릴 수 있는 부분이 있어서 따로 설명했습니다. 그냥 하위 카테고리만 쓸 생각이라면

<li><a href='IT 관련 리뷰'>IT 관련 리뷰</a></li>

 같은 식으로 <li> 와 </li>를 한 줄에 바로 쓰지만 제가 따로 표시한 부분에서는 </li>가 끝에 있음을 알 수 있습니다(<li><a href='어플리케이션 리뷰'>어플리케이션 리뷰</a>로 시작해서 끝~에 </li>가 있죠). 즉, 맨 처음에 하위 카테고리를 지정해둔 부분을 똑같이 한다고 생각하면 간단합니다.

 참… 최대한 글을 쉽게 쓰려고 했는데 정말 어렵군요… 그래도 말이 복잡하지 실제로 복잡하지는 않기에 몇 번 하다보면 간단하게 하실 수 있을 듯합니다. 감사합니다.