구글 블로그 카테고리 순서 마음대로 바꾸기

구글 블로그에선 아쉽게도 카테고리 순서를 알파벳 순과 포스트 수로만 정렬이 가능하다. 따라서 원하는 순으로 카테고리 라벨을 두려면 코드를 좀 만져야 한다.

1. [대시보드 - 레이아웃 - 사이드바(하단)]에서 'HTML/자바스크립트' 가젯 추가를 선택한다.

 

2. 창이 뜨면 제목은 비우고 콘텐츠 란에 아래 코드를 넣어준다.

 

<ul>
  <li><a href="블로그 메인 URL 주소/search/label/라벨1">라벨1</a></li>
  <li><a href="블로그 메인 URL 주소/search/label/라벨2">라벨2</a></li>

          ⋮

          ⋮
  <li><a href="블로그 메인 URL 주소/search/label/라벨3">라벨3</a></li>
</ul>

 

* <li></li> 라인을 원하는 순서로 원하는 만큼 배치시킬 수 있다. 새로운 라벨은 수동으로 추가해야 한다.

 

3. [대시보드 - 레이아웃 - 사이드바(하단)]에서 '라벨' 가젯 추가를 선택한다. 창이 뜨면 '라벨당 글 수 표시' 옵션을 키고 저장한다. (사용하지 않을 임의의 위젯이기에 다른 것들은 신경 쓸 필요 X)

 

4. 사이드 바에 있는 'HTML', '라벨' 가젯 위에 마우스를 대고 각각 [우클릭 - 검사]를 통해 해당 위젯의 id를 추출한다.

 

</div class="widget html" data-version="2" id="HTML1">
<div class="widget Label" data-version="2" id="Label1">

 

5. 추출한 id를 아래 진한 볼드체 부분에 기입하고 코드 전체를 </body> 바로 윗단에 넣어주자;1)

 

    <!-- Category Number of Posts Start -->
    <script>
//<![CDATA[
var cate = document.getElementById("HTML1").querySelectorAll("li");
var label = document.getElementById("Label1").querySelectorAll("li");
var label_cnt = document.getElementById("Label1").querySelectorAll("li span");

for(var i = 0; i < label.length; i++){
 for(var j = 0; j < cate.length; j++){
 
  if(label[i].querySelector("a").getAttribute("href") == cate[j].querySelector("a").getAttribute("href")) {
   var cnt = label_cnt[i].innerHTML;
   cate[j].querySelector("a").outerHTML = cate[j].innerHTML + " " + "(" + cnt + ")";

   label[i].outerHTML = "";
        }
    }
}
//]]>
    </script>
    <!-- Category Number of Posts End -->

 

1) 이 자바 스크립트 코드는 라벨별 포스트 개수를 '라벨' 위젯에서 가져와 'HTML' 위젯에 표시해주는 역할을 한다.

 

2022. 3. 16.

 

https://wlsfl1.blogspot.com/

 

참조 : https://kuzuro.blogspot.com/2018/05/2-htmljavascript.html

 

구글 블로그 한국형 카테고리 디자인 CSS 코드

구글 블로그 하위 카테고리 만들기