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

Posted by 넉넉한

2018. 1. 19. 23:56 웹페이지

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 된 광고 코드를 복사하여 따로 저장하던가 광고 목록에서 코드 가져오기로 갖고 올 수있습니다.

밑의 코드는생성된 반응형 애드센스 코드입니다.

<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>

여러 애드센스 광고를 게시하는 경우 상단의 스크립트는 최초 한번만 작성해도 됩니다.

※애드센스 도움말

한 페이지에 광고 단위가 여러 개인 경우 각 광고 단위에 대해 <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>

<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를 추가합니다. 다른 부분은 그대로 둡니다.

▶background-color: transparent는 상위 요소의 바탕색을 상속합니다.

▶본 코드 게시형태는 바탕색은 주변과 같지만 5번 광고 타이틀(Adsense)과 게재되는 광고내용과 떨어져 있습니다.

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

▶1, 3, 4번 요소와 5번 광고 타이틀 요소 6번 요소 등 7변 요소를 외의 요소를 제거하고 7번 요소와 7번 요소를 감싸는 DIV요소(스타일 text-align: center와 다음 사이드바와 구분하가 위한 margin-bottom: 20px)를 상위 요소로 7번 요소위에 둡니다.

</div>