📌 [티스토리 광고 꿀팁⑤] 글 상단 자동 광고 + 랜덤 출력하는 방법

✨

매번 글 쓸 때마다 광고 붙이는 거 번거롭지 않으세요?
오늘은 쿠팡파트너스 배너를 본문 상단에 자동 삽입하는 법과,
여러 개의 배너 중 하나가 랜덤으로 보이게 설정하는 방법을 알려드릴게요!
깔끔하게 자동화해서 꾸준한 수익 만들기, 함께 해봐요 :)

---

✨ 시리즈 안내 박스 (공통)

<div style="background:#f8f9fa; padding:12px 16px; border-left:5px solid #4e73df; margin-bottom:20px; font-size:14px; line-height:1.5;">
  <strong>📌 티스토리 광고 꿀팁 시리즈</strong><br>
  ① 다이나믹 배너 삽입법<br>
  ② 카테고리별 광고 설정<br>
  ③ 글 길이 따라 광고 조절<br>
  ④ 모바일 광고 스타일링<br>
  ⑤ 광고 자동삽입 & 랜덤 출력 (← 현재 글)
</div>

---

✨ 본문 내용

✅ 1. 스킨 편집 > HTML에서 article_rep_desc 찾기

<!-- 글 본문 영역 -->
<div class="article-view" id="article-view">
  <div class="tt_article_useless_p_margin contents_style" data-ke-type="opinion">
    

✨

매번 글 쓸 때마다 광고 붙이는 거 번거롭지 않으세요?
오늘은 쿠팡파트너스 배너를 본문 상단에 자동 삽입하는 법과,
여러 개의 배너 중 하나가 랜덤으로 보이게 설정하는 방법을 알려드릴게요!
깔끔하게 자동화해서 꾸준한 수익 만들기, 함께 해봐요 :)

---

✨ 시리즈 안내 박스 (공통)

<div style="background:#f8f9fa; padding:12px 16px; border-left:5px solid #4e73df; margin-bottom:20px; font-size:14px; line-height:1.5;">
  <strong>📌 티스토리 광고 꿀팁 시리즈</strong><br>
  ① 다이나믹 배너 삽입법<br>
  ② 카테고리별 광고 설정<br>
  ③ 글 길이 따라 광고 조절<br>
  ④ 모바일 광고 스타일링<br>
  ⑤ 광고 자동삽입 & 랜덤 출력 (← 현재 글)
</div>

---

✨ 본문 내용

✅ 1. 스킨 편집 > HTML에서 article_rep_desc 찾기

<!-- 글 본문 영역 -->
<div class="article-view" id="article-view">
  <div class="tt_article_useless_p_margin contents_style" data-ke-type="opinion">
    
  </div>
</div>

위에 광고 코드를 삽입하면,
모든 글의 본문 위에 광고가 자동으로 나타납니다.

---

✅ 2. 랜덤 광고 스크립트 작성

<script>
  const ads = [
    `<iframe src="https://ads-partners.coupang.com/widgets.html?id=AF9262877&template=carousel&trackingCode=AF9262877&subId=&width=100%&height=140&tsource=" width="100%" height="140" frameborder="0" scrolling="no" referrerpolicy="unsafe-url"></iframe>`,
    `<iframe src="https://ads-partners.coupang.com/widgets.html?id=다른아이디1" width="100%" height="140" frameborder="0"></iframe>`,
    `<iframe src="https://ads-partners.coupang.com/widgets.html?id=다른아이디2" width="100%" height="140" frameborder="0"></iframe>`
  ];
  const randomAd = ads[Math.floor(Math.random() * ads.length)];
  document.write(`<div class="ad-auto-wrap">${randomAd}</div>`);
</script>

쿠팡 광고 코드를 여러 개 준비해두고
Math.random()으로 무작위 선택하게 만드는 방식이에요.

---

✅ 3. 광고 영역 스타일도 같이 정리

.ad-auto-wrap {
  margin-bottom: 20px;
  max-width: 100%;
  overflow-x: hidden;
}

---

✅ 참고: 특정 카테고리에만 노출하거나 제외하고 싶다면?

추후 JavaScript로 카테고리를 감지해서 조건문으로 제어 가능해요.
예: if (category !== '일기') { 광고 보여주기 }

→ 이건 별도 포스팅으로 상세히 다룰 예정이에요!

---

✨ 고지 문구:

이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 

---

🌿 이 글은 ‘미온’의 아카이브 공간
[M.Lab – Motion & Life Archive]에 기록된 "유용한 정보" 입니다.
소소한 팁들이 당신의 하루에 도움이 되기를 바랍니다 :)

  </div>
</div>

✨

매번 글 쓸 때마다 광고 붙이는 거 번거롭지 않으세요?
오늘은 쿠팡파트너스 배너를 본문 상단에 자동 삽입하는 법과,
여러 개의 배너 중 하나가 랜덤으로 보이게 설정하는 방법을 알려드릴게요!
깔끔하게 자동화해서 꾸준한 수익 만들기, 함께 해봐요 :)

---

✨ 시리즈 안내 박스 (공통)

<div style="background:#f8f9fa; padding:12px 16px; border-left:5px solid #4e73df; margin-bottom:20px; font-size:14px; line-height:1.5;">
  <strong>📌 티스토리 광고 꿀팁 시리즈</strong><br>
  ① 다이나믹 배너 삽입법<br>
  ② 카테고리별 광고 설정<br>
  ③ 글 길이 따라 광고 조절<br>
  ④ 모바일 광고 스타일링<br>
  ⑤ 광고 자동삽입 & 랜덤 출력 (← 현재 글)
</div>

---

✨ 본문 내용

✅ 1. 스킨 편집 > HTML에서 article_rep_desc 찾기

<!-- 글 본문 영역 -->
<div class="article-view" id="article-view">
  <div class="tt_article_useless_p_margin contents_style" data-ke-type="opinion">
    
  </div>
</div>

위에 광고 코드를 삽입하면,
모든 글의 본문 위에 광고가 자동으로 나타납니다.

---

✅ 2. 랜덤 광고 스크립트 작성

<script>
  const ads = [
    `<iframe src="https://ads-partners.coupang.com/widgets.html?id=AF9262877&template=carousel&trackingCode=AF9262877&subId=&width=100%&height=140&tsource=" width="100%" height="140" frameborder="0" scrolling="no" referrerpolicy="unsafe-url"></iframe>`,
    `<iframe src="https://ads-partners.coupang.com/widgets.html?id=다른아이디1" width="100%" height="140" frameborder="0"></iframe>`,
    `<iframe src="https://ads-partners.coupang.com/widgets.html?id=다른아이디2" width="100%" height="140" frameborder="0"></iframe>`
  ];
  const randomAd = ads[Math.floor(Math.random() * ads.length)];
  document.write(`<div class="ad-auto-wrap">${randomAd}</div>`);
</script>

쿠팡 광고 코드를 여러 개 준비해두고
Math.random()으로 무작위 선택하게 만드는 방식이에요.

---

✅ 3. 광고 영역 스타일도 같이 정리

.ad-auto-wrap {
  margin-bottom: 20px;
  max-width: 100%;
  overflow-x: hidden;
}

---

✅ 참고: 특정 카테고리에만 노출하거나 제외하고 싶다면?

추후 JavaScript로 카테고리를 감지해서 조건문으로 제어 가능해요.
예: if (category !== '일기') { 광고 보여주기 }

→ 이건 별도 포스팅으로 상세히 다룰 예정이에요!

---

✨ 고지 문구:

이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 

---

🌿 이 글은 ‘미온’의 아카이브 공간
[M.Lab – Motion & Life Archive]에 기록된 "유용한 정보" 입니다.
소소한 팁들이 당신의 하루에 도움이 되기를 바랍니다 :)

위에 광고 코드를 삽입하면,
모든 글의 본문 위에 광고가 자동으로 나타납니다.

---

✅ 2. 랜덤 광고 스크립트 작성

<script>
  const ads = [
    `<iframe src="https://ads-partners.coupang.com/widgets.html?id=AF9262877&template=carousel&trackingCode=AF9262877&subId=&width=100%&height=140&tsource=" width="100%" height="140" frameborder="0" scrolling="no" referrerpolicy="unsafe-url"></iframe>`,
    `<iframe src="https://ads-partners.coupang.com/widgets.html?id=다른아이디1" width="100%" height="140" frameborder="0"></iframe>`,
    `<iframe src="https://ads-partners.coupang.com/widgets.html?id=다른아이디2" width="100%" height="140" frameborder="0"></iframe>`
  ];
  const randomAd = ads[Math.floor(Math.random() * ads.length)];
  document.write(`<div class="ad-auto-wrap">${randomAd}</div>`);
</script>

쿠팡 광고 코드를 여러 개 준비해두고
Math.random()으로 무작위 선택하게 만드는 방식이에요.

---

✅ 3. 광고 영역 스타일도 같이 정리

.ad-auto-wrap {
  margin-bottom: 20px;
  max-width: 100%;
  overflow-x: hidden;
}

---

✅ 참고: 특정 카테고리에만 노출하거나 제외하고 싶다면?

추후 JavaScript로 카테고리를 감지해서 조건문으로 제어 가능해요.
예: if (category !== '일기') { 광고 보여주기 }

→ 이건 별도 포스팅으로 상세히 다룰 예정이에요!

---

✨ 고지 문구:

이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 

---

🌿 이 글은 ‘미온’의 아카이브 공간
[M.Lab – Motion & Life Archive]에 기록된 "유용한 정보" 입니다.
소소한 팁들이 당신의 하루에 도움이 되기를 바랍니다 :)