본문 바로가기

블로그 관련

티스토리 - 구글 애드센스 광고 달기 2 - 본문 상단 오른쪽에 반응형을 달아보자.

티스토리 - 구글 애드센스 광고 달기 2 - 본문 상단 오른쪽에 반응형을 달아보자.

다양한 정보를 전달해 드리려고 노력하는 블로그!!!

글과 사진 및 이미지 ▶ CopyLeft(C)
◎CopyLeft(C) 는 공유는 하시되 복사 붙여넣기가 아니라 내용을 응용하여 작성해서 가져가셔야 된다는 걸 알려 드립니다.
◎사진과 이미지 일부는 퍼온 것도 있음을 밝힙니다.


목차


애드센스를 상단 오른쪽에 반응형 애드센스를 달아보자.

이번 글에서는 티스토리 블로그를에서 제공하는 플러그인 ‘애드센스(데스크탑 웹용)’에서 사용되는 본문 상단 오른쪽에 광고를 HTML로 넣어볼려고 한다.

티스토리에서 제공하는 플러그인은 모바일에서 적용이 안 된다. 그래서 반응형 스킨을 사용한다면 필자와 같이 모바일에서도 같이 보이게 할 때 사용하면 된다.

  • 아래는 컴퓨터와 모바일로 보았을때 화면이다.




애드센스 HTML 코드를 작성한다.

우선 제일 중요한 것은 애드센스에서 광고코드를 가져와야 한다. 광고 코드에서 ‘개인 식별 코드’와 ‘광고 코드’를 아래의 소스에 적용하여 HTML/CSS 창에 넣어 주면 된다.

  • 아래의 이미지에서처럼 초록색은 개인식별코드 하늘색은 광고코드이다.



  • 아래는 애드센스 카테고리 오른쪽에 넣는 HTML 소스이다.
<!-- 데스크탑 -  우측 상단 --> 

<style>
.jb-ad { float: right; margin: 5px 0px 20px 20px; width: 336px; height: 280px; }
@media ( max-width: 1024px) { .jb-ad { width: 300px; height: 250px; } }
@media ( max-width: 767px) { .jb-ad { float: none; margin: 20px 0px; width: 100%; height: auto; } }
</style>
<div class="jb-ad">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 반응형 글상단 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-*****"
data-ad-slot="*****"
data-ad-format="auto">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

애드센스 HTML 코드를 티스토리에 적용한다.

블로그 관리자에서 플러그인 ▶ 수익에서 ‘Google AdSense (반응형)’플러그인에서 상단 부분에 넣어주면 된다.




%23%20%uD2F0%uC2A4%uD1A0%uB9AC%20-%20%uAD6C%uAE00%20%uC560%uB4DC%uC13C%uC2A4%20%uAD11%uACE0%20%uB2EC%uAE30%202%20-%20%uBCF8%uBB38%20%uC0C1%uB2E8%20%uC624%uB978%uCABD%uC5D0%20%uBC18%uC751%uD615%uC744%20%uB2EC%uC544%uBCF4%uC790.%0A@%28%24.%uBE14%uB85C%uADF8%29%5BMarxico%2C%20%uD2F0%uC2A4%uD1A0%uB9AC%5D%20%0A%0A%3Cp%3E%3Cfont%20color%3D%22%23ffffff%22%3E%3Cspan%20style%3D%22background-color%3A%20rgb%280%2C%20153%2C%20153%29%3B%20color%3A%20rgb%28255%2C%20255%2C%20255%29%3B%22%3E%uB2E4%uC591%uD55C%20%uC815%uBCF4%uB97C%20%uC804%uB2EC%uD574%20%uB4DC%uB9AC%uB824%uACE0%20%uB178%uB825%uD558%uB294%20%uBE14%uB85C%uADF8%21%21%21%3C/span%3E%3C/font%3E%3C/p%3E%0A%uAE00%uACFC%20%uC0AC%uC9C4%20%uBC0F%20%uC774%uBBF8%uC9C0%20%u25B6%20CopyLeft%28C%29%0A%u25CECopyLeft%28C%29%20%uB294%20%uACF5%uC720%uB294%20%uD558%uC2DC%uB418%20%uBCF5%uC0AC%20%uBD99%uC5EC%uB123%uAE30%uAC00%20%uC544%uB2C8%uB77C%20%uB0B4%uC6A9%uC744%20%uC751%uC6A9%uD558%uC5EC%20%uC791%uC131%uD574%uC11C%20%uAC00%uC838%uAC00%uC154%uC57C%20%uB41C%uB2E4%uB294%20%uAC78%20%uC54C%uB824%20%uB4DC%uB9BD%uB2C8%uB2E4.%20%0A%u25CE%uC0AC%uC9C4%uACFC%20%uC774%uBBF8%uC9C0%20%uC77C%uBD80%uB294%20%uD37C%uC628%20%uAC83%uB3C4%20%uC788%uC74C%uC744%20%uBC1D%uD799%uB2C8%uB2E4.%20%0A%0A---%0A%23%23%20%uBAA9%uCC28%0A%5BTOC%5D%0A%0A%0A---%0A%0A%23%23%23%20%uC560%uB4DC%uC13C%uC2A4%uB97C%20%uC0C1%uB2E8%20%uC624%uB978%uCABD%uC5D0%20%uBC18%uC751%uD615%20%uC560%uB4DC%uC13C%uC2A4%uB97C%20%uB2EC%uC544%uBCF4%uC790.%0A%0A%21%5BAlt%20text%5D%28./%uD2F0%uC2A4%uD1A0%uB9AC%20-%20%uAD6C%uAE00%20%uC560%uB4DC%uC13C%uC2A4%20%uAD11%uACE0%20%uB2EC%uAE302.jpg%29%0A%0A%uC774%uBC88%20%uAE00%uC5D0%uC11C%uB294%20%uD2F0%uC2A4%uD1A0%uB9AC%20%uBE14%uB85C%uADF8%uB97C%uC5D0%uC11C%20%uC81C%uACF5%uD558%uB294%20%uD50C%uB7EC%uADF8%uC778%20%27%uC560%uB4DC%uC13C%uC2A4%28%uB370%uC2A4%uD06C%uD0D1%20%uC6F9%uC6A9%29%27%uC5D0%uC11C%20%uC0AC%uC6A9%uB418%uB294%20%uBCF8%uBB38%20%uC0C1%uB2E8%20%uC624%uB978%uCABD%uC5D0%20%uAD11%uACE0%uB97C%20HTML%uB85C%20%uB123%uC5B4%uBCFC%uB824%uACE0%20%uD55C%uB2E4.%20%0A%0A%uD2F0%uC2A4%uD1A0%uB9AC%uC5D0%uC11C%20%uC81C%uACF5%uD558%uB294%20%uD50C%uB7EC%uADF8%uC778%uC740%20%uBAA8%uBC14%uC77C%uC5D0%uC11C%20%uC801%uC6A9%uC774%20%uC548%20%uB41C%uB2E4.%20%uADF8%uB798%uC11C%20%uBC18%uC751%uD615%20%uC2A4%uD0A8%uC744%20%uC0AC%uC6A9%uD55C%uB2E4%uBA74%20%uD544%uC790%uC640%20%uAC19%uC774%20%uBAA8%uBC14%uC77C%uC5D0%uC11C%uB3C4%20%uAC19%uC774%20%uBCF4%uC774%uAC8C%20%uD560%20%uB54C%20%uC0AC%uC6A9%uD558%uBA74%20%uB41C%uB2E4.%0A%0A*%20%uC544%uB798%uB294%20%uCEF4%uD4E8%uD130%uC640%20%uBAA8%uBC14%uC77C%uB85C%20%uBCF4%uC558%uC744%uB54C%20%uD654%uBA74%uC774%uB2E4.%0A%21%5BAlt%20text%5D%28./%uD2F0%uC2A4%uD1A0%uB9AC%20-%20%uC0C1%uB2E8%20%uC6B0%uCE21%201.jpg%29%0A%0A%21%5BAlt%20text%5D%28./%uD2F0%uC2A4%uD1A0%uB9AC%20-%20%uC0C1%uB2E8%20%uC6B0%uCE21%202.jpg%29%0A%0A---%0A%0A%23%23%23%23%20%uC560%uB4DC%uC13C%uC2A4%20HTML%20%uCF54%uB4DC%uB97C%20%uC791%uC131%uD55C%uB2E4.%0A%0A%uC6B0%uC120%20%uC81C%uC77C%20%uC911%uC694%uD55C%20%uAC83%uC740%20%uC560%uB4DC%uC13C%uC2A4%uC5D0%uC11C%20%uAD11%uACE0%uCF54%uB4DC%uB97C%20%uAC00%uC838%uC640%uC57C%20%uD55C%uB2E4.%20%uAD11%uACE0%20%uCF54%uB4DC%uC5D0%uC11C%20%27%uAC1C%uC778%20%uC2DD%uBCC4%20%uCF54%uB4DC%27%uC640%20%27%uAD11%uACE0%20%uCF54%uB4DC%27%uB97C%20%uC544%uB798%uC758%20%uC18C%uC2A4%uC5D0%20%uC801%uC6A9%uD558%uC5EC%20%20HTML/CSS%20%uCC3D%uC5D0%20%uB123%uC5B4%20%uC8FC%uBA74%20%uB41C%uB2E4.%0A%0A*%20%20%uC544%uB798%uC758%20%uC774%uBBF8%uC9C0%uC5D0%uC11C%uCC98%uB7FC%20%uCD08%uB85D%uC0C9%uC740%20%uAC1C%uC778%uC2DD%uBCC4%uCF54%uB4DC%20%uD558%uB298%uC0C9%uC740%20%uAD11%uACE0%uCF54%uB4DC%uC774%uB2E4.%0A%0A%21%5BAlt%20text%5D%28./%uD2F0%uC2A4%uD1A0%uB9AC%20-%20%uCE74%uD14C%uACE0%uB9AC%20%uD558%uB2E8%202.jpg%29%0A%0A*%20%uC544%uB798%uB294%20%uC560%uB4DC%uC13C%uC2A4%20%uCE74%uD14C%uACE0%uB9AC%20%uC624%uB978%uCABD%uC5D0%20%uB123%uB294%20HTML%20%uC18C%uC2A4%uC774%uB2E4.%0A%0A%0A%60%60%60%0A%3C%21--%20%uB370%uC2A4%uD06C%uD0D1%20-%20%20%uC6B0%uCE21%20%uC0C1%uB2E8%20--%3E%20%0A%0A%3Cstyle%3E%0A%20%20.jb-ad%20%7B%20float%3A%20right%3B%20margin%3A%205px%200px%2020px%2020px%3B%20width%3A%20336px%3B%20height%3A%20280px%3B%20%7D%0A%20%20@media%20%28%20max-width%3A%201024px%29%20%7B%20.jb-ad%20%7B%20width%3A%20300px%3B%20height%3A%20250px%3B%20%7D%20%7D%0A%20%20@media%20%28%20max-width%3A%20767px%29%20%7B%20.jb-ad%20%7B%20float%3A%20none%3B%20margin%3A%2020px%200px%3B%20width%3A%20100%25%3B%20height%3A%20auto%3B%20%7D%20%7D%0A%3C/style%3E%0A%3Cdiv%20class%3D%22jb-ad%22%3E%0A%20%20%3Cscript%20async%20src%3D%22//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js%22%3E%3C/script%3E%0A%3C%21--%20%uBC18%uC751%uD615%20%uAE00%uC0C1%uB2E8%20--%3E%0A%3Cins%20class%3D%22adsbygoogle%22%0A%20%20%20%20%20style%3D%22display%3Ablock%22%0A%20%20%20%20%20data-ad-client%3D%22ca-pub-*****%22%0A%20%20%20%20%20data-ad-slot%3D%22*****%22%0A%20%20%20%20%20data-ad-format%3D%22auto%22%3E%3C/ins%3E%0A%3Cscript%3E%0A%28adsbygoogle%20%3D%20window.adsbygoogle%20%7C%7C%20%5B%5D%29.push%28%7B%7D%29%3B%0A%3C/script%3E%0A%3C/div%3E%0A%60%60%60%0A%0A---%0A%23%23%23%23%20%uC560%uB4DC%uC13C%uC2A4%20HTML%20%uCF54%uB4DC%uB97C%20%uD2F0%uC2A4%uD1A0%uB9AC%uC5D0%20%uC801%uC6A9%uD55C%uB2E4.%0A%uBE14%uB85C%uADF8%20%uAD00%uB9AC%uC790%uC5D0%uC11C%20%uD50C%uB7EC%uADF8%uC778%20%u25B6%20%uC218%uC775%uC5D0%uC11C%20%27Google%20AdSense%20%28%uBC18%uC751%uD615%29%27%uD50C%uB7EC%uADF8%uC778%uC5D0%uC11C%20%uC0C1%uB2E8%20%uBD80%uBD84%uC5D0%20%uB123%uC5B4%uC8FC%uBA74%20%uB41C%uB2E4.%0A%0A%21%5BAlt%20text%5D%28./20170415230106%uD2F0%uC2A4%uD1A0%uB9AC%20-%20%uC0C1%uB2E8%20%uC6B0%uCE21%203.jpg%29%0A%0A%0A---%0A%0A*%20%uCC38%uACE0%20%uC790%uB8CC%20%0A1.%20%5B%uD2F0%uC2A4%uD1A0%uB9AC%20-%20%uAD6C%uAE00%20%uC560%uB4DC%uC13C%uC2A4%20%uAD11%uACE0%20%uB2EC%uAE30%201%20-%20%uD558%uB2E8%20%uCE74%uD14C%uACE0%uB9AC%20%uC606%uC5D0%20%uB2EC%uC544%uBCF4%uC790.%5D%28http%3A//mmtt.kr/46%29%0A%0A%0A