FastBoot 스킨 사이드바 긴 수직형 애드센스 광고 올리기와 여백 처리

반응형

FastBoot 스킨 사이드바 긴 수직형 애드센스 광고 올리기와 여백 처리

티스토리 블로그 FastBoot 반응형 스킨은 많은 티스토리 블로거가 애용하고 있습니다. 특히 사이드바에 길게 위치한 에드샌스 수직형 스카이스크레퍼 광고는 눈에 확 들어옵니다. 많은 티스토리 블로거가 이 수직형 애드센스 광고를 사이드바에 올려 놓고 있는 것을 보게 됩니다.
게시된 광고 크기는 보통 300x600 크기 수준이며 160x600 크기의의 광고도 게시되고 있습니다. 300x600 크키를 기준으로 말씀드리겠습니다. 고정 사이즈의 광고나 반응형의 광고나 거의 같은 모양으로 페이지에 표시되는데 어떻든 300x600 사이즈보다 일반적으로 작습니다. 일단 FastBoot 기본 스킨에서 설정한 사이드바 가로 너비가 300보다 작습니다.(사이드바 가로 너비를 늘여서 사용하시는 분은 같을 수 있겠지요)


FastBoot 스킨이 반응형이므로 반응형 애드센스 광고 코드 선택이 스킨 취지에 맞다고 봅니다. 기기의 브라우저 가로 너비에 따라 상응하는 광고가 게재됩니다.

 

 
● FastBoot 스킨 사이드바 너비
● 반응형 애드센스 코드 생성
● 애드센스 코드 수정(3가지 형태)
사이드바 애드센스 코드 삽입
 

사이드바 너비

FastBoot 스킨은 본문과 사이드바를 포함하는 기본 콘테이너의 크기를 @media 커리로 다음과 같이 설정하고 있습니다.
@media container 가로 너비(width)
min-width: 1200px 1170px
min-width: 992px 970px
min-width: 768px 750px

▶위의 가로 너비를 본문 : 사이드바 9:3(col-md-9:col-md-3) 비율로 구분해 사용합니다.

브라우저 가로 너비가 1200px 이상일 경우 본문 877.5px(1170x9/12) 사이드바 292.5px(1170x3/12)가 됩니다.
사이드바 요소 좌측과 우측에 padding 15px가 설정돼 있습니다. 따라서 사이드바의 가로 너비는 262.5가 됩니다. 
콘테이너 가로 너비가 991px 이하일 경우 모바일 기준으로 사이드바가 아래로 위치되며 본문과 사이드바 가로 너비가 같게 변합니다.


반응형 애드센스 코드 생성

▶애드센스 홈페이지 좌측 메뉴바를 클릭합니다.
내광고=>콘텐츠=>광고 단위를 클릭하여 광고 선택 화면으로 이동합니다.
기존 반응형 광고 코드가 있으면 그 광코드를 사용하고
없으면 +새 광고 단위를 클릭하여 나오는 화면에서 텍스트 및 디스플레이 광고를 클릭합니다.
이어서 나오는 화면에서 반응형을 선택하고 광고유형은  텍스트 및 디스플레이 광고를 선택하고 좌측 상단의 광고 이름을 입력하고 좌측 하단 저장 및 코드 생성을 클릭하여 광고 코드를 생성합니다. 아래 항목은 나중에 검토해도 됩니다.
popup 된 광고 코드를 복사하여 따로 저장하던가 광고 목록에서 코드 가져오기로 갖고 올 수있습니다.
밑의 코드는생성된 반응형 애드센스 코드입니다. 

 

<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 나의 반응형 코드 이름 -->
<ins class="adsbygoogle" style="display: block;"
      data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
       data-ad-slot="xxxxxxxxxx"
       data-ad-format="auto"
       data-adsbygoogle-status="done">
</ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});
</script>

 


여러 애드센스 광고를 게시하는 경우 상단의 스크립트는 최초 한번만 작성해도 됩니다.
※애드센스 도움말
한 페이지에 광고 단위가 여러 개인 경우 각 광고 단위에 대해 <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>를 포함해야 하나요?
반드시 그럴 필요는 없습니다. adsbygoogle.js는 한 번만 로드할 수 있습니다. 


광고 코드 수정

▶광고 코드 <ins> 테그의 style에서 display: block을 display: inline-block으로 변경합니다.
테스크탑보다 작은 기기의 너비 사이즈에서 오히려 사이드바 가로 너비는 커집니다. <ins>요소를 인라인 요소로 만들어   중앙 정렬을 위한 text-align: center를 <ins>태그를 감싸는 상위 요소의 스타일에 추가합니다.
▶<ins> 요소가 인라인 요소로 되므로 스타일에 width: 100%를 추가합니다. 
▶300x600 사이즈 정도의 광고 게재를 위해 height: 600px를 추가합니다.
▶수정된 광고 코드 <ins class="adsbygoogle" style="display: inline-block; width: 100%: height: 600px"---></ins>

(1) 많이 쓰이고 있는 애드센스 코드 삽입 HTML 코드 형태

<div class="module_plugin">---①

<s_sidebar_element>---②
<!-- 나의 애드센스 광고 코드 이름 -->---③
  <div class="panel panel-default">---④
     <h4 class="panel-heading"><i class="fa fa-credit-card"></i> Adsense</h4>---⑤
     <div class="panel-body" style="text-align:center;">---⑥
         <ins class=" "adsbygoogle" -----애드센스 광고 코드-----></ins>---⑦
     </div>
   </div>
<s_sidebar_element>
</div>

 

 

▶1번 요소는 사이드바에서 광고 코드를 삽입할 경우 자동 생성되는 요소입니다. padding-bottom: 9px가 스타일에 설정돼있습니다.

▶2번 요소는 다른 사이드바 모듈에도 포함된 공통적 요소입니다. 생략 무방합니다.
▶3번 주석 처리된 부분은 애드센스 광고 코드에 임의로 지정한 이름입니다.
▶4번 요소 스타일에 상.하.좌.우측에 padding 3px가 설정돼있습니다. 광고 게재 사이즈 가로 너비는     256.5px(292.5px-3px-3px) 가 됩니다. 개제되는 광고 가로너비가 이 보다 작으면 세로 길이는 600px까지 게재될 수 있습니다. 
▶스킨 style.css에서 4번 요소와 7번 요소(<ins class=" "adsbygoogle"-->)  클래스 adsbygoogle에 background-color: #FFF 또는 background:#FFF로 돼있어 본 코드는 광고를 게재하는 요소의 사이즈 보다 작은 광고가 게제될 경우 여백이 흰 바탕으로 나옵니다.


 

(2) 흰 여백이 마음에 안들면 바탕색을 주변 바탕색에 맞춥니다.

▶4번 요소와 7번 요소 스타일에 background-color: transparent를 추가합니다. 다른 부분은 그대로 둡니다. 

<div class="panel panel-default" style="background-color: transparent">

<ins class="adsbygoogle" style="display: inline-block; width: 100%: height: 600px; background-color: transparent"---></ins> 
 
▶background-color: transparent는 상위 요소의 바탕색을 상속합니다.
▶본 코드 게시형태는 바탕색은 주변과 같지만 5번 광고 타이틀(Adsense)과 게재되는 광고내용과 떨어져 있습니다.

 

 

(3) 애드센스 광고만 게시 

 

▶1, 3, 4번 요소와 5번 광고 타이틀 요소 6번 요소 등 7변 요소를 외의 요소를 제거하고 7번 요소와 7번 요소를 감싸는 DIV요소(스타일 text-align: center와 다음 사이드바와 구분하가 위한 margin-bottom: 20px)를 상위 요소로 7번 요소위에 둡니다.
<!-- 나의 애드센스 광고 코드 이름 -->
<div style="text-align:center; margin-bottom: 20px">
       <ins class="adsbygoogle" style="display: inline-block; width: 100%: height: 600px; background-color: transparent "---></ins>
</div>


 

사이드바 애드센스 코드 삽입

●블로그 사이드바에 광고를 올리는 방법은
▶블로그 관리 메뉴에서 꾸미기=>사이드바에서

→삽입하려면 블로그 관리 매뉴 중 플러그인에서 배너출력을 지정해주어야합니다.

→사이드바 화면에 들어가면 [플러그인] HTML 배너출력항목이 추가됩니다. 좌측 기본 모듈 항목에서 [플러그인] HTML 배너출력을 클릭하면 우측 사이드바 항목에 [플러그인] HTML 배너출력이 삽입됩니다.

→편집을 선택 배너 이름과 애드샌스 코드를 입력하고 확인후 사이드바 화면 우측 하단 변경사항 저장을 클릭합니다. 사이드바 항목은 사이드바 항목 좌측 줄 세개 버튼을 마우스로 끌어 순서 변경이 됩니다. 

▶스킨 HTML에 직접 올리는 방법
→스킨 HTML <sidebar> 태그아래 원하는 부분에 애드센스 코드를 삽입합니다.
→사이드바 또는  스킨 HTML에 삽입하는 코드는 동일합니다.
→사이드바에서 삽입하면 코드상단에  <div class="module_plugin"> 상위 <div> 요소가 추가됩니다.
반응형