[ HTML, CSS 코드 활용 ] 고정 광고로 블로그 수익 높이는 방법

고정 광고 활용으로 블로그 수익을 높이는 팁과 코드 적용법

고정 광고로 블로그 수익 증대하기: 부드러운 애니메이션 광고 설정하기

고정 광고 활용 방법

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

블로그 수익 개선 광고 활용

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

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

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

가장 좋은 방법은 항상 노출되는 지점을 활용하면서 사용자들의 불편함을 최소화하는 것입니다. 이러한 기준에 따라 고정 광고를 노출할 수 있는 간단한 코드를 소개합니다.

사이드 고정 광고 활용

HTML 코드

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

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

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

CSS 코드

한강-회복하는 인간

상단 고정 광고 활용

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>