애드센스 광고 게재하기_ 사이드바

이전 포스팅에서

티스토리 애드센스 플러그인을 이용하여 본문의 상단과 하단에 광고를 게재하는 방법을 봤었죠?

 

☞ 애드센스 사이트인증 및 광고 생성하기

☞ 애드센스 광고 게재하기_ 본문 상단 및 하단

 

오늘은 배너 플러그인을 활용하여 사이드바에 광고를 게재해 보도록 하겠습니다.

워낙 쉽기 때문에 금방 따라하실 수 있습니다.

반응형 광고 코드 준비해두시구요~

 

 

#1. 티스토리 배너 플러그인

 

우선 플러그인을 활성화합시다.

(이미 배너출력 플러그인이 활성화 되어있으시다면 이 단계는 스킵하세요.)

 

관리 < 플러그인 < ①플러그인 설정 < ②관리 및 통계 탭으로 들어가서

배너출력 플러그인을 찾아 ③설정을 클릭하시고 ④확인 하시면 됩니다. 

이 때 사이드바 설정 페이지로 이동한다는 팝업이 뜨면 ⑤확인 하세요.

 

 

 

 

#2. 티스토리 배너 플러그인으로 광고 게재하기

 

사이드바 메뉴화면이 저와 일치하진 않겠지만,

기본 모듈에서 HTML 배너출력 찾으셨나요?

 

① + 버튼을 눌러주세요. 그럼 오른쪽에 HTML 배너출력이 추가됩니다.

② 추가 된 배너출력의 편집을 누르세요. 팝업이 뜰거예요.

③ 본인이 알아보기 쉽도록 임의의 이름을 입력하시구요.

④ 준비해 둔 반응형 코드를 통째로 붙여넣기 하세요.

⑤ 그리고 앞으로 수정이 용이하도록 사용자 모듈에 저장합니다.

⑥ 확인을 누르셔서 팝업을 닫으시고

⑦ 최종 저장을 누르세요!!!! 저장저장 잊지마요 저장.

 

 

자~ 한 번 볼까요?

사이드바에 성공적으로 광고가 게재되었습니다. 간단하죠?

 

사이드바 광고 위치는

사이드바 설정 페이지에서 드래그앤 드랍으로 쉽게 바꿀 수 있어요.

사용자 모듈에 저장해 놓았기 때문에 삭제했다가 다시 추가할 수도 있구요.

 

 

 

#3. Fastboot 사이드바 광고 게재하기

 

음, 그런데 사이드바 광고 디자인이 조금 아쉽습니다.

이제 Fastboot v1.6.2 사용자를 위해 조금 더 진화(?)해볼게요.

 

아까 배너출력에다가 광고 코드만 붙여넣기 했잖아요.

거기에 좀 더 살을 찌우는 겁니다.

 

Fastboot 사이드바 애드센스 배너.txt

 

우선 첨부된 텍스트를 열어서

애드센스코드 라고 되어있는 곳에 본인의 반응형 광고코드를 붙여넣기 하세요.

 

<div class="panel panel-default">
<h4 class="panel-heading"><i class="fa fa-credit-card"></i> Adsense</h4>
<div class="panel-body" style="text-align:center;">
애드센스코드
</div>
</div>

 

지금은 사이드바 헤드에 신용카드 아이콘으로 되어있는데 바꾸고 싶으시면 fa fa-credit-card 를 변경하시면 됩니다.

 

아이콘 관련해서는 아래 포스팅의 1번챕터 아이콘 바꾸기를 참고하세요.

☞ Fastboot v1.6.2 본문타이틀 속성 변경하기

 

그리고 주의하실 부분이 있습니다. Adsense 라고 되어있는 라벨(제목)인데요.

지금은 Adsense 로 되어있죠. 이걸 변경하시는 건 상관없으나

애드센스 정책에 따르면 오해의 소지가 있는 제목 아래에 광고를 게재하면 안 됩니다.

광고를 링크나 정보 목록으로 착각하게 만들면 안 된다는 거죠. 

또한 사용자의 광고 클릭을 유도하기 위한 표현을 사용하는 것도 안 됩니다.

구글 애드센스 홈페이지에는 "광고", "스폰서 링크"만 허용한다고 되어있습니다.

이 점 유의하여 변경하시길 바랍니다.

("Adsense" 역시 이러한 맥락을 벗어나지 않아서인지 아직까지 별 문제는 없네요.)

 

 

아무튼, 준비가 되셨으면

위와 똑같아요.

배너출력의 편집을 눌러서 위의 태그를 HTML소스에 붙여넣으세요!

최종 저장하는 거 잊지마시구요.

 

자, 이렇게 다른 사이드 바 메뉴들과 어우러지게 되었습니다.^^

 

그런데요..

이렇게 끝나기가 또 아쉽네요.

우리는 사이드바 모듈 설치하는 방법을 알고 있잖아요?

 

저는 배너 플러그인을 이용해서 애드센스 광고 코드를 삽입하는 것보다

아예 스킨 html에 사이드바 모듈로 삽입해 놓는 편이 더 편하더라구요.

차마 언급 하기도 민망하지만 그래도 혹시 모르시는 분들을 위하여.

추신(P.S)인 것 마냥, 살짝 덧붙여보겠습니다. 헤헤헤

 

Fastboot 사이드바 애드센스 모듈.txt

 

앞의 태그보다 살이 쬐끔 더 올랐을 뿐 똑같습니다.

계속 살 찌는 태그... 거울 속의 나... 왠지 낯설지 않네요.ㅋㅋㅋㅋㅋ 

<s_sidebar_element>
<!-- 애드센스 모듈 -->
<div class="panel panel-default">
<h4 class="panel-heading"><i class="fa fa-credit-card"></i> Adsense</h4>
<div class="panel-body" style="text-align:center;">
애드센스코드
</div>
</div>
</s_sidebar_element>

 

애드센스코드라고 적혀있는 곳에 본인의 반응형 코드 붙여넣는 것도 똑같습니다.

아이콘 바꾸시려면 fa fa-credit-card 수정하시구요~

라벨 바꾸려면 Adsense 수정하세요. 애드센스 정책 준수하시는 거 잊지마시고.

 

자 이제 이걸 어디다가 붙일까요?

 

관리 < 꾸미기 < HTML/CSS편집 < HTML 에서

[ <s_sidebar> ]를 검색하세요. 꺾쇠괄호까지.

<s_sidebar> 아래로 여러 모듈들이 죽 보입니다.

모듈은 <s_sidebar_element>...</s_sidebar_element> 로 이루어져 있습니다.

모듈 단위를 파악하면서, 원하는 위치에 삽입하시면 됩니다.

모듈의 순서는 어차피 사이드바에서 조정할 수 있으므로 

아래 그림처럼 안전하게 맨 위에 삽입하셔도 됩니다.

 

 

자, 이렇게 사이드바에 광고를 게재하는 방법을 살펴보았습니다.

따라오기 쉬우셨으리라 생각합니다.

다음 번에는 본문의 우측상단과, 좌측하단에 광고 게재하는 방법을 포스팅하겠습니다.

 

고생하셨습니다.^^