본문글 집중모드 효과에 대해 질문드려요.

https://xetown.com/tips/1088389

위 링크의 본문글 집중효과 모드를 구현해볼려고 하는데, 잘 안되네요... 구체적으로 각 문구를 어디에 넣어야 할지 모르겠네요 ㅠ

<button class="btn_post_mode"><span>집중모드 켜기</span></button> <-이 문구는 보여지는 부분이니 알겠는데요...

글구

/* dim 처리 */

.bg_post_mode{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:998;background:#000;opacity:.8;}

body.post_mode .bg_post_mode{display:block;}

body.post_mode .viewDocument{position:relative;z-index:999;box-shadow:0 0 10px #111;}

/* 버튼 */

. btn_post_mode{}

이 두 부분도 스케치북 기준 board.css에 넣는것도 알겠구요..

문제는 아래 제이쿼리 부분인데...

jQuery(function($){
// post mode
   $('.btn_post_mode').on('click',function(){ 
      var $s = $(this).find('span');
      $s.html($s.text() == '집중모드 켜기' ? '집중모드 끄기' : '집중모드 켜기')
      $('body').toggleClass('post_mode');
   });
});

이 부분은 어디에 삽입해야 하나요? _read.html에 넣으니까 소스가 화면에 그대로 보여서요;;;