본문 바로가기

포스터 스킨 애드센스 일치하는 콘텐츠 광고 넣는 위치

gracenmose 2021. 8. 28.

스킨별 애드센스 일치하는 콘텐츠 넣는 위치 포스팅 시리즈입니다. 티스토리에서 기본 제공하는 10개 스킨에 대해서 애드센스 일치하는 콘텐츠 광고 단위가 떴을 때 넣는 위치를 정리하는 내용입니다.

 

알아두어야 할 사항

  • 모든 스킨 편집 내용은 '기본'값입니다. 즉, 스킨변경에서 적용 버튼 누른 순정 상태 기준입니다. 수동으로 HTML편집에서 몇 줄 넣었으면, 제 글에서 언급하는 위치에서 조금 뒤에서 찾으시면 됩니다.
  • HTML 편집 모드에서 검색을 하려면 편집창을 한 번 클릭 후 CTRL+F 를 눌러야 합니다.
    이렇게 노란 창으로 떠야 함
    위와 같이 노란색으로 창이 떠야 제대로 찾을 수 있습니다.
  • 편집하기 전 실수를 방지 하기 위해서 미리 HTML 페이지 전체를 메모장에 복사해 두면 좋습니다.
    ▶ 관련글: 티스토리 스킨편집 할 때 꼭 해 두면 좋은 팁 (ft. 메모장)

 

반응형

 

포스터(Poster) 스킨

티스토린 스킨들을 정리해 보니 스킨 선택 페이지에서 보여지는 각 스킨들의 모습에 무슨 문제가 있는지 알 것 같습니다. 

 

하나, 모바일에서 어떻게 보여지는지 전혀 힌트가 없다.

둘, PC버전의 모습도 기본 세팅이 아닌 '커버' 설정 후의 모습을 보여준다. 다양한 커버를 지원하는 것은 좋으나 스킨을 고르는 초보자는 적용 후의 모습이 미리보기와 전혀 달라서 당황하기 쉽다.

셋, 미리 보기는 블로그 홈의 모습만 볼 수 있다. 글에서 어떻게 보여지는지 알 수 없어서 적용해 봐야 알게 된다.

 

이런 문제가 있으니 스킨 고르는게 어렵고, 고른 후에도 스킨 설정하기가 어려울 수 밖에요. 커스텀 스킨 만드는 제작자들처럼 디테일하지는 않더라도 최소한 모바일 화면은 어떻고, 기본 화면은 어떤 모습인지 제대로 갖춰진 안내 페이지가 필요해 보입니다.

 

포스터 스킨

현재는 티스토리 스킨들은 모두 '반응형'만 남아서 제공되고 있습니다. 예전에는 더 많았는데 이제는 반응형 외에는 남은게 없죠.

 

포스터 스킨은 기본 그 자체의 스타일입니다. 사이드바 메뉴에 들어가도 사이드바가 하나도 없습니다. 매우 심플한 스킨인 것이죠.

 

먼저 PC화면, 기본 설정은 아무것도 없는 백지 위에 블로그 이름, 그리고 글 목록들이 나열되는게 끝입니다. 카테고리만 왼쪽 상단 ≡ 버튼을 눌러서 불러올 수 있는 스타일인 스킨입니다.

 

포스터 스킨 PC 기본 화면

 

모바일화면도 똑같습니다. 군더더기 없는 깔끔한 디자인이 마음에 드는군요. 제 블로그 같이 복잡한 것 하나 없이 굉장히 심플해서 좋아보입니다.

 

포스터 스킨 모바일 기본 화면

 

PC나 모바일 모두 우측 상단에 갤러리형으로 볼지, 목록형으로 볼지 선택할 수 있는 버튼이 있어서 방문자가 그 모습을 선택할 수 있습니다. 기본값은 목록이고, 갤러리형을 눌렀던 방문자가 재접속을 하면 아마 갤러리형이 그대로 유지된 채로 화면이 뜰겁니다.

 

이건 사용자의 선택이니 블로그 운영자가 어찌 할 수 있지는 않습니다. 커버 스타일은 슬라이더, 썸네일 리스트, 벽돌 리스트, 일반 리스트, 갤러리 커버가 지원됩니다. 

 

커버 지원 목록

 

포스터(Poster) 스킨 일치하는 콘텐츠 광고 코드 넣는 위치

일치하는 콘텐츠 코드를 넣기 위해 찾는 치환자 article_rep_desc가 포스터 스킨에서는 3번 나옵니다.

 

첫 번째 위치

▲ 첫번째 위치에는 아래 '공지사항' 모듈이 붙네요. 당연히 여긴 뭘 수정해도 보이지 않을겁니다.

 

두 번째 위치

▲ 두번째 위치된 코드에서도 바로 아래가 '보호되어 있는 글'이네요. 당연히 여기도 아닙니다.

 

세번째, 올바른 위치

▲ 세번째, 바로 아래에 '태그' 보이는군요. 바로 이곳입니다. 이곳에서 노란색으로 표시한 치환자 아래줄의 </div> 앞에서 엔터를 한 번 치고, 그 자리에 애드센스 광고 코드를 붙여 넣으면 됩니다.

 

포스터(Poster) 스킨 요약

  • 사이드바가 전혀 없는 깔끔한 스타일의 스킨
  • 다양한 커버 목록을 지원하여 커버를 사용해 차별화된 홈 화면 구성 가능
  • 애드센스 일치하는 광고 코드는 세 번째 article_rep_desc 치환자 뒤

 

이제 절반 왔습니다. 나머지 스킨들도 거의 대동소이하지만, 이렇게 하나씩 스킨들을 살펴보니 티스토리 기본 스킨들이 생각보다 굉장히 좋습니다. 문제는 설명이 너무 부족해서 알기 어렵다는 것이었네요. (이 시리즈가 계속 될수록 사이드바 없는 스킨이 더 좋아보이는 느낌적 느낌은 왜 들까요?)

 

[다른 스킨 글 보기]

 

그리드형(광고전용)

댓글