블로그스팟(Blogger) 헤더에 구글 트렌드GOOGLE-TREND 실시간 인기 검색어 스크롤바 삽입 가이드

블로그스팟(Blogger) 헤더에 구글 트렌드 실시간 인기 검색어 스크롤바 삽입 가이드

Google 트렌드의 실시간 인기 검색어(RSS 피드)를 블로그스팟(Blogger)의 레이아웃에 스크롤되는 뉴스 티커 형태로 삽입하는 절차를 자세히 안내해 드립니다.

블로그스팟의 '피드 위젯'은 CSS를 통한 스크롤링 효과 적용이 어렵기 때문에, 'HTML/JavaScript 위젯'을 사용하여 구조와 애니메이션 코드를 직접 삽입하는 방식이 가장 안정적입니다.

---

🛠️ 블로그스팟 레이아웃에 스크롤링 RSS 삽입 절차

1. 전제 조건 및 코드 준비

구분	내용
RSS 피드 URL	대한민국 일별 인기 검색어 RSS 주소: https://trends.google.com/trends/trendingsearches/daily/rss?geo=KR
핵심 기술	CSS (스크롤 애니메이션) + HTML (구조)
주의 사항	이 방법은 실시간으로 RSS 데이터를 파싱(Parsing)하지는 않습니다. RSS 데이터를 수동으로 확인하여 HTML 목록을 주기적으로 업데이트해야 합니다. (완전 자동화를 위해서는 복잡한 외부 서비스 또는 JavaScript 코드가 필요합니다.)

2. 레이아웃에 CSS(스크롤 애니메이션) 적용

스크롤되는 효과를 위한 CSS 코드를 블로그스팟 테마에 삽입합니다.

1. [블로그스팟 관리] 페이지로 접속합니다.

2. 좌측 메뉴에서 **[테마]**를 선택합니다.

3. '내 테마' 섹션 아래 [맞춤설정(Customize)] 버튼 옆의 드롭다운 화살표를 클릭하여 **[HTML 수정]**을 선택합니다.

4. <b:skin> 태그 또는 </head> 태그 위에 다음 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; /* 줄 바꿈 방지 */
    animation: scroll-left 40s linear infinite; /* 40초 동안 지속 스크롤 */
}

#scrolling-keywords ul:hover {
    animation-play-state: paused; /* 마우스를 올리면 멈춤 */
}

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

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

/* 스크롤 애니메이션 정의 */
@keyframes scroll-left {
    0% {
        transform: translateX(100%); /* 오른쪽 끝에서 시작 */
    }
    100% {
        /* 왼쪽 끝까지 이동 (목록 길이에 따라 속도/시간을 조정하세요) */
        transform: translateX(-100%); 
    }
}

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

3. 레이아웃에 HTML 구조 삽입 (위젯 활용)

이제 이 CSS가 적용될 HTML 구조를 블로그에 추가합니다. 헤더 바로 아래에 넣는 것이 가장 자연스럽습니다.

1. [블로그스팟 관리] 페이지로 돌아가 좌측 메뉴에서 **[레이아웃]**을 선택합니다.

2. 블로그의 상단 영역(예: '헤더 아래', '메인 상단' 등)에 있는 **[가젯 추가]**를 클릭합니다.

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

4. 위젯 설정 창에 다음 코드를 삽입합니다. (이 코드는 수동으로 업데이트해야 하는 영역입니다.)

필드	내용
제목	(비워둠 또는 '실시간 검색어' 입력)
콘텐츠	아래의 HTML 코드 전체 복사

HTML

<div class="trending-ticker-wrap">
    <span>📈 Google 실시간 트렌드</span>
    <div id="scrolling-keywords">
        <ul>
            <li><a href="검색링크주소1" target="_blank">오늘의 탑 주제 1</a></li>
            <li><a href="검색링크주소2" target="_blank">Google 트렌드 2위</a></li>
            <li><a href="검색링크주소3" target="_blank">인기 키워드 3위 (최신)</a></li>
            <li><a href="검색링크주소4" target="_blank">급상승 이슈 키워드</a></li>
            <li><a href="검색링크주소5" target="_blank">추가 인기 검색어</a></li>
            <li><a href="검색링크주소6" target="_blank">새로운 트렌드 주제</a></li>
            </ul>
    </div>
</div>

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

6. 레이아웃 편집기에서 이 위젯을 원하는 위치(보통 헤더와 포스팅 영역 사이)로 드래그하여 배치합니다.

4. 최종 확인 및 관리

• 블로그를 새로고침하여 스크롤되는 인기 검색어 바가 정상적으로 표시되고 왼쪽으로 움직이는지 확인합니다.

• 주의: RSS 피드는 매일(또는 수시로) 변동됩니다. 실시간 검색어를 최신 상태로 유지하려면, 주기적으로 Google Trends RSS 피드에서 새 키워드를 확인한 후, 3단계의 위젯 콘텐츠를 수정하여 업데이트해야 합니다.

Read More