티스토리 목차와 우측 상단 애드센스 광고 동시 보기

목차

티스토리 목차 글 두 번째 글입니다. 티스토리 목차를 사용하다 보면, 모바일에서는 보기에 문제가 없는데, 데스크톱에서 보기에는 보기가가 좀 민망할 때가 있습니다. 왼쪽에 목차가 뜨면 목차 오른쪽에는 빈 공간이 너무 많이 남습니다. 왠지 낭비 같아서 보기가 좋지 않고, 목차 밑이나 글 조금 밑에 상단 광고를 넣으면 디자인적으로 보기가 매우 좋지 않습니다. 그래서 목차를 잘 사용하지 않게 됩니다. 그런데, 생각해 보면 목차 옆 우측 상단 공간은 광고 하나가 들어가기에 딱 좋은 공간입니다.  그래서 두 개를 같이 사용해 보는 것을 시도해봤습니다.

 

1. 디자인 설정

1) 왼쪽 목차

- 목차 디자인은 원래 좌측에 있고, 디자인상에 문제가 없기 때문에 그냥 두기로 했습니다.

2) 오른쪽 광고

- 이 오른쪽 광고는 모바일에서 보는 경우, 목차 아래로 내려가도록 디자인을 합니다. 플로딩 광고 기법을 사용하면 가능 할 것으로 봅니다.

데스크탑과 모바일에서 목차와 광고 배치

 

2. 주의 사항

1) 목차와 광고 클릭의 구분

- 인터넷을 살펴 보면 오래전에도 목차를 누르면 광고가 같이 눌리게 하는 편법이 있었던 것으로 보입니다. 이에 대해서는 광고 게재 정지가 되어서 사용 못하도록 된 지 오래되었습니다.

- 목차와 광고는 분명하게 구분되도록 해야 합니다.

2) 플로팅 광고

- 인터넷에 찾아보면, 특히 사이드에 플로팅 광고를 사용하시는 분들이 있는데, 이 역시도 광고 게재 정지 대상입니다. 광고가 사용자가 화면 움직이는 데로 움직여서 클릭을 강제적으로 유도하기 때문이라고 합니다.

- 여기서 플로팅은 단순히 목차 옆과, 아래 두 곳으로 움직여 서서 사용자에게 불편을 주지 않도록 하는 것입니다.

 

 

3. 스터디

1) 우측 상단 광고

우측 상단에 광고를 넣는 법은 예전부터 사용되고 있었습니다. 그러나, 두 가지 문제가 있는데, 하나는 스킨에 넣어서 고정하는 거라 HTML 초보가 하기에는 조금 어렵고, 두 번째는 모바일에서 볼 때도 우측 상단으로 고정되어 광고 왼쪽에 글자가 제대로 정렬되어 보이지 않는다는 것입니다. 그래서 포기.

2) 2개의 상단광고

어느 분 보면, 상단에 나란히 광고 두 개를 띄우시는 분들이 있습니다. 물론 데스크탑에서 그렇게 보이고, 모바일에서 볼 때는 하나가 사라집니다. 모바일에서 광고 상하로 두개 나오는 것 또한 광고 제제 대상이라고 합니다. 아무튼 소스가 왼쪽 광고는 고정, 오른쪽 광고는 모바일에서 보이지 않게끔 하기 때문에 제가 사용하기는 기술적인 문제가 많이 있었습니다.

3) 우측 상단 플렉서블 광고

고정된 우측 상단 광고의 발전된 형태입니다. 고정된 우측 상단 광고의 모바일에서의 문제점을 개선하였고, 데스크탑과 모바일에 따른 위치선정 해주는 것이 코드면에서 굉장히 편합니다.

 

4. 목차와 우상단 광고 사용.

1) 목차 서식

블로그에 일단 목차 만들기로 목차에 대한 기본을 설정해 놓습니다.

티스토리 목차 만들기는 아래 참고하시면 됩니다.

[초보블로거] 티스토리 북클럽 스킨에 쉽게 목차(TOC) 만들기. (3단계)

[초보블로거] 티스토리 북클럽 스킨에 쉽게 목차(TOC) 만들기. (3단계)

2) 플렉서블 광고 서식 만들기

목차와 플렉서블 광고를 사용하기 위한 서식을 하나 만듭니다. 코드는 아래와 같습니다.

  <div class="Toc-Ad"> 
    <div class="book-toc">
      <p>목차</p>
      <ul id="toc"></ul>
      </div>
    
    <div class="ADright">
   <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4815460472413564"
     crossorigin="anonymous"></script>
<!-- 티스토리 우상단 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-#####"
     data-ad-slot="@@@@"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
    </div>    
  </div>

 

3) CSS 를 수정해 줍니다.

블로그 관리 > 스킨 편집 > HTML  편집 > CSS 에서 다음 코드를 붙여 넣습니다.

.Toc-Ad {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;  
  justify-content: space-around;

}

.ADright {
  background: white;
  border: 0px solid #b0d197;
  width: 336px;
  height: 336px;
  margin: 10px 5px 10px 10px;
 
}

수정이 끝났으면 완성입니다.

 

목차와 광고를 나란히 나타낸 실제 모습 (구경가기)

 

4) CSS 업데이트 (2022.03.14)

목차가 길어지는 경우, 넓은 화면에서도 모바일과 같이 목차가 가운데 오고, 광고가 목차 아래로 내려가는 현상이 있습니다. 목차의 가로 크기를 아래와 같이 수정해서 목차 가로 길이를 조정해 주면 문제가 해결됩니다. "스킨 편집 > HTML 편집 > CSS"로 가서, CTL+F 를 누르고 "book-toc" 를 검색하시면 아래 부분을 찾을 수 있습니다. width를 316으로 수정해주시면 됩니다.

 

목차 넓이 수정

 

5. 기타

1) 주의

비개발자가 여기저기 살펴보면서 짜집기 해서 만든 코드입니다. 때문에 깨끗하지 않을 수 있습니다.  경우에 따라서는 잘 안될 수도 있습니다. 

2) 주의

목차 코드가 먼저 있어야지 이후 위에 코드가 작동됩니다. 

[초보블로거] 티스토리 북클럽 스킨에 쉽게 목차(TOC) 만들기. (3단계)

[초보블로거] 티스토리 북클럽 스킨에 쉽게 목차(TOC) 만들기. (3단계)

3) 코드 다운로드

목차 광고 같이 보기.txt

0.00MB

 

 

[블로그 초보] 검색엔진이 좋아하는 글쓰기

[블로그 초보] 검색엔진이 좋아하는 글쓰기

 

[구글 애드센스] 광고 코드 넣기, "div" 태그로 깨짐 방지

[구글 애드센스] 광고 코드 넣기, "div" 태그로 깨짐 방지