블로로그 ,사이트에서 화면을 따라 다니는 배너 코드 (수정본)

사이드 베너 코드

 

사이드 배너광고 코드는 사이트, 블로그의 메인 또는 글 페이지에서 따라 다니는 배너광고입니다. 전에 올렸던 코드의 수정본입니다. 기존 배너코드는 모바일 접속 시 광고가 화면에서 사라지는 기능이 있었지만 백그라운드에서 사라지지 않고 그대로 있었습니다.

 

아래 수정한 사이드 배너코드는 모바일 상태가 되면 배너코드 자체를 실행이 안 되게 수정했습니다. 일반적으로 사용 시 굳이 모바일에서 보이지 않는 사이드 배너 광고를 삭제까지 할 필요는 없지만 메모리를 소모하기도 하고 더 큰 문제는 콘솔에 에러 메시지를 표시하기 때문에 검색봇은 오류를 인식해서 성능 검사 점수를 하락시킵니다.

 

아래 사이드 배너 코드를 자신의 광고 코드에 맞게 수정해서 사용하시면 됩니다. 사이드 배너 광고의 위치도 변경해서 사용하시고 페이지의 해상도의 크기를 계산해서 설정하시면 사이드 배너 광고의 위치를 설정할 수 있습니다. 최대한의 노출과 사용자의 불편함을 최대한으로 줄이도록 광고의 위치를 설정하시면 됩니다.

배너 CSS 코드 설명

 

오른쪽 사이드 배너

 

position: absolute; /* 요소를 절대 위치에 배치 */

width: 160px; /* 요소의 너비 설정 */

right: 50%; /* 요소를 오른쪽에서 50% 떨어진 위치에 배치 */

top: 60px; /* 요소를 위에서 60px 떨어진 위치에 배치 */

margin-right: 470px; /* 요소의 오른쪽 여백 설정 */ 이부분을 수정하시면 위치 변경

z-index: 9999; /* 요소의 z-index 설정, 다른 요소 위에 표시되도록 함 */

transform: translateX(-50%); /* 요소를 수평 중앙으로 이동 */

 

왼쪽 사이드 배너

 

position: absolute; /* 요소를 절대 위치에 배치 */

width: 160px; /* 요소의 너비 설정 */

left: 50%; /* 요소를 왼쪽에서 50% 떨어진 위치에 배치 */

margin-left: 650px; /* 요소의 왼쪽 여백 설정 */ 이부분을 수정하시면 위치 변경

top: 60px; /* 요소를 위에서 60px 떨어진 위치에 배치 */

z-index: 9999; /* 요소의 z-index 설정, 다른 요소 위에 표시되도록 함 */

transform: translateX(-50%); /* 요소를 수평 중앙으로 이동 */

 

카카오 애드핏 광고 설정

 

var adArea = document.createElement('ins');

adArea.className = 'kakao_ad_area'; adArea.style.display = 'block'; // 광고 영역을 보이도록 설정

adArea.setAttribute('data-ad-unit', '광고코드'); // 광고 단위 설정

adArea.setAttribute('data-ad-width', '160'); // 광고 너비 설정

adArea.setAttribute('data-ad-height', '600'); // 광고 높이 설정

floatLeftElement.appendChild(adArea);

 

구글 애드센스 광고 설정

 

var adArea = document.createElement('ins');

adArea.className = 'adsbygoogle'; adArea.style.display = 'block'; // 광고 영역을 보이도록 설정

adArea.setAttribute('data-ad-client', 'ca-pub-광고 클라이언트 코드'); // 광고 클라이언트 설정

adArea.setAttribute('data-ad-slot', '광고 슬롯 코드'); // 광고 슬롯 설정

adArea.setAttribute('data-ad-format', 'auto'); // 광고 포맷 설정

adArea.setAttribute('data-full-width-responsive', 'true'); // 광고의 가로폭 반응형 설정

floatRightElement.appendChild(adArea);

코드

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<style>
    #floatLeft {
        position: absolute;
        width: 160px;
        right: 50%;
        top: 60px;
        margin-right: 470px;
        z-index: 9999;
        transform: translateX(-50%);
    }

    #floatRight {
        position: absolute;
        width: 160px;
        left: 50%; 
        margin-left: 650px;
        top: 60px;
        z-index: 9999;
        transform: translateX(-50%);
    }

    @media (max-width: 1300px) {
        #floatLeft, #floatRight {
            display: none;
        }
    }
</style>

<div class="height">
    <div id="floatLeft">
        <script>
            if (window.innerWidth > 768) {
                var floatLeftElement = document.querySelector('#floatLeft');
                if (floatLeftElement) {
                    var adArea = document.createElement('ins');
                    adArea.className = 'kakao_ad_area';
                    adArea.style.display = 'block';  
                    adArea.setAttribute('data-ad-unit', '광고코드');
                    adArea.setAttribute('data-ad-width', '160');
                    adArea.setAttribute('data-ad-height', '600');
                    floatLeftElement.appendChild(adArea);
        
                    var script = document.createElement('script');
                    script.src = "//t1.daumcdn.net/kas/static/ba.min.js";
                    script.async = true;
                    document.body.appendChild(script);
                }
            }
        </script>
    </div>
</div>

<div class="height">
    <div id="floatRight">
        <script>
            if (window.innerWidth > 768) {
                var floatRightElement = document.querySelector('#floatRight');
                if (floatRightElement) {
                    var adArea = document.createElement('ins');
                    adArea.className = 'adsbygoogle';
                    adArea.style.display = 'block';
                    adArea.setAttribute('data-ad-client', 'ca-pub-광고코드');
                    adArea.setAttribute('data-ad-slot', '광고코드');
                    adArea.setAttribute('data-ad-format', 'auto');
                    adArea.setAttribute('data-full-width-responsive', 'true');
                    floatRightElement.appendChild(adArea);
        
                    var script = document.createElement('script');
                    script.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6217837578385391";
                    script.async = true;
                    script.crossOrigin = "anonymous";
                    document.body.appendChild(script);

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

<script>
$(document).ready(function() {
    if (window.innerWidth > 1300) {
        var floatPositionLeft = parseInt($("#floatLeft").css('top'));
        var floatPositionRight = parseInt($("#floatRight").css('top'));

        $(window).scroll(function() {
            var scrollTop = $(window).scrollTop();
            var newPositionLeft = scrollTop + floatPositionLeft + "px";
            var newPositionRight = scrollTop + floatPositionRight + "px";

            $("#floatLeft").stop().animate({
                "top": newPositionLeft
            }, 500);

            $("#floatRight").stop().animate({
                "top": newPositionRight
            }, 500);
        }).scroll();
    } else {
        $("#floatLeft").hide();
        $("#floatRight").hide();
    }
});
</script>

 

티스토리 HTML 배너출력에 위에 코드를 수정해서 넣어주시면 됩니다.

 

티스토리배너설정

구글 수동 광고 코드 설정 방법

 

구글애드센스에 접속해서 광고란에 들어가시면 광고단위 기준 메뉴가 있습니다.

광고단위기준

디스플레이 광고 설정

 

구글디스플에이광고

새디스플레이광고

 

새 디스플레이 광고에서 수직형 광고단위 이름 설정 광고크기는 반응형 만들기 버튼을 누릅니다.

 

구글광고코드생성기

구글 광고 코드 생성기의 코드를 복사해서 코드 변경 작업을 해주시면 됩니다.

밑에 글은 구글 광고 코드 생성기로 변환된 코드를 본인에 맞게 수정하기  쉽게 하는 구글 광고변환 코드생성기  입니다.아래  구글광고 코드 변환생성기를 이용하시면 쉽고 빠르게 변경할수 있습니다.

 

 

간단한 구글 광고 코드 변환기 (공고 노출 ,위치 변경)