친절한효자손 취미생활

친효스킨 커스터마이징 정보를 제공하는 카테고리 입니다. 먼저 안내드릴 부분이 있습니다. 본문에서 제공하는 방법이 최종적인 방법이 아닐 수 있습니다. 계속 수정하고 연구하여 더 좋은 방법이 차후에 제공될지도 모릅니다. 만약 새로운 업데이트 내용이 나온다면 본문에서도 안내해 드리도록 하겠습니다.


현재 친효스킨에는 최상단 및 최하단에 애드센스를 적용할 수 있도록 설계가 되어 있습니다. 이곳에는 가로로 긴 형태의 애드센스가 노출되도록 하는게 목적인데 특정 해상도에서는 지나치게 큰 광고가 출력되는 불편함이 있었습니다. 이 부분을 수정하는 코드를 만들었습니다. 이곳에서 드리는 설명은 친효스킨 1.14 버전을 기준으로 안내해 드리고 있습니다. 참고하시기 바랍니다.


HTML 수정

먼저 기존 친효스킨의 HTML 구조를 조금 바꿨습니다. 최상단 애드센스의 위치를 변경했습니다. 아래의 코드를 살펴봐 주시기 바랍니다.


<!-- 최상단 빈공간 시작 -->

<div id="topEmpty"></div>

<!-- 최상단 빈공간 끝 -->


<!-- 최상단 애드센스 시작 -->

수정된 애드센스 코드

<!-- 최상단 애드센스 끝 -->


<!-- 콘테이너: 사이드바+본문 시작 -->

<div id="container">


친효스킨 1.14 버전까지는 최상단 애드센스 코드가 원래는 <div id="container"> 바로 아래에 있었습니다. 위치를 위에 나와있는 것처럼 최상단 빈공간과 콘테이너가 시작되는 사이로 옮겼습니다. 이렇게 위치를 수정해 주시면 됩니다. 또한 애드센스 코드도 약간 수정을 했습니다. 오리지널 반응형 애드센스 코드에서 필요한 부분이 딱 두 가지 입니다. 먼저 아래를 봐주시기 바랍니다.


<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"

     style="display:block"

     data-ad-client="●"

     data-ad-slot="■"

     data-ad-format="horizontal"

     data-full-width-responsive="true"></ins>

<script>

     (adsbygoogle = window.adsbygoogle || []).push({});

</script>


오리지널 반응형 애드센스 코드의 상태 입니다. 여기에서 필요한 부분은 client 값과 slot 값 입니다. 위에 각각 검정 동그라미와 검정 네모로 표시해 둔 부분입니다. 이 두 개의 값을 아래의 새로운 애드센스 코드에 같은 위치에 붙여넣기를 해주시면 됩니다.


참고로 파란색으로 표시해둔 data-ad-format="horizontal" 부분은 원래는 horizontal이 아니고 auto 입니다. 애드센스의 광고 형태를 정하는 부분으로 horizontal은 수평 형태의 반응형 광고가, rectangle은 직사각형 형태가, vertical은 수직 형태의 광고를 출력하겠다는 의미 입니다.


<!-- 최상단 애드센스 시작 -->

<div id="topAdss">

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

    <ins class="adsbygoogle" style="display:block;" data-ad-client="●" data-ad-slot="■" data-ad-format="horizontal" data-full-width-responsive="true"></ins>

    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

</div>

<!-- 최상단 애드센스 끝 -->


각 값을 같은 기호로 표시했으니 같은 값을 그대로 붙여넣기를 해주시고 위의 코드를 전체 모두 복사하셔서 사용하시면 됩니다. 위의 코드를 첨부파일로 올려놓도록 하겠습니다. 최하단도 동일한 광고 코드 입니다. slot 번호만 바꿔서 사용하시면 됩니다.


친효스킨 최상단 최하단 애드센스 수정 코드 HTML (Ver 1.15).txt


최종적으로 이렇게 수정하시면 됩니다.


이 위치로 정확히 수정되었는지 다시 한 번 확인해 주시기 바랍니다. 최하단 또한 같은 방법으로 진행하시면 됩니다. 단 최하단의 경우는 위치 수정이 필요 없습니다.


CSS 수정

스타일 부분에서 수정이 있습니다. 먼저 아래의 부분을 찾아주시기 바랍니다.


CSS 부분에서 Ctrl + F를 눌러서 애드센스라고 검색하시고 이 부분을 찾아주시면 됩니다. 애드센스 관련 시작 부분부터 끝나는 부분까지 안의 내용을 모두 변경해야 합니다. 최종 수정 코드는 아래의 첨부파일을 다운로드 받으시고 사용하시면 됩니다. 참고로 현재 친효스킨은 1.15 버전까지 업로드가 완료 된 상태 입니다. 1.15를 사용 중 이시면 이 과정은 생략하셔도 됩니다.


친효스킨 최상단 최하단 애드센스 수정 코드 CSS (Ver 1.15).txt


이렇게 수정하시고 직접 브라우저와 스마트폰에서 자신의 블로그로 접속하시어 애드센스가 정상적으로 출력되는지 확인해 보시기 바랍니다. 또한 아래의 주석도 검색하여 찾아주시기 바랍니다. "최상단 최하단 애드센스" 라고 검색하시면 됩니다.


/* 최상단 최하단 애드센스 넣을 경우 : 0 입력 */

@media (min-width: 768px) {

    #topEmpty,

    #bottomEmpty {

        height: 20px; /* 기본값: 20px */

    }

}


여기에서 주황색으로 표시된 부분을 0으로 변경해 주시기 바랍니다. px 단위는 생략합니다. 그냥 숫자 0만 넣으세요. 끝.





공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드

  1. 비밀댓글입니다
    2019.09.18 13:00
    • 안녕하세요. 말씀대로 스킨 변경 시 기존 설정은 모두 사라집니다. 친효스킨으로 다시 재적용하시면 애드센스도 다시 세팅해서 넣어야 합니다.
      2019.09.18 15:53 신고
  2. 비밀댓글입니다
    2020.01.07 23:00
  3. 감사합니다. 잘 적용하였습니다.
    애드센스 코드부분 주석을 제거 안하고 자책하고 있다가 이제야 주석제거했네요 ^^;;
    2020.03.13 11:11 신고
  4. 안녕하세요

    효자손님 블로그를 알게되고나서

    어제부터 애드센스 항목 글 다읽어가면서 스킨을 조금씩 변경중인데요

    지금 거의다했는데, 최상단/최하단 애드센스 스킨적용관련해서
    지금 적용중인데, 혹시 글로남겨서 정확히 부족한 부분을 아실순없겠지만.

    남기신 글중에,, 하단코드광고는 slot 뿐 아니라, client 도 같이 상단 코드랑 동일한걸 넣으면되는거죠?

    최대한 글이랑.. 사진첨부해서 해봤는데.. 문제를 모르겠어서이렇게 문의드립니다.
    아래 제가 작업중인 블로그인데 확인한번 부탁드립니다. 굿밤되세요
    https://2gethermrseo.tistory.com/
    2020.03.23 21:50 신고
    • 안녕하세요, 여기에 나온건 1.15버전용 입니다. 친효스킨 1.16버전용 다운로드 페이지에 상세한 방법이 나와 있습니다. 문서번호 3119 입니다.
      2020.03.23 22:54 신고
    • 조금 더 기다려 보세요. 뭔가 안 나온거라면 뭔가 잘 못 설정이 된 거겠죠? 이 이상은 저도 확인 불가 합니다.
      2020.03.23 23:57 신고
    • 찾아보겠습니다.

      늦은시간까지 대응감사합니다.

      좋은밤되세요.
      2020.03.24 00:00 신고
  5. 친절한효자손님
    최상단 최하단에 Client와 Ad Slot을 넣었습니다.
    이후에 CSS에도 Pixel을 0으로 수정하였습니다.

    그런데도 아무런 변화가 없네요. 짐작 가는 문제상황이 있으실까요?
    2020.07.07 12:24 신고