반응형

TOC란?

Table of Contents로써 책 첫장에서 볼 수 있는 차례/목차와 같은 개념이다.
포스팅에 TOC를 적용한다는 것은, 해당 포스팅이 어떤 내용들이 있구나라는 목차를 대략 알 수 있으며, 추가적으로 해당 목차를 누르면 해당 문단으로 이동하거나, 스크롤을 내릴때 현재 어떤 내용을 보고 있는지 알려주기도 한다.
단, 마크다운으로 작성된 포스팅이어야한다.

https://extsdd.tistory.com/404

 

[거제/통영 여행 #8] 통영 신축 오션뷰 바라봄 펜션 - 가성비 최강 / 202호 원룸족욕

통영에서 숙소를 알아보다.. 대부분.. 가격이나 숙소질을 고려했을때 ..맘에 드는 곳이 없어서... 진짜 하루종일 뒤지다 겨우 타협본곳.. 바라봄 펜션..! 이름은 올드했지만 신축 펜션이었다. 우리

extsdd.tistory.com

내용만들으면 잘 이해가 안가는데 내가 작성했던 포스팅을 보면 직관적으로 알 수 있을 것이다. 위 포스팅을 눌러보자.

포스팅을 보면 우측에 목차가 나오는 것을 볼 수 있다. 스크롤도 내려보면 현재 위치에 따라 녹색바로 하이라이팅이 된다. 독자 입장에선 정보를 찾으러 포스트를 보러온 경우가 많은데, TOC가 적용되어 있으면 내가 보려는 목차로 바로 이동해서 볼수도 있고 해당 포스트가 어떤 내용을 담고 있는지도 대략적으로 알 수 있다.

1. Head 추가

스킨편집 이동



먼저 티스토리 관리자 화면 좌측에서 꾸미기>스킨 편집으로 들어가주자.

html 편집

html 편집을 눌러주자.

스크립트 태그 추가

태그 안에 아래 스크립트 태그를 추가하자. head 태그 안에 어디다 넣지..!? 고민 하는.. 비전공자 분들은 걍 바로 위에 적는 것을 추천한다.

<!-- TOC 추가 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">
<!-- TOC 끝 -->

2. div 추가

이제 toc가 추가될 공간을 추가해야한다.

위에서 추가했던태그를지나 밑으로 계속내리면태그가 시작되는데 body 태그 내부를 보면 content가 표시되는 영역이 있다. 일단 스킨마다 태그 구조가 다름으로 나랑 다를 수가 있지만. 대충 크롬 개발자 도구로 뒤져보면 어디다 넣어야할지 감이 올것이다. 걍 Content가 시작되는 곳쯤에 추가하면 된다. 나는 Square 스킨을 사용하고 있는데 이 스킨을 사용하는 사람들은 아마 위와같은 모습일 것이다.

아래에 아래 코드를 추가해주자.

<div class='toc'></div>

3. 스크립트 추가

요기서부터 좀 중요하다. 실제 content가 있는 영역을 인식해서 toc 영역에 목차를 뿌려주는데 코드를 보면 알겠지만 컨텐츠 태그 안에있는 h1~h3 태그를 자동으로 인식해서 띄어주는 것이다. 아마 다른 포스팅에서 toc 적용을 보고 그대로 따라서 추가하면 안되는 경우가 많은데 스킨마다 content 영역 클래스명이 다르기 때문이다.

일단 맨 아래로 내려보면 body 태그가 끝나는 태그를 볼 수 있는데 요기 바로 윗칸에 아래 코드를 추가해준다. 여기서 중요한점이 위 사진에서 형광녹색으로 하이라이팅한 document.querySelector와 아래 contentSelector 를 보면 .article 로 되어있는 걸 볼 수 있다. 이게 바로 content영역의 클래스 명이다. 나 같은 경우 클래스 명이 aticle인 태그를 찾아  태그 안에있는 h1~h3 태그 정보를 끌어와 띄어주는 것이다.

<script>
  var content = document.querySelector('.article')
  var headings = content.querySelectorAll('h1, h2, h3, h4, h5, h6, h7')
  var headingMap = {}

  Array.prototype.forEach.call(headings, function (heading) {
      var id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
                 .split(' ').join('-').replace(/[\!\@\#\$\%\^\&\*\(\):]/ig, '')
      headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0
      if (headingMap[id]) {
        heading.id = id + '-' + headingMap[id]
      } else {
        heading.id = id
      }
    })

  tocbot.init({
    tocSelector: '.toc',
    contentSelector: '.article', 
    headingSelector:'h1, h2, h3',
    hasInnerContainers: false
  });

  $(document).ready(function(){
    $('.toc').addClass('toc-absolute');

    var toc_top = $('.toc').offset().top - 165;
    $(window).scroll(function() {
      if ($(this).scrollTop() >= toc_top) {
        $('.toc').addClass('toc-fixed');
        $('.toc').removeClass('toc-absolute');
      } else {
        $('.toc').addClass('toc-absolute');
        $('.toc').removeClass('toc-fixed');
      }
    });
  });

</script>

content 태그의 class 명을 모르는 경우?

나처럼 square 스킨을 쓰면 아마 위처럼 쓰면 되겠지만 다른 스킨을 사용하는 사람들은 자신의 content를 띄어주는 태그의 클래스명이 뭔지 알아내서 바꿔주면 된다. 아마 다른 포스팅보고 안된다고 한사람들은 아마 코드는 비슷할텐데 저기 나와있는 contentSelector 의 클래스명이 일치하지 않아서일 것이다.

나의 경우 content 영역이 article 클래스를 사용하고 있는데 아마 다른 스킨을 쓰는 사람들은 사용하는 클래스명이 이게 아닐 수도 있다. 하지만 ##_notice_rep_desc_## 을 검색해보고, 이 태그를 감싸고있는 상위 태그의 클래스명을 적어주면 된다. ##_notice_rep_desc_## 는 티스토리 블로그에서 사용하는 공통 치환자이기 때문에 스킨이 달라도 이 태그가 있을 가능성이 매우 높다.

4. CSS 추가

상단에서 CSS 탭으로 이동 후 아래 코드를 상단 적당한 공간에 추가해주자. @import 이런 구문들 밑이면 적당할 꺼같다.

/*
* TOC
*/
.toc-absolute {
  position: absolute;
  margin-top:165px;
}
.toc-fixed {
  position: fixed;
  top: 165px;
}

.toc {
  left: 1350px;
  width: 250px;
  padding: 10px;
  box-sizing: border-box;
}

.toc-list {
  margin-top: 10px !important;
  font-size: 0.9em;
}

.toc > .toc-list li {
  margin-bottom: 10px;
}

.toc > .toc-list li:last-child {
  margin-bottom: 0;
}

.toc > .toc-list li a {
  text-decoration: none;
}

그리고 마지막으로 적용을 눌러주자.

5. 적용 확인

자신의 포스팅중 마크다운으로 작성된(h1~h3 태그가 사용된 글)을 눌러보면 좌측에 TOC가 적용된 것을 확인 할 수 있다.

반응형
반응형

 

  이번에는 티스토리 블로그에 스크롤을 내려도 항상 애드센스 광고가 화면에 떠서 고정되어있는 플로팅 배너를 만들어볼 것이다.

 꾸미기 -> 스킨 변경

 

  현재 사용하고 있는 Book Club 스킨의 모습이다. 순정과 다른점이 있다면 스킨 설정에서 사이드바 위치가 좌측이라는점? 이건 개인차니 편한곳에 하면된다. 나는 일단 사이드바가 좌측에 있는걸 선호해서 좌측으로 바꾸고 시작하겠다.

 

  글을 읽다보면 저 빨간 공간이 남아도는데 저기다 광고를 넣을 수 있지 않을까? 생각을 하다가 넣어보니까 별거 없더라. 그래서 그 방법을 공유하려고 한다!

1. 전체크기 늘이기

  일단 현재 티스토리 컨텐츠 박스의 가로크기를 늘려야한다. 자 사실 좌측 슬라이드 밑에 광고 하나 다는건 크기 변경이 필요없다. 이미 사이드바 영역이 있기때문에 거기 밑에 새로 다는건 뭐 어렵지 않으니까, 그런데 기존 크기를 유지한 상태에서 광고가 하나 더들어면 div가 자리가 없어 계단식으로 깨지게된다. 그게 아니면 사이드바나 글이 나오는 컨텐츠 영역을 줄여야 하는데 그럼 가독성이 너무 없어진다. 그러므로 Full Size상태의 크기를 늘려주자.

  자 먼저 관리자 페이지에서서 꾸미기 -> 스킨편집에 들어와서 1번 박스에 있는 html 편집을 눌러주자.

 

  1. CSS 버튼을 눌러주자!

  2. 그다음 Ctrl+F 키를 눌러 검색을 해주자.

  3. 검색어는 1080이다. 1080px인것을 모두 조회해 1400px로 바꿔줄 것이다.

 

 

  바꿔야할 부분은 저렇게 7군데다.(순정 스킨기준) 저 옆에 줄번호는 CSS 수정유무에 따라서 차이가 날 수 있다. 검색은 그냥 컨트롤+F눌러서 계속 검색하면 된다. 저 1080을 모두 1400px로 바꿔주자!

 

  바꾸면 이런 모습이 된다. 일단 저장을 하자..!

 

  처음에 비해 사이드 영역이 아주 넓어진것을 확인할 수 있다. 이제 저걸 조금 줄여서 우측에 광고를 넣을 자리를 만들꺼다.

2. 사이드영역 조정

 

  자 잘보면 너비를 조정함으로써 저 사이드영역을 구분해주는 친구가 깨진것을 볼 수 있다 저친구를 바로잡아주자.

.layout-aside-left #container .content-wrap:before {

  위 코드를 Ctrl+F를 이용해 CSS에서 찾아보자

 

 

  저 margin-left 를 -256px에서 -455px로 바꿔주자! 이 값을 바꾸고 뭐가 바뀌는지보고 향후에 자기가 조정할 사람은 조정하면된다. 여기서 나온 가이드는 최소 블로그답게 보여주기 위한 셋팅이다.

  자 이렇게 바꼈을 것이당

#container .content-wrap:before

  그 다음 위 코드를 한번 더 검색한다.

 

 

  저 두 퍼센테이지를 바꿔줄 것이다. 잘 보면 저 두 비율의 합이 100%이고 보면 위에 것이 글이 나오는 컨텐츠 영영의 비율, 아래가 사이드바의 비율일 것으로 추측할 수 있다. 이건 무슨 코드냐면, 반응형으로 동작했을때 어떻게 도식할껀지에 대한 퍼센테이지 이다. 이걸 각각 70%, 30% 로 조정해준다. 이게 가장 자연스러웠던 것 같다.

  모두 바꿨으면 적용을 누르자. 그리고 화면을 보면 아직 약간 이상할텐데 일단 계속 진행하면 된다.

3. 좌측 사이드바 너비 줄이기

#aside

 

  맨 위에 커서를 대고 위 코드를 검색한다. 아마 아주 많이 검색될텐데 가장 첫번째로 검색되는 것을 고치면된다.

 

  저 21.x %를 17%로 바꿔주자!

 

  그리고 적용하고 화면을 확인해보자

 

 

  뭔가 많이 좁아진 것을 알 수 있다. 그리고 가운데 수직선이 지나면서 화면이 깨져보이는데 이건 우측 슬라이드를 추가하면 괜찮아진다. 이제 우측 영역을 추가해보자!

4. 좌측 사이드바 광고 추가

 

 

 

  이번엔 HTML 영역으로 이동하자.

<footer id="footer">

 

  그리고 위 코드를 검색해주자.

  그럼 이렇게 조회가 될껀데 저 빨간 네모박스 태그 사이에 아래 태그를 추가하자.

<!-- 2020-07-18 플로팅 배너 시작-->
<s_sidebar_element>
	<div class="banner">
		<div id="chase" style="top:0px;">
			//여기에 애드센스 코드를 넣으세요!
		</div>
	</div>
</s_sidebar_element>
<!-- 2020-07-18 플로팅 배너 끝-->

 

  나는 저기 코드에 "일치하는 컨텐츠 광고" 를 넣었다.

 

  뭐 추가하면 이런모슥이 될 것이다. 안에 광고코드는 본인들꺼를 넣으면 된다.

5. 우측 사이드바 광고 추가

 

<div class="content-wrap">

 

  HTML에서 위 코드를 검색하자

 

  이런식으로 검색이 될껀데 우린 저 빨간 상자안에 있는 태그 사이에 코드를 넣을꺼다.

 

<!-- 오른쪽 사이드바 시작-->
<aside id="asideRight" class="asideRight">
	<div id="chaseRight" style="top:0px;">

			<div class="sidebar-1">
				//광고 1
			</div>

			<div class="sidebar-1">
				//광고 2
			</div>
						
			<div class="sidebar-1">
				//광고 3
			</div>

	</div>
</aside>
<!-- 오른쪽 사이드바 끝 -->

 

  이런식으로 복붙한다. 만약 길게 배너 하나만 붙일꺼면 광고 1 div 태그만 사용하고 나머지 광고2, 광고3 div 뭉텅이는 지우면된다. 나는 길쭉한 배터는 좌측에 있음으로, 작은 배너 여러개를 노출시킬 것이다.

6. 우측 슬라이드 CSS 추가

 

 

  CSS로 이동을 해주자. 그리고 맨 마지막줄로 내려가 아래 코드를 추가해주자

/** 오른쪽 배너 CSS **/
	@media (max-width: 1400px){
		#asideRight { display : none;}
	}
	
	#asideRight { 
	float: right;
	margin-left: 0;
	padding: 80px 20px;
	height:100%;
	width: 160px;
	}

 

 

머 이정도가 될 것이다. 한번 적용을 해보자!

 

7. 상단 고정 스크립트 삽입

</style>

html에서 위 코드를 검색하자

  저기 검색될텐데 저 style 끝 태그와 head 끝 태그 사이에 코드를 하나 넣어주자.

<!-- 2020-07-18 플로팅 배너 시작-->
<script type="text/javascript">
	$(window).scroll(function(event){
		if(jQuery(window).scrollTop() > jQuery(".banner").offset().top) {
			jQuery("#chase").css("position", "fixed");
	}
	else if((jQuery(window).scrollTop() < jQuery(".banner").offset().top)) {
		jQuery("#chase").css("position", "static");
	}
});
</script>
<!-- 2020-07-18 플로팅 배너 끝-->
	
	<!-- 2020-07-18 플로팅 배너 시작 : 오른쪽 배너-->
<script type="text/javascript">
	$(window).scroll(function(event){
		if(jQuery(window).scrollTop() > jQuery(".asideRight").offset().top) {
			jQuery("#chaseRight").css("position", "fixed");
	}
	else if((jQuery(window).scrollTop() < jQuery(".asideRight").offset().top)) {
		jQuery("#chaseRight").css("position", "static");
	}
});
</script>
<!-- 2020-07-18 플로팅 배너 끝 오른쪽 배너-->

  위코드가 이제 스크롤을 내려도 상단에 떠있게 하는 친구다

 

 

  그럼 대략 이런 모습으로 들어간다. 이것도 적용을 해보자!

8. 기타 마감작업

#content {

  CSS에서 위 코드를 검색해주자.

 

 

  이 친구가 보일텐데 값을 바꿔주자.

#content {
	float: left;
	width: 68%;
	padding: 72px 15px 0 60px;
	box-sizing: border-box;
}

  이코드는 화면이 뛰틀리는걸 잡아주는 설정이다. 이제 적용하고 확인!

9. 최종 검수

 

 

  자 이제 스크롤을 내려도 좌우로 광고가 따라붙게 된다 ㅎㅎ

 

 

  자 창크기를 줄이면 자동으로 우측 배너가 없어지게 된다. 거기서 더 줄이면 최종적으로 좌측 배너도 사라지게 되면서 반응형 웹이 만들어진다 ㅎㅎ

 

  궁금한게 있으면 댓글 남겨주세요

 

[HTML/CSS] 티스토리 스크롤내려도 항상 보이는 반응형 플로팅 애드센스 광고 배너 만들기 / 양쪽 사이드바 추가 방법 / Book Club 스킨 / 수익 극대화

 

#HTML #CSS #티스토리 #스크롤 #내려도 #항상 #보이게 #반응형 #플로팅 #애드센스 #광고 #배너 #만들기 #하는법 #방법 #양쪽 #사이드바 #모듈 #추가 #BookClub #스킨 #편집 #수익 #극대화

 

반응형
  1. 익명 2020.08.08 05:10

    비밀댓글입니다

  2. 외장_하드 2020.08.08 13:49 신고

    소스가 필요ㅇ할꺼같아요!

  3. 익명 2020.10.13 09:40

    비밀댓글입니다

반응형

 

 

 

2020년 4월 18일부터 시작한 티스토리 블로그. 벌써 두 달 반정도의 시간이 지났다. 해당 블로그의 주소는 바로 

https://extsdd.tistory.com/

 

외장하드

자동차 / 여행 / 취업 / 일상 / IT / 코딩

extsdd.tistory.com

  바로 이곳! 블로그 내용은 내 네이버 블로그 내용하고 동일하다 ㅎㅎ. 구글 애드센스를 달고 싶어서 블로그를 이중화해서 운영하고 있다. 현재 티스토리에는 144개의 글이 올라가 있는 상태고 4월은 방문자 약 400명, 5월은 약 2800명, 저번달인 6월은 6500명의 방문자를 기록했다. 이정도 추세면 8월쯤 됐을때는 월 방문자 1만명도 가능할 것 같다.

애드센스 승인요청 히스토리

 

 

 

  자 블로그 개설을 4월 18일날 해서 2일 뒤인 20일날 승인 신청을 했다. 그리고선 2주 뒤에 승인할 수 없다는 메일이 왔다.

 

 

  후.. 읽어보니 뭐 컨텐츠가 부실하다 머 이런 이야기는 다행히 없었다. 그저.. 코로나때문에 못한다고 한다. 아마 봇이 어느정도 선별작업은 해놓고, 최종적으로 봇이 수집한 데이터를 토대로 사람이 수기로 승인을 하는거 같긴하다... 히스토리 내역을 보면 그이후 5월을 보면 3~7일 마다 계속 실청을하다가 결국 에휴~ 코로나 끝나야 이게 되겠구나 ~ 하고 그냥 포기를 해버렸다. 그게 딱 6월10일.. 약 한달 반동안 무한신청을 했으나 받아들여지지 않았다..

애스센스 광고 승인

 

 

 

  7월 3일 회사에서 일을하고 있다가 무심코 구글에서 메일이 왔길래 순간 난독이 와서 "사이트에 애드센스 광고를 게재할 수 있습니다"를 없습니다로 읽어서.. 하...하도 많이 신청해서...이제.... 차단을 당한거구나..하고 메일을 열어보니.. 항상 보던 코로나때문에 승인해줄 수 없다 화면이 아니라 위 같이 새로운 화면이 뜨길래.. 아 뭔가 잘못됐구나 생각했다. 그런데.. 보니까.. 우측분이 웃고계시고 축하한다는 글이 있어서 다시 읽어보니 승인이 됐다는거다! 생각지도 못하게 갑자기 이렇게 승인이 나서 얼떨떨했다.

 

  둘중 하나인거 같다. 코로나로 출근못했던 승인담당자가 출근해서 승인을 해줬거나, 아니면.. 이렇게 지독하게 요청하다니... 미친놈이다..! 하고 승인해줬거나... 둘 중 하나같은데.. 사실 애드센스 승인나는건 6월 중순부터 아 이거 만만한게 아니구나라고 생각하고 단념했었다. 그런데 중간중간 글을 보니 모든사람이 저 코로나사유로 승인이 안나는건 아니고 몇몇은 된다고도 하는글을 봤었는데 진짜 승인 검토가 느리지만 진행은 되는것 같긴하다.

승인이 되기까지의 과정

 

  일단 소위 애드고시라 하여 승인 과정이 아주 어렵고 까다롭다는 것은 이미 다 알고 있을 것이다. 보니까 무슨 1일 1포스팅, 포스팅당 글자수 1000자 이상, 사진을 줄일 것, 맞춤법을 맞출 것, 한가지 주제와 키워드를 밀고나갈 것 등등.. 토속신앙마냥 어디 구글 관계자가 와서 이게 Real Fact다 한 것은 아니지만.. 보통 저런 가이드를 지키라는 글을 많이 봤을 것이다. 하지만 나는 저 기준을 지키려고 노력하지는 않았다.

 

- 1일 1포스팅

  블로그가 활발하다는 것을 어필하기 위해서 1일 1포스팅을 해야한다는 글을 제일 많이봤는데, 꼭 이걸 지켜야하는 것은 아닌 것 같다. 7월 3일날 승인이 났고, 7월 3일 이전의 글들을 보면 아래와 같다.

 

 

  보면 6월 17, 25, 26, 28, 29, 7월 1, 2 이렇게 썻는데도 문제 없이 승인됐다. 심지어 저기 머 개봉기/제품후기로 포스팅한건 딱히 영양가 없는 글들인데도 말이다.

 

- 한 가지 주제로 밀고 나가기

  이것도.. 딱히..없는거 같다. 위 사진만 봐도, 제품후기 썻다가, 치과갔다가, 자전거 탔다가, 휴가갔다가..ㅋㅋㅋ 한 6월 초반글 보면 무슨 IT 코딩하는 이야기써놓고 ㅋㅋㅋㅋ 5월 말가면 뭐 자동차 네비 업뎃하고 완전 잡탕인데도 승인이 난걸 보면.. 딱히 키워드로 공략해야하는 그런건 없는듯..

 

- 맞춤법과 글자수 1000자 이상을 맞춰라!

  내 글들 보면... 오타들이 많아서 맞춤법이 상당히 파괴되어있고.. 귀찮아서 수정도 안한다. 뭐..맞춤법은 아닌걸로하고, 1000자는 뭐 맞는건가? 근데 개봉기/제품후기 이런거 보면 한 2~300글자들도 많은데..

 

- 사진을 많이 올리지마라

  내 글 대다수는 다 사진이 떡칠되어있다.. 이것도 큰 영향은 없는 것 같다.'

 

- 블로그 개설 6개월이 지났는가? = 6개월간 양질의 글을 생산하는가?

  아까 말했듯이 블로그 개설은 두달 밖에 안됐다.. 중간에 안올린기간도 꽤 있고.. 그냥 하루이틀 삘받으면 올리는편이라.. 블로그 시점도 크게 아닌거 같은데..

승인 기준에 대한 개인적인 생각

 

  아마도 봇이 체크하는 것은, 이 글을 어디서 빼껴온건지, 구글 사이트맵에 글들이 얼마나 노출되고 있는지를 체크해 얼마나 영양가 있는 글들이 많은지? 그리고 블로그의 트래픽은 어떤지? 뭐 이런식으로 집계할꺼같다. ㅋㅋ... 프로그래머의 입장으로 봇을 설계한다면 난 저런 체크로직을 넣었을꺼 같다. 간단하게 글 배꼇는지 로직은 쉬울꺼고, 양질의 정보들이 많냐가 봇이 판단하는 척도로 삼아야 할 것같은데, 결국 구글에 노출되는 글들의 양으로 판단할 꺼 같다는 생각이다. 뭐 물론 뇌피셜이긴 하지만 내 생각은 이렇다 ㅎㅎ

 

 

광고 게재 후 3일간 첫 수익

 

 

 

히히.. 이런식으로 광고가 달리고 있다. 그럼 이렇게 달린 것들로 얼마의 수익을 올리고 있을까?

 

 

  첫 광고 게재 후 3일간 2.38달러의 수익을 올렸다. 한국 돈으로 한 2,800원.. 적어 보이는 금액일 수 있는데 내 네이버 블로그는 한달에 3000원 정도 버는것과 비교하면... 꽤 빠른수치... ㅋㅋ 이제 이 스노우볼을 굴려볼 생각이다. ㅎㅎ 한달에 5만원 벌어보는게 단기적인 목표다 ㅎㅎ

 

 

[후기] 티스토리 블로그 구글 애드센스 승인 후 첫 수익 / 애드고시 합격 / 승인 거절 / 승인확률 높이는 방법 / 승인기준 / 사이트를 검토할 수 없습니다 / 코로나바이러스

 

#티스토리 #블로그 #구글 #애드센스 #승인 #수익 #애드고시 #합격 #승인거절 #승인확률 #승인기준 #코로나바이러스

 

반응형

+ Recent posts