티스토리 블로그 세로 배너 애드센스 광고 넣기 - 어느 스킨에서나 쉽게 적용하기

네이버, 이글루스, 티스토리 블로그 다 한 번씩 해보면서

티스토리가 다른 서비스형 블로그에 비해 커스터마이징이 용이하고 구글 애드센스와 같은 광고 달기도 편리해서 좋았습니다.

 

그리고 또 한가지 장점은 깔끔한 스킨 템플릿!

 

요즘 웹사이트 디자인 트렌드에 맞게 사이드바를 숨기고 화면을 본문 하나로 와이드한 화면을 십분 살린 것들이 많아서 저도 이런 스킨을 사용하고 있는데요.

 

그런데 의외로 한 가지 불편했던 점이 있었는데, 반응형 스킨은 사이드바 쪽에 광고를 달아봐야 노출이 거의 안된다는 점입니다.

 

<세로 배너 광고>

 

 

 

이렇게 본문과 사이드바 두 단으로 구성되어있는 블로그에서는 사이드바에 이미지와 링크를 달아놓으면 어디에서나 광고를 노출시킬 수 있는데요. (오른쪽 상단 그림의 쿠팡 이미지)

 

 

 

 

요즘 반응형 스킨을 보면 왼쪽과 같이 평상시에는 글만 보이고, 우측이나 좌측상단의 사이드바 아이콘을 눌러야만 오른쪽 그림과 같이 사이드바가 노출되게 됩니다. 따라서 반응형 스킨을 사용하는 경우 사이드바에 광고 이미지를 달아놔봐야 노출도가 매우 떨어질 수 밖에 없습니다.

 

 

가로형 배너광고(아래 좌측 그림)는 아래와 같이 본문을 작성하는 중간중간에 HTML로 광고코드를 삽입하면 그만이지만,

세로형 배너광고(우측 아래 그림)는 보통 본문 영역이 아닌 본문의 좌우측에 자리잡고 있으므로 본문을 작성하면서 넣을 수 없습니다.

 

_##]_##]

 

 

그래서 사이드바가 아닌 본문의 옆쪽에 세로형 배너 광고를 달기 위해 티스토리의 스킨편집에서 HTML을 수정해보았는데, 생각보다 매우 간단했습니다. 지금부터 알려드리는 과정을 따라하시면 누구나 쉽게 세로형 배너를 추가하실 수 있습니다~

 

 

 

---

세로형 배너 달기위한 HTML 수정하기

---

 

1. 세로형 배너 광고 넣을 HTML 위치 확인

 

 

먼저 광고를 넣을 블로그로 들어가서 아무 글을 클릭하여 글 페이지로 들어갑니다.

 

여기에서 크롬을 기준으로 F12를 누르시면 오른편에 HTML 웹페이지 구조도가 뜨는데요.

여기에서 우측상단에 있는 HTML 코드에 마우스를 갖다대면 해당 태그가 웹페이지 어느 영역에 매칭되는지 화면 왼편과 같이 색깔이 하이라이트되어 알 수 있게 표시해 줍니다.

 

여기서 우리는 글 영역에 해당하는 코드를 찾아야 합니다.

 

 

이 코드들을 마우스를 순서대로 쭉 갖다대보다가 상단 그림과 같이 글 부분을 감싸는 영역이 하이라이트가 되면 해당 코드 왼쪽의 삼각형을 눌러서 펼쳐봅니다.

HTML 코드는 위와 같이 계층형으로 되어있어서 펼쳐보면 안에 또 여러 코드들이 등장하는데, 글 부분을 감싸는 영역이 나타나면 계속해서 해당 코드 옆의 삼각형을 눌러 펼쳐봅니다.

 

그렇게 더 이상 글 부분을 감싸는 영역이 등장하지 않을 때 까지 아래로 타고 들어갑니다.

예를들어 제가 테스트한 스킨은 <div class="inner"> 까지는 위 코드 및 캡처화면과 같이 글 부분을 완전히 감싸고 있으나, 그 아래의 <div class="hgroup">, <div class="entry-content"> 등은 제목부분이나 본문 내용만 감싸고 있습니다.

 

이렇게 마지막으로 글 부분을 완전히 감싸고 있는 '<div class="inner">' 를 키워드로 

티스토리 블로그 스킨 편집-HTML 편집에 들어가 Ctrl+F로 찾습니다.

 

편집기에서 해당 키워드로 찾아보면, 스킨에 따라 한 개만 등장하는 경우가 있고 여러 개가 등장하는 경우가 있는데,

만약 여러 개가 등장한다면, 해당 <div class="ooo"> 하위에 [##_article_rep_desc 가 포함된 것이 우리가 찾는 항목입니다.

 

이제 <div class="inner"> 이 부분에 코드를 입력해보도록 하겠습니다.

 

 

2. DIV 문장 추가

 

<!-- 광고용 왼쪽 사이드바 영역(커스텀) -->
<div style="position: absolute; left:-150px; top: 0px;">

<!-- 이 영역에 광고 HTML 코드 추가 -->

</div>
<!-- 광고용 왼쪽 사이드바 영역(커스텀) 끝 -->

 

위의 코드를 아래 그림에 보이시는 것과 같은 위치에 복사하여 붙여넣습니다.

 

HTML은 들여쓰기에 민감한 언어이므로, 위 아래에 있는 <div class="article_view"> 와 <div class="article_content">와 동일한 들여쓰기 위치에 삽입합니다.

 

그리고 우리가 기존에 찾았던 <div class="inner"> 는 <div class="inner", style="position: relative"> 로 수정해줍니다.

 

 

여기서 추가한 새로운 <div ~> 태그를 보시면 'left:-150px; top: 00px' 문장을 보실 수 있는데요. 이 항목은 배너의 위치를 나타냅니다.

 

left는 본문에서 얼마나 왼쪽 위치에 둘 것인지를 나타내는 수치이고, top은 화면에서 얼마나 아래로 떨어지게 할 것인지를 나타내는 수치입니다. 

 

즉, left 수치가 양수로 커지면 더 오른쪽으로 본문과 가까워지고, 음수로 커질수록 본문과 멀어지게 왼쪽으로 이동하게 되며,

top=0px 이면 화면 맨 꼭대기에 붙어있게 됩니다.

 

마지막으로 '<!-- -->' 태그는 주석이므로 코드 실행에 전혀 영향을 주지 않으며 단순 설명용이므로, 추가 안하셔도 무방합니다만, 나중에 코드를 수정할 때 쉽게 찾을 수 있도록 본인이 쉽게 검색할 수 있도록 문구를 추가해 놓는것을 추천합니다.

 

 

추가로 지금은 본문 왼쪽에 배너를 삽입하기 위해 'left'라고 입력했으나, 오른쪽에 배너를 삽입하고 싶으면 'right'라고 바꾸시면 됩니다.

 

 

3. 광고 코드 추가

 

 

 

이제 추가한 <div>~ </div> 코드 안에 구글, 쿠팡 등 다양한 광고 플랫폼에서 제공하는 코드를 입력합니다.

 

예를 들어 쿠팡 파트너스에 들어가면, 세로형 배너광고 코드를 제공하는 데 상단 그림의 아래에 '파트너스 코드'라고 되어있는 부분에 있는 아래와 같이 네 줄짜리 코드를 복사합니다.

이 때 기존에 삽입한 <div> 보다 한 단계 더 들여쓰기 한 위치에 붙여넣기합니다.

 

구글 애드센스의 경우 아래와 같이 광고 코드를 복사한 다음, 동일하게 <div> ~ </div> 사이에 붙여넣기 하면 됩니다.

 

 

 

4. 광고 확인 및 위치 조절

 

 

이제 미리보기 또는 적용 버튼을 눌러 제대로 띄워졌는지 확인합니다. 

광고코드가 단순 <img src>와 같은 단순 이미지형이라면 미리보기로도 확인하실 수 있지만,

<script>로 되어있는 코드라면 미리보기에서 제대로 뜨지 않을 수 있기 때문에 적용을 누른다음 블로그에 들어가서 확인해보시면 됩니다.

 

적용 버튼을 누른 후 아무 글을 눌러보면 위와 같이 좌측에 세로 배너 광고가 뜬 것을 확인할 수 있습니다.

 

하지만 위치가 기존 글을 가리고 있군요. 이럴 경우에는 위에서 설명드린 것과 같이 left:00px, top:00px 부분을 수정하면 됩니다.

 

left:-200px, top:200px로 설정했더니 좀 더 왼쪽 아래로 이동해서 적절한 위치에 자리잡은 것을 확인할 수 있었습니다.

 

 

테스트 페이지가 아닌 지금 운영 중인 블로그에는 구글 애드센스를 추가했는데 오른쪽 그림과 같이 글 왼편에 애드센스가 잘 나타납니다.

 

 

 

또한 위와 같이 <div> </div> 코드를 더 추가해서 광고를 다른 위치에 더 삽입할 수 있습니다.

예를 들어 'right:0px, bottom:0%'  라고 위치를 바꾸면 위와 같이 오른쪽 본문 최하단에 광고가 삽입된 것을 확인하실 수 있습니다. 이렇게 위치는 px(픽셀) 단위 뿐만 아니라 퍼센트 단위로도 입력하실 수 있어, 본문 중간에 위치시키려면 '30%,' '50%' 이렇게 설정하실 수도 있습니다.

 

 

 

글 읽어 주셔서 감사합니다~

마음에 드셨으면 아래 공감버튼(♥) 눌러주시면 큰 힘이 됩니다