블로그스팟 카테고리 옆에 전체 글 수 자동 표시하는 방법 (자바스크립트)

블로그스팟 카테고리(라벨)에 전체 글 수 표시하는 방법. 지난 번 올린 'N' 배지 스크립트와 합쳐서, 전체 글 개수가 자동으로 표시되도록 코드를 다듬어 본다. 기존에 구현한 'N' 배지 스크립트와 동일한 fetch 함수 내에서 작동하므로, 중복 로딩 없이 효율적으로 브라우저 자원을 사용한다.

블로그스팟 사이드바 카테고리 (라벨) 전체 글 수 표시 코드 적용 전후 비교

사이드바 카테고리(라벨) 'PICKS' 옆에 전체 글 수 자동 표시하는 방법

※ 내 블로그의 사이드바 카테고리(라벨)의 명칭 'PICKS'에 맞춘 코드이며, 하단의 카테고리 'N' 표시 아이콘 만들기 글을 참조하자.

기존에 </body> 위에 넣었던 'N' 표시 자바스크립트 코드의 .then(data => { 다음에 아래 내용을 추가하면 된다.

구현 원리: 블로그스팟의 JSON피드 데이터(openSearch$totalResults.$t)를 활용하여 블로그의 전체 게시글 수를 실시간으로 가져온다.

블로그스팟 HTML 편집 화면

JavaScript


/* 1. 전체 게시글 수 가져오기 및 표시 */
const totalPosts = data.feed.openSearch$totalResults.$t;
// 스크린샷에서 확인된 .collapsible-title 내의 .title 요소를 선택
const picksTitle = document.querySelector('.collapsible-title .title'); 

if (picksTitle && picksTitle.innerText.includes('PICKS')) {
    // 기존 글자 뒤에 회색으로 개수 표시 (에센셜 테마 톤에 맞춤)
    picksTitle.innerHTML = 'PICKS (' + totalPosts + ')';
}

수정된 통합 코드 예시

기존 코드와 섞일 때 헷갈리지 않도록 구조를 정리해 본다.

JavaScript


<script>
// <![CDATA[
(function() {
    const freshHours = 24; 
    const blogUrl = window.location.protocol + "//" + window.location.hostname;

    fetch(`${blogUrl}/feeds/posts/summary?alt=json&max-results=10`)
    .then(response => response.json())
    .then(data => {
        /* --- 1. 전체 글 개수 표시 로직 (추가된 부분) --- */
        const totalPosts = data.feed.openSearch$totalResults.$t;
        const picksTitle = document.querySelector('.collapsible-title .title'); 
        if (picksTitle && picksTitle.innerText.includes('PICKS')) {
            picksTitle.innerHTML = 'PICKS <span style="font-size: 0.75em; color: #999; font-weight: normal; margin-left: 5px;">(' + totalPosts + ')</span>';
        }

        /* --- 2. 기존 N 배지 로직 --- */
        const entries = data.feed.entry;
        if (!entries) return;
        const now = new Date();
        const newLabels = new Set();

        entries.forEach(entry => {
            const published = new Date(entry.published.$t);
            const diff = (now - published) / (1000 * 60 * 60);
            if (diff <= freshHours) {
                if (entry.category) {
                    entry.category.forEach(cat => newLabels.add(cat.term.trim()));
                }
            }
        });

        const targets = document.querySelectorAll('.tabs li a, .label-name, .Label li a');
        targets.forEach(link => {
            const linkHref = decodeURIComponent(link.getAttribute('href') || '');
            newLabels.forEach(label => {
                if (linkHref.includes('/search/label/' + label)) {
                    if (!link.querySelector('.new-badge')) {
                        const span = document.createElement('span');
                        span.className = 'new-badge';
                        span.innerText = 'N';
                        link.appendChild(span);
                    }
                }
            });
        });
    });
})();
// ]]>
</script>

만약 이름에 상관없이 무조건 표시하고 싶다면?

HTML


/* 이름 매칭 확인 없이 해당 위치에 바로 삽입 */
if (picksTitle) {
    const currentName = picksTitle.innerText; // 현재 설정된 카테고리 이름을 가져옴
    picksTitle.innerHTML = currentName + ' <span style="font-size: 0.75em; color: #999; margin-left: 5px;">(' + totalPosts + ')</span>';
}

오늘의 한마디

전체 글 개수 외에도 각 카테고리 옆에 개별 글 수를 표시하고 싶다면, 블로그스팟 기본 '라벨' 가젯 설정에서 [라벨당 글 수 표시] 옵션에 체크하면 된다.

블로그스팟 라벨당 글 수 표시 옵션 선택 화면

2026.05.03. 내용 추가:

전체 글 수를 괄호 안에 넣고 싶다면, 이 부분만 살짝 바꿔주면 된다.

HTML


if (picksTitle && picksTitle.innerText.includes('PICKS')) {
    // 괄호를 추가하고 색상을 한 단계만 진하게(#777) 조정
    picksTitle.innerHTML = 'PICKS <span style="font-size: 0.8em; color: #777; font-weight: normal; margin-left: 6px;">(' + totalPosts + ')</span>';
}

카테고리 (라벨) 전체 글 수 괄호 안에 넣은 예시

이 블로그 검색

더한스픽