블로그스팟 새 글 발행 시 카테고리 'N' 표시 아이콘 만들기 (에센셜 테마)

블로그스팟에 새 글을 발행하면 카테고리에 'N' 아이콘이 표시되는 기능을 구현해 보자. 기본 제공되는 에센셜 테마 기준이다.

블로그스팟 카테고리 'N' 표시 기능 구현

1. CSS (아이콘 디자인)

[테마] > [맞춤설정] > [고급] > [CSS 추가]에 복사해서 붙여 넣는다.

CSS


/* New 배지 스타일 */
.new-badge {
    display: inline-block;
    background-color: #ff4757;
    color: #ffffff;
    font-size: 8px;
    font-weight: bold;
    padding: 1px 3px;
    margin-left: 4px;
    border-radius: 2px;
    vertical-align: middle;
    line-height: 1.2;
}

2. JavaScript (통합 버전)

이 코드는 상단 메뉴(.tabs li a)와 라벨 위젯(.label-name) 양쪽을 모두 훑어서 새 글이 있는 곳에 N을 붙여준다.

코드 중간에 decodeURIComponent로 '한글 카테고리'도 문제없이 작동한다. (내용 추가: 2026.04.24)

</body> 바로 위에 넣어준다.

JavaScript


<script>
// <![CDATA[
(function() {
    const freshHours = 24; // 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 => {
        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>

※ 작동 테스트 방법?

코드를 적용했는데 바로 N 표시가 안 보인다면, 24시간 이내에 발행한 글이 없기 때문일 수 있다. 테스트를 위해 코드 const freshHours = 24; 부분의 숫자를 300으로 잠시 바꿔보자. 최근 12일 이내의 글이 있는 카테고리에 N이 정상적으로 뜬다면 성공!

새 글 발행 후 카테고리에 적용된 'N' 배지 화면

'N' 배지의 유지 시간은?

글이 발행된 시점으로부터 24시간 동안만 유지된다. 만약 노출 기간을 늘리고 싶다면, 코드의 숫자만 늘리면 된다.

2일 동안 표시: const freshHours = 48;
3일 동안 표시: const freshHours = 72;

오늘의 한마디

블로그스팟 꾸미기 열 번째 글, 몇 줄의 코드로 블로그에 생동감을 더해보자! 근데 요즘 심하게 떨어진 내 생동감은 어쩔까?

이 블로그 검색

더한스픽