애드센스 수익을 올리자! 따라다니는 사이드바 광고와 하단 고정되는 플러터 광고 넣기

애드센스 정책이 아마도 작년쯤에 바뀌면서 따라다니는 광고, 항상 화면에 표시되는 광고를 넣을 수 있게 되었습니다.
이번에 저의 스킨을 작업하면서 사이드바에 항상 따라다니는 광고를 달았습니다.
어떻게 작업했는지 하나하나 알려드리도록 할게요.

제가 수정한 스타큐브 티스토리 스킨을 사용하면 이런 작업은 필요하지 않습니다.
스킨 편집 설정에서 애드센스 광고 ID, 애드핏 광고 ID만 입력하고 저장하면 자동으로 광고 설정이 됩니다.
북클럽 티스토리 스킨을 사용하고 있다면 스킨을 바꿔보는 것도 좋을 듯합니다.
광고 수익을 극대화할 수 있도록 광고 배치를 자유롭게 설정할 수 있도록 만들었습니다.

티스토리 공식 스킨인 북클럽 스킨으로 설명을 하도록 하겠습니다.
커피 한잔이나 주스 한잔 드시면서 천천히 읽어 보세요. 혹시 이해가지 않는 부분은 댓글 달아 주시면 설명드리도록 하겠습니다.
해본 것에 대해 기억을 기록하고자 하는 목적으로 글을 작성하는 것이기도 합니다.
애드핏이 아닌 애드센스 코드를 샘플로 작성하니 애드핏을 사용하시는 분은 애드센스 코드 대신 애드핏 코드를 넣으면 되겠습니다.

티스토리 사이드바에 따라다니는 애드센스(애드 핏) 광고 붙이기

블로그 관리 화면에서 스킨 편집의 html 편집 화면으로 가서 html을 보면 아래와 같은 부분이 보일 겁니다.

<div class="sidebar-1">
	<s_sidebar>
		<s_sidebar_element>
			<!-- 카테고리 -->
			<nav class="category">
				
 스타큐브 전체보기 
  
 스타큐브 스킨 
 블로그 관리 




			</nav>
		</s_sidebar_element>

이 부분을 찾은 다음 이 부분의 "</s_sidebar_element>" 아래에 다음 코드를 넣어 주세요.

<s_sidebar_element>
	<!-- 사이드바 따라다니는 애드센스 -->
	<div class="adTofollow">
    	<div class="float-sidebar" style="top:0px;">
			<ins class="adsbygoogle"
				style="display:block"
				data-ad-client="애드센스ID"
				data-ad-slot="슬롯ID"
				data-ad-format="auto"
				data-full-width-responsive="true"></ins>
			<script>
				(adsbygoogle = window.adsbygoogle || []).push({});
			</script>
		</div>
	</div>
</s_sidebar_element>

그리고 html 편집에서 맨 아래에 다음과 같은 부분이 보일 거예요.

<script src="./images/script.js"></script>
</body>

이 부분에서 "</body>" 위 쪽에 다음과 같이 자바스크립트를 넣어 주세요.

<script src="./images/script.js"></script>

<script async="async" type="text/javascript">
    $(window).scroll(function(event){
    	if($(window).scrollTop() > $(".adTofollow").offset().top) {
    		jQuery(".float-sidebar").css("position", "fixed");
    		jQuery(".float-sidebar").css("top", "10px");
    	} else if((jQuery(window).scrollTop() < jQuery(".adTofollow").offset().top)) {
    		jQuery(".float-sidebar").css("position", "static");
    		jQuery(".float-sidebar").css("top", "0px");
    	}
    });
</script>

</body>

이렇게 삽입한 후 저장을 해주세요. 블로그 관리 화면의 왼쪽 사이드바 메뉴에서 "꾸미기 - 사이드바"로 가보면 다음과 같이 "사이드바 따라다니는 애드센스"라고 모듈이 생겼을 거예요.

애드센스 따라다니는 광고 공통 모듈

공통 모듈이 안 보인다고요? 그럼 F5키를 눌려서 새로고침 하면 생겼을 거예요.
이렇게 공통 모듈이 보이면 아래 그림처럼 사이드바 맨 마지막에 넣어 주세요. 이 사이드바 광고는 스크롤을 내리면 상단에 고정돼서 계속 따라다니니 이 애드센스 아래에 인기글, 댓글 등의 다른 모듈이 있으면 광고에 모두 가려집니다.

티스토리 따라다니는 광고 달기

이렇게 수정하고 꼭 저장하기를 해서 저장하세요.
자신의 블로그에 접속해서 사이드바가 공백이 나올 만큼 긴 글을 보세요. 스크롤을 내려 움직이면 사이드바의 애드센스 광고가 따라다닐 거예요.

푸터 하단에 고정돼서 보이는 플러터 애드센스(애드핏) 광고 달기

푸터 아래에서 따라다니는 플러터 광고

제 블로그를 보면 푸터 아래에서 고정되서 따라다니는 플러터라고 부르는 애드센스 광고가 보일 거예요.

오늘은 퇴근하자마자 커피와 샌드위치로 저녁을 대신 먹으면서 제가 넣은 소스도 다시 보고 확인하면서 글을 쓰니 몇 자 안 적었는데도 시간이 꽤 많이 걸리네요.
플루터 푸터 광고 박스에는 오른쪽에 X 버튼을 넣어서 사용자가 언제든지 광고를 끌 수 있도록 합니다.

티스토리 관리에서 html 편집기로 가주세요.
html 소스의 맨 아래 부분에 "</footer>"이라는 부분이 보일 겁니다.
이 "</footer>" 바로 위에 아래와 같이 html 태그를 넣어 주면 됩니다.

	<script async="async">
		<!-- 플러터 푸터 광고 -->
		var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ? true : false;
		if(!isMobile){
			var str = '<div id="ads-flutter-footer-blank" style="clear:both;"> </div>';
			str += '<div id="ads-flutter-footer" class="ads-flutter-footer"><div>';
			str += '<ins class="adsbygoogle"';
			str += ' style="display:block"';
			str += ' data-ad-client="애드센스ID"';
			str += ' data-ad-slot="슬롯ID"';
			str += ' data-ad-format="auto"';
			str += ' data-full-width-responsive="true"></ins>';
			str += '<script>';
			str += '	(adsbygoogle = window.adsbygoogle || []).push({});';
			str += '</script></div>';
			str += '<span id="ads-flutter-footer-close" class="ads-flutter-footer-close">x</span></div>';
			
			var ht = $(".ads-flutter-footer").outerHeight(true);
			$('#ads-flutter-footer-blank').css("height",(ht-20)+"px");
			$('#ads-flutter-footer-close').prev().remove();
            
			$('#ads-flutter-footer-close').click(function(){
				$('#ads-flutter-footer').remove();
			});
		}
	</script>
        
	</footer>

 

모바일에서는 하단의 애드 핏이나 애드센스가 보이지 않게 하기 위해 자바 스크립트로 모두 작성했습니다.
자바스크립트로 분기 처리 및 제어를 하였으며 제이쿼리(jQuery)를 사용했습니다.

여기까지 잘 따라오셨나요?

다음은 "ads_flutter-footer" css 스타일을 설정해서 스크롤이 되더라도 항상 언제나 푸터 아래 하단에 광고가 보이도록 css를 수정합니다. 
html 편집기의 css 편집으로 가서 다음의 스타일 코드를 아무 곳에나 넣어 주세요.
"<html>... </html>"으로 된 html에 넣어주면 안돼요. 

.ads-flutter-footer{
	clear:both;
  text-align:center;
  margin:0;
  width:100%;
  overflow:hidden;
  position:fixed;
  left:0;
  bottom:0;
  z-index:99999;
  background-color:hsla(0,0%,100%,.8);
  border-top:2px solid hsla(0,0%,88.2%,.8);
}

.ads-flutter-footer-close{
	cursor: pointer;
	color:#b2b2b2;
	border:1px solid #b2b2b2;
	border-radius:20px;
	background:#fff;
	line-height:20px;
	display:inline-block;
	font-size:20px;
	font-family:arial, sans-serit;
	padding:0 5px;
	position:absolute;
	top:10px;
	right:10px;
}

이렇게 설정을 하고 저장을 하면 블로그에 항상 따라다니는 광고 설정이 끝납니다.
수익형 블로그를 운영하는 모든 블로거님 많은 수입 없으면 좋겠습니다.
모두 파이팅하세요!