구글 블로그 카테고리 순서 원하는 대로 정렬하기

이번에도 구글 블로그의 불만족스러운 부분을 수정해 보겠다.

예전부터 거슬렸지만 그냥 놔두고 있었던 카테고리 정렬 문제를 해결해 보려고 한다.

구글 블로그의 카테고리 순서는 마음대로 바꿀 수 없다

구글 블로그에 헤더 메뉴를 지원하는 템플릿을 적용하면 이렇게 블로그 상단 헤더 부분에 카테고리를 넣을 수 있다.

이 헤더의 메뉴를 통해서는 블로그의 카테고리 순서를 자유롭게 변경할 수 있다.

그런데 사이드바에 넣은 카테고리는 순서를 마음대로 변경할 수 없다.

구글 블로그의 카테고리 정렬은 이렇게 '가나다순'과 '빈도순'으로 정렬할 수밖에 없기 때문이다.

이 글을 보는 분들은 이 문제를 이미 경험해서 검색을 하다가 여기로 들어왔을 거라 생각한다.

마음 편하게 해결하는 방법

가장 단순한 해결 방법은 어차피 헤더 메뉴를 통해 카테고리 이동을 할 수 있기 때문에 사이드바에 카테고리를 표시하지 않으면 된다.

스트레스 받지 않고 해결할 수 있는 가장 간단한 방법이다.

하지만 사이드바에도 카테고리를 표시하고 싶을 수도 있다.

이전에 다른 곳에서 블로그를 운영했을 때 사이드바에 카테고리가 있었기 때문에 그 인터페이스를 그대로 유지하고 싶다거나, 반드시 스크롤을 위로 끝까지 올려야 카테고리 이동을 할 수 있다는 점이 불편하게 느껴질 수도 있다. (스크롤을 제일 위로 올려주는 버튼이 블로그 우측 하단에 있기 때문에 직접 스크롤을 올릴 필요는 없지만..)

어쨌든 이제 진짜로 카테고리 순서를 바꿔보자.

HTML 코드로 카테고리를 직접 만들자

브라우저에서 [F12] 키를 눌러서 개발자 도구를 열고 사이드바 카테고리의 코드를 찾는다.

해당 코드에서 마우스 오른쪽 클릭을 한 후, Copy > Copy element를 선택해서 코드를 복사한다.

블로그 관리 페이지의 왼쪽 메뉴 '레이아웃'에서 사이드바에 HTML/자바스크립트 위젯을 추가해서 방금 전에 복사했던 코드를 붙여 넣자.

<div class="widget-content list-label">
<ul>
<li>
<a class="label-name" href="https://lab.mistyroom.com/search/label/CSS?&amp;max-results=6">
CSS<span class="label-count">1</span>
</a>
</li>
<li>
<a class="label-name" href="https://lab.mistyroom.com/search/label/GitHub?&amp;max-results=6">
GitHub<span class="label-count">2</span>
</a>
</li>
<li>
<a class="label-name" href="https://lab.mistyroom.com/search/label/HTML?&amp;max-results=6">
HTML<span class="label-count">2</span>
</a>
</li>
<li>
<a class="label-name" href="https://lab.mistyroom.com/search/label/Laravel?&amp;max-results=6">
Laravel<span class="label-count">7</span>
</a>
</li>
<li>
<a class="label-name" href="https://lab.mistyroom.com/search/label/docker?&amp;max-results=6">
docker<span class="label-count">10</span>
</a>
</li>
<li>
<a class="label-name" href="https://lab.mistyroom.com/search/label/php?&amp;max-results=6">
php<span class="label-count">8</span>
</a>
</li>
<li>
<a class="label-name" href="https://lab.mistyroom.com/search/label/%EB%A9%94%EB%AA%A8%EC%9E%A5?&amp;max-results=6">
메모장<span class="label-count">9</span>
</a>
</li>
<li>
<a class="label-name" href="https://lab.mistyroom.com/search/label/%EC%8A%A4%ED%82%A8%20%ED%8E%B8%EC%A7%91?&amp;max-results=6">
스킨 편집<span class="label-count">46</span>
</a>
</li>
<li>
<a class="label-name" href="https://lab.mistyroom.com/search/label/%EC%9A%B4%EC%98%81%20%ED%8C%81?&amp;max-results=6">
운영 팁<span class="label-count">19</span>
</a>
</li>
<li>
<a class="label-name" href="https://lab.mistyroom.com/search/label/%EC%B6%94%EC%B2%9C%20%EC%82%AC%EC%9D%B4%ED%8A%B8?&amp;max-results=6">
추천 사이트<span class="label-count">5</span>
</a>
</li>
</ul>
</div>

수정 전의 코드다.

고쳐야 될 부분들이 몇 군데 있다.

먼저 div 태그의 class 속성에서 widget-content를 삭제할 거다.

여기에 넣는 코드를 감싸게 될 div 태그에 class="widget-content"가 이미 있어서 중복이 될 것이기 때문이다.

그리고 div 태그를 nav 태그로 수정한다.

또 a 태그의 href 속성에서 URL을 절대 경로에서 상대 경로로 바꿀 거다.

https부터 .com까지 삭제하라는 뜻이다.

마지막으로 li 태그들의 순서를 자유롭게 수정하면 된다.

<nav class="list-label">
    <ul>
        <li>
            <a class="label-name" href="/search/label/HTML?&amp;max-results=6">
                HTML
                <span class="label-count">2</span>
            </a>
        </li>
        <li>
            <a class="label-name" href="/search/label/CSS?&amp;max-results=6">
                CSS
                <span class="label-count">1</span>
            </a>
        </li>
        <li>
            <a class="label-name" href="/search/label/php?&amp;max-results=6">
                php
                <span class="label-count">8</span>
            </a>
        </li>
        <li>
            <a class="label-name" href="/search/label/Laravel?&amp;max-results=6">
                Laravel
                <span class="label-count">7</span>
            </a>
        </li>
        <li>
            <a class="label-name" href="/search/label/GitHub?&amp;max-results=6">
                GitHub
                <span class="label-count">2</span>
            </a>
        </li>
        <li>
            <a class="label-name" href="/search/label/docker?&amp;max-results=6">
                docker
                <span class="label-count">10</span>
            </a>
        </li>
        <li>
            <a class="label-name" href="/search/label/%EC%8A%A4%ED%82%A8%20%ED%8E%B8%EC%A7%91?&amp;max-results=6">
                스킨 편집
                <span class="label-count">46</span>
            </a>
        </li>
        <li>
            <a class="label-name" href="/search/label/%EC%9A%B4%EC%98%81%20%ED%8C%81?&amp;max-results=6">
                운영 팁
                <span class="label-count">19</span>
            </a>
        </li>
        <li>
            <a class="label-name" href="/search/label/%EC%B6%94%EC%B2%9C%20%EC%82%AC%EC%9D%B4%ED%8A%B8?&amp;max-results=6">
                추천 사이트
                <span class="label-count">5</span>
            </a>
        </li>
        <li>
            <a class="label-name" href="/search/label/%EB%A9%94%EB%AA%A8%EC%9E%A5?&amp;max-results=6">
                메모장
                <span class="label-count">9</span>
            </a>
        </li>
    </ul>
</nav>

수정한 코드다.

코드에디터를 이용해서 가독성이 좋아지도록 들여쓰기도 했다.

구글 블로그 SEO 최적화, nav 태그와 aria-label 속성으로 검색 엔진 이해도 높이기

구글 블로그(Blogger)의 HTML을 직접 수정하여 검색 엔진 최적화(SEO)를 극대화하는 방법을 알아봅니다. 상단 메뉴부터 사이드바 메뉴, 페이지네이션, 푸터까지 nav 태그로 감싸고 aria-label로 역할을 구분하는 실전 가이드를 확인해 보세요.

그리고 <nav>에 aria-label 속성도 추가해줘야 하는데, 그 내용은 이 포스트를 확인하자.

일단 이렇게 하면 카테고리 순서를 원하는 대로 바꿀 수 있지만, 한 가지 문제가 남아있다.

span 태그 안에 들어가는 숫자는 해당 카테고리에 총 글의 수를 알려주는 숫자가 들어가 있는데, 당연한 이야기지만 이대로는 이 숫자를 앞으로 수동으로 직접 고쳐야 한다.

매번 새 글을 올릴 때마다 여길 들어가서 숫자도 직접 수정하는 것은 매우 비효율적이다.

이 문제를 해결하려면 그냥 카테고리별 글 수를 표시하는 span 태그 자체를 삭제해 버려서 숫자가 표시되지 않도록 하거나, 카테고리별 글 수를 표시하고 싶다면 자바스크립트를 사용해야 한다.

개인적으로 나는 자바스크립트로 카테고리별 글 수가 동적으로 표시되도록 기능을 구현했다.

하지만 그 방법은 그냥 올리지 않으려고 한다.

구글 블로그스팟을 동료들과 함께 외롭지 않게 운영할 블로거를 찾습니다.

외롭게 구글 블로그(블로거 or 블로그스팟)를 운영하는 동료를 찾습니다. 직접 작성한 콘텐츠로 소통하고 정보 공유할 오픈채팅방에 들어오실 분들을 기다립니다.

본인의 콘텐츠는 본인이 직접 작성하는 블로거 동료를 모집하고 있다.

여기에 정원 30명이 다 차서 정원을 늘리게 되면 그 방법을 올리도록 하겠다.

지금은 어차피 블로그에 글을 올려도 도움 받았다고 고맙다는 댓글도 없고..

아무도 보지 않는 것 같아서 올리기 귀찮다. 🙄

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.