본문 바로가기

IT/블로그

구글 애드센스 팁 - 사이드 광고 추가하기

세로 광고판 입니다

구글 애드센스 사이드바 광고 추가하기...여백이 있는 사이드에 광고를 추가하고 싶다면 필독!!

구글 애드센스 화면 왼쪽 사이드에 추가하기

본문 왼쪽 사이드에 구글 애드센스 공간을 추가하고 싶다면 아래 내용을 보고 따라하면 아주 쉽게 할 수 있다. 특별히 테마나 스킨의 영향을 줄 만큼 큰 공사는 벌어지지 않는다.

특히, 본문 텍스트 바로 옆으로 조정하고 싶다면, (멀리 창 끝에 붙어 있으면 보기 싫어요 ㅠㅠ) 이 글을 참고해서 하면 굿굿 👍🏻👍🏻

화면 왼쪽 사이드에 구글 애드센스 광고를 넣기 위해서 수정한 내용은 아래와 같다.

먼저, 스킨에서

를 찾아서 그 아래에 아래 코드를 삽입한다.

  • left 의 마이너스 값은 본문에서 얼마나 떨어지게 할까에 대한 포인트

  • 즉, width 랑 똑같은 사이즈로 하는 것이 좋다.

  • top 플러스 값은 본문 위에서 얼마나 아래로 내려오는 지에 대한 값이다.

  • 아래 예는 200px 정도의 width에 본문 시작 부분에서 아래로 600px 아래에 광고창을 넣은 것이다.

그리고, 이

를 포함하고 있는 의 스타일을 아래와 같이 변경해야 한다.

예) 티스토리에서는 class inner 에서 style="position: relative" 추가

<div class="inner" style="position: relative">

이젠 본문 바로 옆에 top, left에 지정한 위치에 구글 애드센스가 하나 잘 나타나기 시작한다.

참고사이트

티스토리 블로그 세로 배너 애드센스 광고 넣기 - 어느 스킨에서나 쉽게 적용하기


화면크기에 따라 구글 애드센스 사라지기

화면이 큰 PC나 브라우저에서만 사이드 광고가 나오도록 수정하고 싶다면,

내가 적용한 방법만 따로 정리해 보면,

먼저 자신의 CSS 파일에 아래와 같이 특정 사이즈 이상인 경우에 display: none 속성을 적용할 수 있도록 작성해 둔다. 여기서 "bz_adsense" 라는 속성이름은 자신이 마음대로 만들어도 된다. 단 만든 이름과 동일한 문자열을 div, p 에 id로 부여하면 된다.

아래 예는 1023px 이하 사이즈 화면인 경우에 사라지도록 작성했다.

/* 사이드바 사라지게, 작은창에서는 */
@media screen and (max-width: 1023px) {
    #bz_adsense {
    display: none;
    }
}

그리고, 실제 구글 애드센스가 있는 화면에 아랭와 같이 id 정보를 추가한다.

앞에 구현한 예와 다른 부분은 동일하고 딱 id="bz_adsense" 만 추가했다.

<!-- 광고용 왼쪽 사이드바 영역(커스텀) -->
<div style="position: absolute; left:-200px; top: 600px; width: 200px;" id="bz_adsense">

    <!-- addiv -->
    <ins class="adsbygoogle"
    style="display:block"
    ...

</div>
<!-- 광고용 왼쪽 사이드바 영역(커스텀) 끝 -->

이젠, 작은 화면에서는 화면 왼쪽에 둔 구글 애드센스가 보이지 않는다.

참고사이트

더 자세한 내용은 아래글을 참고해 보는 것이 좋다.

창크기에 따라 생기고 없어지는 배너 만들기 - 웹마스터 팁 - XpressEngine


광고 금맥 찾으러 고고

trekking girl from https://stocksnap.io/photo/Z5ZVY4FM28