Ad Billboard

Home » » 다른 블로그 플랫폼에 실시간 경제 트렌드 티커 넣는 가장 쉬운 방법 정리(+Apps Script)

다른 블로그 플랫폼에 실시간 경제 트렌드 티커 넣는 가장 쉬운 방법 정리(+Apps Script)

By 

다른 블로그 플랫폼에 실시간 경제 트렌드 티커 넣는 가장 쉬운 방법 정리, 2025년 기준

실시간 경제 트렌드 티커 넣는 가장 쉬운 방법 정리

(오른쪽 끝 → 와쪽으로 쭉쭉, 빈 공간 없이)
플랫폼
난이도
걸리는 시간
방법 요약 (2025년 11월 기준)
비고
티스토리
★☆☆☆☆
3분
1. 스킨 HTML 편집 열기 2. <body> 끝나기 직전에 아래 코드 통째로 붙여넣기 3. MY_PROXY만 본인 URL로 교체 → 저장
티스토리에서는 외부 fetch 허용 → Apps Script URL만 넣으면 끝!
네이버 블로그
★★☆☆☆
5분
1. 본문에 HTML/자바스크립트 위젯 추가 2. 아래 코드 통째로 붙여넣기 3. 저장 (네이버도 2025년부터 fetch 허용)
모바일에서도 완벽히 보임
워드프레스
★☆☆☆☆
2분
1. 외모 → 사용자 정의하기 → 추가 CSS & JS 2. 아래 전체 코드 붙여넣기 (Header 또는 Footer 영역) 3. 저장
플러그인 없이도 됨
미디엄
★★☆☆☆
4분
직접 삽입 불가 → CodePen + iframe 우회 1. CodePen에 코드 넣고 저장 2. 미디엄 글에 <iframe src="CodePen URL"> 삽입
조금 번거롭지만 예쁘게 나옴
브런치
★★★★☆
불가능
자바스크립트 완전 차단 → 불가능
대안: 텍스트로만 “오늘의 경제 키워드” 적기
텀블벅/노션
★☆☆☆☆
3분
Notion → Embed 블록에 아래 iframe 코드 넣기 <iframe src="https://script.google.com/macros/s/본인URL/exec" width="100%" height="80"></iframe>
iframe만 허용하면 됨

모든 플랫폼 공용 최종 코드 (복사→붙여넣기만 하면 됨)

<div id="economy-ticker-2025" style="background:#000;color:#fff;padding:16px 20px;margin:20px auto;border-radius:18px;overflow:hidden;display:flex;align-items:center;box-shadow:0 6px 25px rgba(255,107,107,.4);max-width:96%;font-family:Malgun Gothic,sans-serif">
  <span style="font-weight:900;font-size:17px;background:linear-gradient(90deg,#ff4757,#ffa502);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-right:20px;flex-shrink:0">경제 트렌드</span>
  <div style="overflow:hidden;flex:1">
    <ul id="ticker-list" style="display:inline-flex;animation:t 15s linear infinite;gap:60px;list-style:none;padding:0;margin:0;white-space:nowrap">
      <li>로딩 중...</li>
    </ul>
  </div>
</div>

<style>
@keyframes t{0%{transform:translateX(100vw)}100%{transform:translateX(-100%)}}
#ticker-list a{color:#ff6b6b;font-weight:700;text-decoration:none}
#ticker-list a:hover{color:#fff;text-decoration:underline}
#ticker-list span{color:#ffd93d;margin-left:7px;font-weight:900}
</style>

<script>
const MY_PROXY = 'https://script.google.com/macros/s/당신의-긴-ID/exec';   // ← 여기만 바꾸세요!

fetch(MY_PROXY+'?t='+Date.now())
  .then(r=>r.json())
  .then(d=>{
    const ul=document.getElementById('ticker-list');
    let h='';
    d.forEach((x,i)=>h+=`<li><a href="${x.link}" target="_blank">${x.keyword}</a><span>#${i+1}</span></li>`);
    ul.innerHTML=h;
  });
</script>

플랫폼별 한 줄 요약 (2025년 기준)

플랫폼
한 줄 요약
티스토리
스킨 HTML 끝부분에 코드 넣기 → 끝
네이버 블로그
HTML/자바스크립트 위젯에 코드 넣기 → 끝
워드프레스
추가 JS 영역에 코드 넣기 → 끝
노션
iframe으로 Apps Script 웹 앱 URL 넣기 → 끝
미디엄
CodePen → iframe 우회
브런치
불가능 (대신 텍스트로만 표시)

당신이 쓰는 플랫폼만 말씀해 주시면,
그 플랫폼에 딱 맞는 1분 컷 코드 바로 드릴게요!

#가나 투데이 #ganatoday

그린아프로
Share:  Facebook Twitter Google+