목차
티스토리 자체광고과 상단으로 들어오면서 현재 티스토리 블로거 개인 애드센스와 카카오 애드센스 아이디의 광고가 상단에 연달아 2개가 배치되는 해괴한 상황이 연출되고 있습니다. 일단 상단 광고 2개 배치는 애드센스 정책의 중대한 위반임은 명확한데 티스토리측은 애드센스에서 문제 없다는 답변을 받았다고 공식입장을 남겨두었습니다.
하지만 애드센스는 언제나 자신들의 책임을 100% 회피할 수 있는 답변을 하기에 이는 100% 정확한 의견이 아닙니다. 게재제한, 계정정지등의 이슈는 결국 게시자의 몫으로 돌아오니 안전한 방법을 택하는게 좋습니다.
그래서 카카오티스토리 자체광고와 내 게시자코드 광고가 연달아 나오지 않도록 광고 중간에 목차 코드를 집어넣어 구글의 게시자 정책을 지켜내도록 해야 하겠습니다.
1. 목차코드 jquery 업로드
2. HTML <head> 에 연동코드 넣기
바디 태그 아래나 </head> 가 끝나기 전 아무곳에 다가 코드를 넣어주세요.
<!-- 자동 목차 시작 -->
<script src="./images/jquery.toc.min.js"></script>
<!-- 자동 목차 끝 -->
3. HTML <body>에 목차코드 넣기
제가 사용하는 스킨은
<script>
$(document).ready(function () {
var $toc = $("#toc");
$toc.toc({ content: ".tt_article_useless_p_margin", headings: "h2, h3, h4" });
});
</script>
<!-- 자동 목차 끝 -->
4. HTML <article_rep_body> 에 목차 코드 넣기
역시 HTML 편집 창에서 <article_rep_body> 검색해주시고 찾으신 뒤 아래 코드를 넣어 주세요. 그럼 일일이 글을 쓸 때마다 코드를 넣어줄 필요 없이 자동으로 목차가 완성되어 나타납니다.
<div class="book-toc">
<p data-ke-size="size16">목차</p>
<ul id="toc"></ul>
</div>
스킨에 따라 다른데 <article_rep_body> 코드가 3개까지 있는 경우가 있어서 그런 경우는 아래쪽에 S tag lable 이 배치된 곳에 코드를 넣어주시면 됩니다.
5. CSS 스타일 넣어주기
CSS 탭에서 아래 목차 스타일을 넣어주세요. 개인별 취향에 맞게 편집해서 사용하시면 됩니다.
/* 자동 목차 스타일 */
.book-toc {
position: relative;
width: fit-content;
border: 1px solid #b0d197;
padding: 10px 20px 0px 20px;
z-index: 1;
}
.book-toc:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #b0d197;
z-index: -1;
opacity: 0.1;
}
.book-toc p {
font-weight: bold;
font-size: 1.2em !important;
color: #396120;
}
#toc * {
font-size: 18px;
color: #000 !important;
}
#toc {
padding: 0px 20px 0px 25px;
}
#toc a:hover {
color: #000;
}
#toc ul {
margin-top: 5px;
margin-bottom: 0px;
}
#toc > li {
padding-left: 0;
text-indent: 0;
list-style-type: disc;
padding: 0px 20px 0px 0px;
margin-bottom: 10px;
margin-top: 7px;
}
#toc > li > a {
text-decoration:none;
font-weight: bold
}
#toc > li > ul {
padding-left: 20px;
margin-top: 0;
margin-bottom: 0;
}
#toc > li > ul > li {
font-size: 0.87em;
padding-left: 0;
text-indent: 0;
list-style-type: disc;
margin-bottom: 5px;
margin-top: 5px;
}
#toc > li > ul > li > a {
font-size: 1em;
text-decoration:none;
}
#toc > li > ul > li > ul {
padding-left: 20px;
margin-top: 0;
margin-bottom: 0;
}
#toc > li > ul > li > ul > li {
font-size: 0.87em;
padding-left: 0;
text-indent: 0;
list-style-type: disc;
margin-bottom: 0px;
margin-top: 0px;
}
#toc > li > ul > li > ul > li > a {
font-size: 0.875em;
text-decoration:none;
}
티스토리 블로그 목차 코드로 광고문제 해결
이렇게 하고 나면 이제 광고가 2개 연달아 나오는 상황에서 벗어나 광고 - 목차 - 광고가 나타납니다. 이렇게 하면 한 화면이 전체 광고로 뒤덮는 상황이 해결되고 또한 목차가 있어 구글 SEO에서도 없는 것 보다는 훨씬 좋은 점수를 받게 됩니다.
다만 한가지 남은 문제가 있는데 티스토리측의 태클이 있을지도 모른다는 겁니다. 물론 우리가 카카오 광고를 방해하거나 한건 전혀 아니지만, 신뢰가 전혀 없는 티스토리측이라 이 부분에 대해서도 문제를 삼으면 문제를 삼을 수 있을지 모르기에 드는 걱정입니다. 물론 이정도는 사실 문제가 없을 것이라고 생각합니다. 물론 확신을 하지는 못하지만 말이죠. 암튼 이렇게 하시면 상단 2개 광고가 연달아 나오는 문제를 해결 할 수 있으니 참고하시기 바랍니다.
댓글