블로그 수익 개선을 위한 고정 광고 활용 방법과 간단한 코드 소개

고정 광고 활용 방법

블로그에서 광고는[ 블로그 수익 ]에서 매우 중요한 요소이며 [고정 광고 ]를 활용해서 수익을 개선하는 방법입니다. 가장 일반적인 광고는 구글 애드센스, 카카오 애드핏, 네이버 애드포스트와 같은 플랫폼에서 제공하는 광고입니다.

블로그 수익 개선 광고 활용

자동으로 제공되는 광고는 블로그 운영자가 쉽게 설정할 수 있어, 별다른 신경을 쓰지 않고 노출하는 경우가 많습니다. 하지만 이러한 방법에만 의존하게 되면 몇 가지 문제가 발생할 수 있습니다.

가장 큰 문제는 과다 노출로 인해 방문자의 불편함을 초래하는 것입니다. 이는 블로그 방문 감소와 방문 기피 현상을 유발하며, 의도하지 않은 무효 클릭을 초래할 수 있습니다. 또한, 과도한 광고 노출과 부적절한 광고 배치는 광고 효율성을 떨어뜨려 방문객 대비 수익률이 감소하는 현상이 발생하게 됩니다.

효과적인 광고 노출 방법은 무엇일까요?

가장 좋은 방법은 항상 노출되는 지점을 활용하면서 사용자들의 불편함을 최소화하는 것입니다. 이러한 기준에 따라 고정 광고를 노출할 수 있는 간단한 코드를 소개합니다. 필요한 분들은 자신의 블로그나 사이트에 맞게 수정하여 활용하시기 바랍니다.

사이드 고정 광고 활용

HTML 코드

이 코드는 웹 페이지에 고정된 배너 광고를 구현하기 위한 HTML 및 CSS 구성 요소를 포함하고 있습니다. 배너는 사용자 화면의 왼쪽 중앙에 위치하며, 부드러운 애니메이션 효과를 통해 사용자에게 시각적으로 주목받도록 했습니다.

코드는 모바일 및 태블릿 환경에서도 잘 작동하도록 화면 너비가 768픽셀 이하인 경우, 배너 컨테이너가 숨겨지도록 @media 쿼리를 사용하여 CSS를 조정합니다. 화면 너비가 1500픽셀 이하일 경우에는 배너가 표시되지 않도록 설정되어 있어, 작은 화면에서는 베너가 표시되지 않습니다.

<div class="banner-container">
    <div class="banner">
        <span class="banner-text">고정 사이드 애니메이션 광고 영역</span>
        <!-----------광고--------------->
    </div>
</div>

CSS 코드

<style>
    .banner-container {
        position: fixed; /* 배너 컨테이너를 화면에 고정 */
        top: 50%; /* 화면 상단 기준으로 세로 중앙 정렬 */
        left: 0; /* 화면의 왼쪽에 배치 */
        transform: translateY(-50%); /* 세로 중앙 정렬을 위한 변환 */
    }

    .banner {
        position: relative; /* 애니메이션이 적용될 수 있도록 설정 */
        width: 200px; /* 배너의 가로 길이 */
        height: 700px; /* 배너의 세로 길이 */
        background-color: #f0f0f0; /* 배너의 배경색 */
        border: 1px solid #ccc; /* 배너의 테두리 */
        overflow: hidden; /* 배너 내용이 넘칠 경우 숨김 처리 */
        animation: moveLeft 4s infinite alternate; 
        /* 배너에 왼쪽으로 이동하는 애니메이션 적용 */
        display: flex; /* Flexbox를 사용하여 내용 정렬 */
        justify-content: center; /* 수평 중앙 정렬 */
        align-items: center; /* 수직 중앙 정렬 */
        text-align: center; /* 텍스트 중앙 정렬 */
        font-size: 18px; /* 글자 크기 설정 */
        color: #333; /* 글자 색상 설정 */
        padding: 20px; /* 내부 여백 추가 */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 약간의 그림자 추가 */
        writing-mode: vertical-rl; /* 텍스트를 세로로 정렬 */
    }

    @keyframes moveLeft {
        from {
            transform: translateX(0); /* 애니메이션 시작 시 위치 */
        }
        to {
            transform: translateX(-200px); 
            /* 애니메이션 종료 시 위치, 왼쪽으로 200px 이동 */
        }
    }

    /* 모바일 및 태블릿 화면에서는 배너를 보이지 않도록 설정 */
    @media only screen and (max-width: 768px) {
        .banner-container {
            display: none; 
            /* 화면 너비가 768px 이하일 경우 배너 컨테이너를 숨김 */
        }
    }

    /* 화면 너비가 1500px 이하일 경우 배너를 보이지 않도록 설정 */
    @media only screen and (max-width: 1500px) {
        .banner-container {
            display: none; /* 화면 너비가 1500px 이하일 경우 배너 컨테이너를 숨김 */
        }
    }
</style>

한강-회복하는 인간

상단 고정 광고 활용

HTML 코드

광고는 사용자가 웹 페이지를 탐색할 때 눈에 잘 띄는 위치에 고정하면 됩니다.

현재는 headpop 클래스는 좌측에 패딩을 주어 광고 내용이 너무 붙지 않도록 하며, 최소 높이를 설정하여 적절한 공간을 확보하게 했습니다.

.CSS에서 모바일 화면에서는 광고가 숨겨지도록 설정했습니다.

또한, 특정 위치에 고정되어 사용자가 스크롤하더라도 항상 보이게 하여 쉽게 접근할 수 있도록 합니다.

<div class="headpop" style="padding-left: 90px; min-height: 120px;">
    <!-- 광고를 삽입할 컨테이너로, 좌측에 90px 패딩을 주고 최소 높이를 120px로 설정 -->
    <div class="ad-content">
        <!-----------광고--------------->
        광고 내용이 여기에 들어갑니다.
    </div>
</div>

고정 광고 CSS 코드

<style>
    @media (max-width: 768px) {
        #header {
            position: static; /* 모바일 화면에서는 fixed 속성 제거 */
        }

        #tt-body-page .post-cover {
            margin-top: 90px; /* 모바일 화면에서 .post-cover 요소의 상단 마진 설정 */
        }

        #tt-body-page #container {
            padding-top: 70px; /* 모바일 화면에서 #container 요소의 상단 패딩 설정 */
        }

        .headpop {
            display: none; /* 모바일 화면에서 .headpop 요소 숨김 */
        }
    }

 

    /* 광고 내용 스타일 추가 */
    .ad-content {
        /* 추가적인 스타일을 설정할 수 있습니다. */
        font-size: 16px; /* 광고 내용의 글자 크기 */
        color: #white; /* 글자 색상 */
    }
</style>

광고 내용이 여기에 들어갑니다.