고정 광고 활용 방법과 코드 자료

고정 광고 활용방법

블로그에서 광고는 굉장히 중요한 부분입니다. 전문적으로 블로그의 광고 수익을 본업으로 하시는 분들이 있을 정도로 , 광고는 다양한 기업들의 협찬과 의뢰를 통해 주로 이용되기도 하지만 가장 일반적인 방법은 구글애드센스, 카카오 애드핏, 네이버 애드포스트 에서 제공하는 광고를 사용합니다.

이렇게 자동으로 제공되는 광고들은 운영자가 사용하기 편하게 자동으로 자신이 운영하고 있는 블로그나 사이트에 자동으로 기제가 되므로 그다지 신경을 쓰지 않고 노출을 시키는 경우가 대부분입니다.그러나 이런한 방법만 백프로 의지해서 사용한다면 몇가지 문제가 발생할수 있습니다.

그중 가장 큰 문제는 과다 노출로 인해 블로그(사이트)를 방문한 사용자의 불편함으로 방문 감소와 블로그(사이트) 방문 기피 현상이 발생하고 의도하지 않은 무효 클릭이 발생하는 경우가 많이 있습니다. 그리고 과다 노출과 적당하지 않은 광고기재는 광고노출의 효율성을 떨어뜨려 방문객 대비 수익률이 떨어지는 현상이 발생하게 됩니다.

광고 노출의 가장 효과적인 방법이 무엇일까를 고민 중 가장 좋은 방법은 항상 노출이 되는 지점이 가장 잘 노출이 된다는 상식적인 판단과 사용자들의 불편함을 최소화해야 하는 두 가지 조건으로 고민 중 간단한 방법으로 고정 광고를 노출하는 간단한 코드를 소개해 드립니다. 필요하신 분들은 수정해서 자신의 블로그나 사이트에 맞게 활용하시면 됩니다.

사용하지 않고 방치되는 공간을 적극 활용하는 방법으로 상단 고정 메뉴와 빈 사이드 여백을 활용한 방법입니다. 광고 사이트에 방문해서 자신의 환경에 맞는 광고 코드를 제공 받아서 그 코드를 아래 코드에 적용해서 사용하시면 됩니다.

사이드 왼쪽 활용

HTML 코드

<div class="banner-container">
 <div class="banner">

  <!-----------광고--------------->

  </div>
</div>

CSS 코드

.banner-container {
  position: fixed; /* 배너 컨테이너를 화면에 고정 */
  top: 50%; /* 화면 상단 기준으로 세로 중앙 정렬 */
  left: 0; /* 화면의 왼쪽에 배치 */
  margin-top: -150px; /* 세로 크기의 절반만큼 위로 이동하여 정확히 세로 중앙 정렬 */
}

.banner {
  width: 200px; /* 배너의 가로 길이 */
  height: 700px; /* 배너의 세로 길이 */
  background-color: #f0f0f0; /* 배너의 배경색 */
  border: 1px solid #ccc; /* 배너의 테두리 */
  overflow: hidden; /* 배너 내용이 넘칠 경우 숨김 처리 */
  animation: moveLeft 4s infinite alternate; /* 배너에 왼쪽으로 이동하는 애니메이션 적용 */
}

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

.banner-container {
  display: block; /* 데스크톱에서는 배너 컨테이너를 보이도록 설정 */
}

/* 모바일 및 태블릿 화면에서는 배너를 보이지 않도록 설정 */
@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 이하일 경우 배너 컨테이너를 숨김 */
  }
}

상단 공간 활용

HTML 코드

<div class="headpop" style="padding-left: 90px; min-height: 120px;">
<!-- 광고를 삽입할 컨테이너로, 좌측에 90px 패딩을 주고 최소 높이를 120px로 설정 -->
 
 
 
 <!-----------광고--------------->
   
    

</div>

CSS코드

@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 요소 숨김 */
  }
}

#header p {
    padding: 23px 0; /* 상하 패딩 23px */
    font-family: 'Nanum Myeongjo'; /* 글꼴 설정 */
    font-weight: 800; /* 글꼴 두께 설정 */
    font-size: 1.75em; /* 글꼴 크기 설정 */
    line-height: 32px; /* 줄 간격 설정 */
    letter-spacing: -0.2px; /* 글자 간격 설정 */
    color: #333; /* 글자 색상 설정 */
    position: fixed; /* 화면에 고정 */
    top: 0; /* 상단에 배치 */
    left: 0; /* 좌측에 배치 */
    width: 100%; /* 너비를 100%로 설정 */
    /* background-color: #fff; */ /* 로고의 배경색이 투명이 아니라면 추가 */
    z-index: 1000; /* 다른 요소 위에 배치 */
    margin-left: 20px; /* 왼쪽 여백 20px */
}

고정 광고 활용 방법과 코드 자료