블로그스팟(Blogger) 헤더에 구글 트렌드 실시간 인기 검색어 스크롤바 삽입 가이드
Google 트렌드의 실시간 인기 검색어(RSS 피드)를 블로그스팟(Blogger)의 레이아웃에 스크롤되는 뉴스 티커 형태로 삽입하는 절차를 자세히 안내해 드립니다.
블로그스팟의 '피드 위젯'은 CSS를 통한 스크롤링 효과 적용이 어렵기 때문에, 'HTML/JavaScript 위젯'을 사용하여 구조와 애니메이션 코드를 직접 삽입하는 방식이 가장 안정적입니다.
🛠️ 블로그스팟 레이아웃에 스크롤링 RSS 삽입 절차
1. 전제 조건 및 코드 준비
2. 레이아웃에 CSS(스크롤 애니메이션) 적용
스크롤되는 효과를 위한 CSS 코드를 블로그스팟 테마에 삽입합니다.
[블로그스팟 관리] 페이지로 접속합니다.
좌측 메뉴에서 **[테마]**를 선택합니다.
'내 테마' 섹션 아래 [맞춤설정(Customize)] 버튼 옆의 드롭다운 화살표를 클릭하여 **[HTML 수정]**을 선택합니다.
<b:skin>태그 또는</head>태그 위에 다음 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%);
}
}
우측 상단의 [저장] 버튼을 눌러 CSS 변경 사항을 저장합니다.
3. 레이아웃에 HTML 구조 삽입 (위젯 활용)
이제 이 CSS가 적용될 HTML 구조를 블로그에 추가합니다. 헤더 바로 아래에 넣는 것이 가장 자연스럽습니다.
[블로그스팟 관리] 페이지로 돌아가 좌측 메뉴에서 **[레이아웃]**을 선택합니다.
블로그의 상단 영역(예: '헤더 아래', '메인 상단' 등)에 있는 **[가젯 추가]**를 클릭합니다.
목록에서 **[HTML/JavaScript]**를 선택합니다.
위젯 설정 창에 다음 코드를 삽입합니다. (이 코드는 수동으로 업데이트해야 하는 영역입니다.)
<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>
[저장] 버튼을 클릭하여 위젯을 저장합니다.
레이아웃 편집기에서 이 위젯을 원하는 위치(보통 헤더와 포스팅 영역 사이)로 드래그하여 배치합니다.
4. 최종 확인 및 관리
#가나 투데이 #ganatoday
그린아프로