AdFit 광고를 티스토리 블로그에 본문 상단, 사이드바, 하단에 넣는 방법

AdFit 광고를 티스토리 블로그에 본문 상단, 사이드바, 하단에 넣는 방법을 설명해 드릴게요.

---

1. AdFit 광고 코드 가져오기

먼저 네이버 AdFit 관리자 페이지에서 광고 코드를 생성해야 합니다.

1. AdFit 사이트에 로그인
2. 광고 관리 > 새 광고 단위 만들기 클릭
3. 광고 유형(배너, 네이티브 등) 및 크기 선택
   • 📌 본문 상단 & 하단: 320x100, 320x50, 300x250 추천
   • 📌 사이드바: 160x600, 300x600 추천
4. 광고 코드 복사 (HTML 스크립트)

---

2. 티스토리에 광고 코드 삽입하기

티스토리에서 AdFit 광고를 원하는 위치에 넣으려면 HTML 편집 기능을 사용해야 합니다.

📌 (1) 본문 상단에 광고 넣기

1. 티스토리 관리자 페이지 → 스킨 편집 클릭
2. HTML 편집 → <article> 태그 안에서 본문 시작 부분을 찾기
3. 본문이 시작되는 부분 <div class="article"> 위쪽에 AdFit 광고 코드 삽입
4. 저장 후 적용

예제 코드:

<div class="adfit">
    <script>
        /* AdFit 광고 코드 */
    </script>
</div>

---

📌 (2) 사이드바(위젯 영역)에 광고 넣기

1. 티스토리 관리자 페이지 → 스킨 편집 → HTML 편집
2. sidebar 또는 aside 관련 부분을 찾기
3. <aside> 태그 안에 AdFit 광고 코드 삽입

예제 코드:

<aside class="sidebar">
    <div class="adfit">
        <script>
            /* AdFit 광고 코드 */
        </script>
    </div>
</aside>

 

1. 저장 후 적용

---

📌 (3) 본문 하단에 광고 넣기

1. HTML 편집에서 <article> 태그의 마지막 부분 찾기
2. 본문이 끝나는 </article> 태그 바로 위에 광고 코드 삽입
3. 저장 후 적용

예제 코드:

<div class="adfit">
    <script>
        /* AdFit 광고 코드 */
    </script>
</div>

---

3. 추가 설정 (CSS 적용)

광고 크기가 맞지 않거나 여백이 필요하면 CSS로 스타일을 조정할 수 있습니다.

.adfit {
    text-align: center;
    margin: 10px 0;
}

📌 광고 정렬: text-align: center; (가운데 정렬)
📌 여백 추가: margin: 10px 0; (상하 여백)

---

4. 적용 후 확인

1. 티스토리 블로그 방문
2. 광고가 정상적으로 표시되는지 확인
3. AdFit 관리자 페이지에서 광고 노출 데이터 확인

---

🔥 최적화 팁

• 광고 배치 개수: 너무 많은 광고는 가독성을 해치므로 2~3개 추천
• 사이드바 위치: 접속자가 많은 경우 상단에 배치하면 클릭률 상승
• 모바일 최적화: 반응형 스킨 사용 시 광고 크기 확인 필요

이 방법대로 적용하면 티스토리 블로그에서 AdFit 광고를 본문 상단, 사이드바, 하단에 쉽게 넣을 수 있습니다!