티스토리 하단 고정광고 넣는 법!

 

하단 고정 광고란?

누군가에 티스토리 블로그에 들어가 보면 종종 화면 하단에 밑에 사진과 같이 고정된 광고가 보일 때가 있습니다. 스크롤을 아래로 내리건 올리건 계속해서 따라다니는 광고를 말합니다!

 

정확히 말하면 이는 구글 애드센스 '앵커 광고'입니다. 지금부터 어떻게 설정하는지 자세히 알려드리겠습니다!

설정 방법 STEP. 1

구글 애드센스 접속 -> 광고 -> 개요 -> 해당 애드센스 계정 사이트 수정을 클릭

 

 

설정 방법 STEP. 2

자동 광고를 켜줍니다!

 

설정 방법 STEP. 3

광고 형식을 클릭 - > 앵커 광고를 켜줍니다!

 

설정방법 STEP. 4

앵커 광고가 미리보기로 켜진 모습을 확인합니다! 사이트에 적용을 누릅니다. 아마 1시간 정도 걸릴 수도 있다고 뜹니다! 그러나 이렇게만 하면 앵커 광고가 상단에 뜨게 됩니다. 사이트 상단에 고정되어 있으면 굉장히 불편하므로 하단에 설정해야 합니다. 

 

설정 방법 STEP. 5

이렇게 하면 앵커 광고가 상단에 뜨게 됩니다. 그래서 하단에 고정시켜주려면 티스토리에서 직접 코드를 수정해주어야 합니다.

우선 애드센스 광고 - 개요 페이지로 다시 진입하여 코드 가져오기를 눌러줍니다! 코드 가져오기에서 client="ca-pub-213123어쩌구" 제가 빨간색으로 칠해놓은 부분만 복사합니다! 

*주의 : 해당 코드는 애드센스 계정의 고유 코드이므로 꼭 본인의 코드 가져오기에 있는 부분에서 복사하셔야 됩니다.

그리고 밑에서 "애드센스 코드 붙여놓는 곳"에 자신의 고유 코드 부분을 바꾸어 놓습니다.  그리고 전체 복사합니다!

<!--앵커 광고 하단 고정-->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "애드센스 코드붙여놓는 곳", enable_page_level_ads: true, overlays: { bottom: true } }); </script>
<!--앵커광고하단고정-->

설정 방법 STEP. 6

티스토리-> 꾸미기->스킨 편집으로 들어가서 HTML 편집을 눌러줍니다. 그럼 아래와 같은 화면이 뜹니다!

아까 복사해뒀던 코드를 </head>  바로 위에 붙여 넣어 줍니다. 그리고 '적용'을 누르면 끝!

 

그럼 결과를 확인해 봐야죠? 30분 정도 뒤에 다시 접속해봅니다!

완성!

요즘 HTML/CSS를 배우면서 다시 티스토리 블로그의 CSS를 이것저것 만져보고 있는데, 괜히 간격(패딩, 마진)이나 max-width(넓이)를 만졌다가 점점 블로그가 안 이뻐지고 있는 것 같습니다.. 할 줄 안다고 해서 이쁘게 할 수 있다는 것은 아니라는 걸 깨닫고 있습니다..ㅎㅎㅎ 아무튼 다들 도움돼셨기를!