티스토리 블로그 본문 상단에서 우측에 사각형 광고를 넣는 방법을 공유하겠습니다.
주의할점! 티스토리 블로그에서는 [수익→구글애드센스] 에서 광고 설정이 가능하죠.
아래처럼 목록상단 광고를 활성화하고 본문우측상단을 적용시 목록상단 위에 광고가 게재되어 보기 싫게 적용이 됩니다.
그래서 본문상단 구글애드센스 광고를 포기하고 우측상단 광고를 넣을것인가? No!
그래서 본문에서 광고를 삽입하는 방법을 공유하겠습니다.
옆에 우측상단 광고 적용된거 확인되시죠?
그럼, 먼저 광고 코드 먼저 생성하겠습니다.
티스토리 블로그 본문우측광고 넣는 방법
구글 애드센스에 접속해서 좌측 메뉴에서 [광고] → [개요] 를 클릭합니다.
개요 페이지에서 메뉴 두번째 [광고 단위 기준]을 클릭합니다.
신규 광고 단위 만들기 페이지가 뜨는데요. 첫번째 [디스플레이 광고]를 선택합니다.
그럼 디스플레이 광고 페이지가 뜨는데요. 여기서 광고명 [본문우측상단]을 입력하고 [사각형]을 선택하고 광고크기는 [반응형]으로 그대로 하고 아래 [만들기]를 클릭합니다.
코드 생성기가 생성되었습니다. 이 코드에서 data-ad-client="" 와 data-ad-slot="" 를 복사하고 아래 완료를 클릭합니다.
스킨편집에서 우측상단 광고 넣기
본문상단에 애드핏과 애드센스 광고를 포기하시고 우측상단 광고를 넣고자 하시면
아래 코드에서 data-ad-client="" 와 data-ad-slot="" 를 위에서 생성한 나의 코드로 수정하여 전체 복사하기 합니다.
<!--본문 우측상단 광고-->
<div style="float: right; margin: 5px 0px 0px 10px;">
<style>
.right_up { width: 200px; height: 200px;}
@media(min-width: 500px) { .right_up { width: 250px; height: 250px; } }
@media(min-width: 800px) { .right_up { width: 336px; height: 280px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle right_up"
style="display:inline-block"
data-ad-client="ca-pub-@@@@@@@@@"
data-ad-slot="######"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
[스킨편집]→ [HTML 편집] 에서
티스토리 블로그 본문 상단에서 우측에 사각형 광고를 넣는 방법을 공유하겠습니다. 주의할점! 티스토리 블로그에서는 [수익→구글애드센스] 에서 광고 설정이 가능하죠. 아래처럼 목록상단 광고를 활성화하고 본문우측상단을 적용시 목록상단 위에 광고가 게재되어 보기 싫게 적용이 됩니다. 그래서 본문상단 구글애드센스 광고를 포기하고 우측상단 광고를 넣을것인가? No! 그래서 본문에서 광고를 삽입하는 방법을 공유하겠습니다. 옆에 우측상단 광고 적용된거 확인되시죠? 그럼, 먼저 광고 코드 먼저 생성하겠습니다. 구글 애드센스에 접속해서 좌측 메뉴에서 [광고] → [개요] 를 클릭합니다. 개요 페이지에서 메뉴 두번째 [광고 단위 기준]을 클릭합니다. 신규 광고 단위 만들기 페이지가 뜨는데요. 첫번째 [디스플레이 광고]를 선택합니다. 그럼 디스플레이 광고 페이지가 뜨는데요. 여기서 광고명 [본문우측상단]을 입력하고 [사각형]을 선택하고 광고크기는 [반응형]으로 그대로 하고 아래 [만들기]를 클릭합니다. 코드 생성기가 생성되었습니다. 이 코드에서 data-ad-client="" 와 data-ad-slot="" 를 복사하고 아래 완료를 클릭합니다. 본문상단에 애드핏과 애드센스 광고를 포기하시고 우측상단 광고를 넣고자 하시면 아래 코드에서 data-ad-client="" 와 data-ad-slot="" 를 위에서 생성한 나의 코드로 수정하여 전체 복사하기 합니다. [스킨편집]→ [HTML 편집] 에서 를 찾아 아래에 붙여넣기 하시면 됩니다. 본문 내용 아래에 붙인다고 생각하시면 됩니다. 다른 방법은 글쓸때마다 본문에서 광고를 삽입하는 방법입니다. 바로 서식을 만들어 간편하게 등록하는 방법인데요. 티스토리 블로그 좌측 메뉴에서 [콘텐츠] → [서식관리] 클릭합니다. 그리고 우측에 [서식쓰기]를 클릭합니다. 서식에서 [본문우측광고] 제목을 입력하고 [기본모드]를 [HTML] 로 선택합니다. HTML 모드에서 위에 복사한 코드를 붙여넣기 하고 저장합니다. 그러면 서식이 작성되었습니다. 블로그 포스팅해야겠죠~ 블로그에서 포스팅할때 우측 상단 [...] 을 클릭 → [서식] 클릭하여 우측상단광고를 넣고자 하는 곳에 넣으면 완성됩니다. 포스팅할때마다 넣어줘야한다는 단점이 있지만 간편하게 몇 번의 클릭으로 서식을 활용하여 등록하면 되니 상단광고를 포기하지 않고 등록할 수 있습니다. 이렇게 했는데... 광고가 안 뜨더라구요. 분명히 코드는 있는데.. 여기서 한가지만 수정해주시면 됩니다. 코드에서 style 을 [스킨편집]→ [HTML 편집] 에 넣어주면 됩니다. .right_up { width: 200px; height: 200px;} 구글 애드센스 광고 잘 등록해서 함께 수익 겟해보아요! 티스토리 블로그 본문우측광고 넣는 방법
스킨편집에서 우측상단 광고 넣기
<!--본문 우측상단 광고-->
<div style="float: right; margin: 5px 0px 0px 10px;">
<style>
.right_up { width: 200px; height: 200px;}
@media(min-width: 500px) { .right_up { width: 250px; height: 250px; } }
@media(min-width: 800px) { .right_up { width: 336px; height: 280px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle right_up"
style="display:inline-block"
data-ad-client="ca-pub-@@@@@@@@@"
data-ad-slot="######"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>본문 글쓰기에서 우측상단 광고넣기
@media(min-width: 500px) { .right_up { width: 250px; height: 250px; } }
@media(min-width: 800px) { .right_up { width: 336px; height: 280px; } }
이 소스를 [html편집] 에서 <style> </style> 이 사이에 넣고 [적용] 클릭합니다.
본문 내용 아래에 붙인다고 생각하시면 됩니다.
본문 글쓰기에서 우측상단 광고넣기
다른 방법은 글쓸때마다 본문에서 광고를 삽입하는 방법입니다. 바로 서식을 만들어 간편하게 등록하는 방법인데요.
티스토리 블로그 좌측 메뉴에서 [콘텐츠] → [서식관리] 클릭합니다. 그리고 우측에 [서식쓰기]를 클릭합니다.
서식에서 [본문우측광고] 제목을 입력하고 [기본모드]를 [HTML] 로 선택합니다.
HTML 모드에서 위에 복사한 코드를 붙여넣기 하고 저장합니다.
그러면 서식이 작성되었습니다.
블로그 포스팅해야겠죠~
블로그에서 포스팅할때 우측 상단 [...] 을 클릭 → [서식] 클릭하여 우측상단광고를 넣고자 하는 곳에 넣으면 완성됩니다.
포스팅할때마다 넣어줘야한다는 단점이 있지만 간편하게 몇 번의 클릭으로 서식을 활용하여 등록하면 되니 상단광고를 포기하지 않고 등록할 수 있습니다.
이렇게 했는데... 광고가 안 뜨더라구요. 분명히 코드는 있는데..
여기서 한가지만 수정해주시면 됩니다.
코드에서 style 을 [스킨편집]→ [HTML 편집] 에 넣어주면 됩니다.
.right_up { width: 200px; height: 200px;}
@media(min-width: 500px) { .right_up { width: 250px; height: 250px; } }
@media(min-width: 800px) { .right_up { width: 336px; height: 280px; } }
이 소스를 [html편집] 에서 <style> </style> 이 사이에 넣고 [적용] 클릭합니다.
구글 애드센스 광고 잘 등록해서 함께 수익 겟해보아요!
'New 정보 > 수익형블로그' 카테고리의 다른 글
| 2024.8.5.월 (주의말씀) (0) | 2024.08.05 |
|---|---|
| 티스토리 구글애드센스 광고 게재 제한 적용 - 절대 하지말아야할 사항 (1) | 2021.02.24 |
| 앱테크 사진으로 돈 버는 방법 (0) | 2021.01.29 |
| 티스토리 블로그 사이드바에 플러그인 쿠팡 배너 넣는 방법 (0) | 2021.01.22 |
| [구글애드센스] 티스토리 블로그 인피드 광고 설정 방법 (2021.1.19) (1) | 2021.01.19 |
댓글