🛠️ [최종 가이드] 블로그스팟(Blogger)에 Google 트렌드 스크롤 뉴스 티커 삽입하기

📌 노동 없이 상단 영역을 '실시간 트렌드'로 채우는 법

Google 트렌드 실시간 검색어(RSS 피드)를 블로그 상단에 흘러가게 배치하는 것은 독자의 시선을 사로잡고 시의성 있는 주제로 트래픽을 유도하는 가장 효과적인 방법 중 하나입니다.

이 가이드는 복잡한 API 연동 없이, 블로그스팟의 HTML/JavaScript 위젯과 맞춤형 CSS/JS 코드만을 사용하여 상단에 전문적인 뉴스 티커(Ticker)를 구현하는 최종 절차입니다.

준비물	내용
RSS 피드 URL	대한민국 일별 인기 검색어 RSS 주소: https://trends.google.com/trends/trendingsearches/daily/rss?geo=KR
핵심 기술	HTML (구조) + CSS (모양) + JavaScript (부드러운 스크롤)

---

1단계: CSS 코드 삽입 (스크롤바의 모양과 틀 잡기)

스크롤바의 디자인과 애니메이션 틀을 잡는 CSS 코드를 블로그스팟 테마에 추가합니다.

1. [블로그스팟 관리] → [테마] → **[HTML 수정]**으로 이동합니다.

2. <b:skin> 태그 내부 또는 </head> 태그 위에 다음 CSS 코드를 복사하여 붙여넣습니다.

CSS

/* 실시간 검색어 스크롤바 CSS */
.trending-ticker-wrap {
    display: flex; 
    align-items: center; 
    height: 35px; /* 높이 설정 */
    background-color: #f7f7f7; /* 배경색 */
    padding: 0 15px;
    overflow: hidden; /* **필수**: 넘치는 내용 숨김 */
    border-bottom: 1px solid #ddd; 
    margin-bottom: 20px; 
}

.trending-ticker-wrap span {
    font-weight: bold;
    color: #e60000; /* 강조 색상 */
    margin-right: 15px;
    flex-shrink: 0; 
}

#scrolling-keywords {
    width: 100%;
    overflow: hidden; 
    position: relative;
}

#scrolling-keywords ul {
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap; /* 줄 바꿈 방지 */
    /* JS가 transform을 제어합니다. CSS 애니메이션은 여기서 제거됩니다. */
    cursor: pointer; 
}

#scrolling-keywords li {
    display: inline-block;
    margin-right: 30px;
}

#scrolling-keywords a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
}

3. 우측 상단의 [저장] 버튼을 눌러 CSS 변경 사항을 저장합니다.

---

2단계: HTML 구조 및 JavaScript 코드 삽입 (데이터와 움직임 구현)

이 단계에서는 HTML 구조와 스크롤링을 담당할 JS 코드를 HTML/JavaScript 위젯 하나에 모두 넣습니다.

1. [블로그스팟 관리] → [레이아웃]으로 이동합니다.

2. 스크롤바를 위치시킬 영역(예: 'Header' 아래)에서 [가젯 추가]를 클릭합니다.

3. 목록에서 [HTML/JavaScript]를 선택합니다.

4. 위젯 설정 창의 '콘텐츠' 영역에 다음 HTML 및 JS 코드 전체를 복사하여 붙여넣습니다.

📜 HTML 및 JavaScript 코드

HTML

<div class="trending-ticker-wrap">
    <span>📈 Google 실시간 트렌드</span>
    <div id="scrolling-keywords">
        <ul>
            <li><a href="https://www.google.com/search?q=키워드1" target="_blank">오늘의 탑 주제 1</a></li>
            <li><a href="https://www.google.com/search?q=키워드2" target="_blank">Google 트렌드 2위</a></li>
            <li><a href="https://www.google.com/search?q=키워드3" target="_blank">인기 키워드 3위 (최신)</a></li>
            <li><a href="https://www.google.com/search?q=키워드4" target="_blank">급상승 이슈 키워드</a></li>
            <li><a href="https://www.google.com/search?q=키워드5" target="_blank">추가 인기 검색어</a></li>
            </ul>
    </div>
</div>

<script>
    function startTickerScroll() {
        const scrollContainer = document.getElementById('scrolling-keywords');
        if (!scrollContainer) return;

        const ul = scrollContainer.querySelector('ul');
        if (!ul) return;

        // 1. 리스트 내용 복제 (끊김 없는 루프를 위함)
        ul.innerHTML += ul.innerHTML;

        let position = 0;
        // 스크롤 속도 설정 (숫자가 작을수록 느리고 부드러움)
        const scrollSpeed = 0.5;
        
        // 원본 콘텐츠의 너비 계산
        const totalContentWidth = ul.scrollWidth / 2;

        function scrollTick() {
            // 2. 콘텐츠를 왼쪽으로 이동
            position -= scrollSpeed;
            
            // 3. 루프 처리: 원본 목록이 지나가면 위치 리셋
            if (position < -totalContentWidth) {
                position += totalContentWidth; 
            }
            
            // CSS Transform으로 위치 변경 (부드러운 애니메이션)
            ul.style.transform = `translateX(${position}px)`;

            requestAnimationFrame(scrollTick);
        }

        // 마우스 오버 시 멈춤, 마우스 아웃 시 다시 시작 (UX 개선)
        scrollContainer.addEventListener('mouseenter', () => {
            ul.style.animationPlayState = 'paused';
        });
        scrollContainer.addEventListener('mouseleave', () => {
            ul.style.animationPlayState = 'running';
        });

        // 애니메이션 시작
        requestAnimationFrame(scrollTick);
    }

    // 페이지 로드 후 실행 보장
    if (document.readyState === 'loading') {
        window.addEventListener('load', startTickerScroll);
    } else {
        startTickerScroll();
    }
</script>

5. [저장] 버튼을 클릭하여 위젯을 저장합니다.

---

3단계: 최종 확인 및 데이터 관리

1. [레이아웃] 페이지에서 위젯이 원하는 상단 위치에 있는지 확인하고, [저장]을 눌러 최종 배치합니다.

2. 블로그를 새로고침하여 스크롤되는 뉴스 티커가 끊김 없이 부드럽게 움직이는지 확인합니다.

⚠️ 핵심 관리 루틴: 데이터 업데이트

이 시스템은 JavaScript로 스크롤링 효과만 자동화하며, 트렌드 데이터는 자동 업데이트되지 않습니다.

• 관리 주기: 매일 또는 2~3일에 한 번씩 https://trends.google.com/trends/trendingsearches/daily/rss?geo=KR RSS 피드를 확인합니다.

• 업데이트: 2단계에서 삽입했던 HTML/JavaScript 위젯으로 돌아가서 <ul> 목록 안의 키워드와 링크를 수동으로 수정해 주어야 합니다.

Read More