애드센스 반응형 상단광고 2개 설치하기

애드센스 반응형 광고 2개 배치

안녕하세요 이번에 보여드릴거는 애드센스 상단광고 가운데 배치형인데요.

거기에 반응형으로!

위 사진은 저의 블로그를 각각 모바일 태블릿 PC버전으로 해서 본건데요 보시는 것과 같이 PC에서는 대형광고 2개 태블릿에서는 1개 모바일에서는 모바일 광고 1개

이런식으로 나오도록 설정이 되어있습니다 자 그럼 소스를 한번 볼까요?

애드센스_데스크톱_두개_모바일_한개.txt

<span>

.adslot_2 { display:inline-block; width: 320px; height: 100px; }

@media (max-width: 300px) { .adslot_2 { width: 320px; height: 100px; } }

@media (min-width:450px) { .adslot_2 { width: 336px; height: 280px; } }

@media (min-width:900px) { .adslot_2 { width: 336px; height: 280px; } }

</style>

<ins class="adsbygoogle adslot_2"

data-ad-client="ca-pub-XXX"

data-ad-slot="XXX"></ins>

</span>

.adslot_1 { display:inline-block; width: 0px; height: 0px; }

@media (max-width: 300px) { .adslot_1 { display: none; } }

@media (max-width:450px) { .adslot_1 { display: none; } }

@media (min-width:900px) { .adslot_1 { width: 336px; height: 280px; } }

</style>

<ins class="adsbygoogle adslot_1"

data-ad-client="ca-pub-XXX"

data-ad-slot="XXX"></ins>

</span>

</div>

위 텍스트 또는 파일을 받으셔셔 확인 바라며 각각 나와있는 소스중 수정해야할 부분은

12~13번째줄 27~28번째줄에 본인의 애드센스 코드를 넣어주셔야합니다.

그리고 위 애드센스 반응형 광고 소스는 article_rep_desc의 본문 치환자 소스 바로 위에 넣어주시면 됩니다.

그리고 마지막으로 반응형 웹이 잘 적용됬나 확인하는 방법은 http://troy.labs.daum.net/

에 접속하여 각각의 화면 크기에 맞는 기기를 클릭해 보면 됩니다.

간단하게 되어있는 사이트이며 상단 부분에 확인을 원하는 사이트 주소를 입력후 확인해보시면 됩니다. 감사합니다.!

OpenMake