티스토리 블로그 상단에 구글 에드센스 광고 2개 넣는 또 다른 방법

앞선 글에서 블로그 상단에 구글 에드센스 광고 2개 노출하는 방법에 대해서 자세하게 설명이 되어 있는데 혹시 그 방법을 따라 했을 때 안 되는 사람을 위해 다시 작성하게 되었습니다. (왜냐면 제가 앞의 방법으로 했는데 안되더라고요...)

 

전체적인 방법은 앞의 글을 참고해주시고 이번에는 간단히 코드를 수정하는 방법에 대해서 알아보도록 하겠습니다.

티스토리 블로그 상단에 구글 에드센스 광고 2개 넣는 방법(너무 쉬워서 졸림 주의)

우선 앞선 글의 코드가 안 먹히는 분들은 아래에 코드를 다운로드하여서 사용하시면 됩니다.

블로그 상단 PC 2개, 폰 1개 광고 등록 코드 예시2.txt

0.00MB

추가로 설명하면 아래와 같이 코드가 있을 때 환경에 따라 몇 가지 수정해주시면 됩니다.

<style>
@media (min-width:780px){
    .my-ad-pc{width:300px;height:250px;display:inline-block}
    .my-ad-mobile{display:none}
}
@media (max-width:780px){
    .my-ad-pc{display:none}
    .my-ad-mobile{display:inline-block;width:300px;height:250px}
}
</style>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- PC1 -->
<ins class="adsbygoogle my-ad-pc"
     data-ad-client="ca-pub-★"
     data-ad-slot="♠"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- PC2 -->
<ins class="adsbygoogle my-ad-pc"
     data-ad-client="ca-pub-★"
     style="margin-left:20px"
     data-ad-slot="♣"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- mobile -->
<ins class="adsbygoogle my-ad-mobile"
     data-ad-client="ca-pub-★"
     data-ad-slot="◆"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

 

기존의 코드는 ★ ♠, ★ ♣ 총 4개의 칸에 3개의 숫자를 썼다면 이번 방법은 추가로 애드센스에서 광고를 하나 더 생성하여 ★ ♠, ★ ♣, ★ ◆ 총 6개의 칸에 4개의 숫자를 넣어주시면 됩니다.  (★은 중복된 자신의 고유 애드센스 번호고 ♠, ♣, ◆는 각각 애드센스의 고유번호입니다.

 

위 코드를 만드신 분의 출처는 하기 댓글을 참고 부탁드립니다. 오리지널 그대로 받아보시려면 댓글의 링크로 가셔서 다운로드하으셔도 무방합니다.

오리지널 코드를 반영을 하면 하나 문제가 생길 수 있는데 광고의 배열입니다. PC 상단에 광고 2개가 나오는데 아래와 같이 가로로(좌) 나오지 않고 세로로(우) 나오는 경우가 있습니다. 

그때 파일에서 아래 초록색 부분을 수정해주면 되는데 사실 my-ad-mobile은 건들 필요 없고 my-ad-pc 부분에 width:300px; height:250px 부분의 숫자를 조정해주시면 됩니다. 보통 사이즈는 pc와 모바일에 따라 다르지만 336x280, 300x250, 320x100, 320x50 px 등을 사용하는데 개인의 취향에 맞게 변경하시면 될 듯합니다. 저는 300px x 250px를 하니 정상적으로 2개가 노출되었습니다.

추가로 광고 크기 픽셀에 대한 부분을 건들고 싶지 않거나 큰 게 좋으신 분들은 크기는 336x280으로 유지하고 아래와 같이 PC2 부분에 margin-left:20px을 줄이거나 늘리면서 광고 간 거리를 좁히고 넓힐 수 있습니다. 

코드를 직접 배워서 만드셨다고 들었는데 정말 깔끔하게 누구든 수정하기 쉽게 잘 만들어주신 코드라 쉽게 조정이 가능했었네요. 코드 만들어 주신 분께 이 자리를 빌려 감사함을 표합니다. 

 

* 반영까지는 2-3시간 정도 걸립니다. 혹시나 모바일로 접속했을 때도 2개가 보인다면 바로 코드를 삭제해주시고 다시 천천히 따라 해 보심을 추천드립니다. 

 

무역왕이 될 남자다! by. Geo

 

글이 도움됐다면 로그인도 필요 없는 ☆공감★ 한번 꾸우욱~! 도움이 되었길 바라며. 오늘도 즐거운 하루!!