블로그 포스팅 보는데 걸리는 소요시간 표시하기

개요

블로그 포스팅 페이지 상단 제목라인에 보는데 걸리는 소요시간 표시하기

표시할 위치 모습

방법

블로그에 포스팅 읽는데 걸리는 시간 표시(reading-time.js)

블로그 관리>꾸미기>스킨편집>html편집 이동

F12를 통해서 찾을 위치 마우스 올려놓고 위치 확인

F12를 눌러서 페이지에서 보이는 요소의 코드명을 확인

타이틀박스 inner나 meta 정보 나오는 라인에 넣고자함

해당위치를 html편집에서 찾아줍니다.

html요소를 편집하기 전에 먼저 chrome 개발자 툴에서 수정하면서 어떻게 보일지를 확인해본다.

개발자 모드에서 미리수정해본 모습

수정문 입력한 모습

이제 html편집에서 해당 위치에 넣어줍니다. CSS는 기존 CSS에 인식되는것과 어울려서 그대로 적용하기위해 따로 수정하지 않습니다.

html편집에 추가해주기

자바스크립트 첨부 : 더알아보기(첨부할 스크립트 파일 수집)

readingtime.js 파일 업로드

업로드된 파일을 확인한 후에

적당한 위치에 스크립트 참조 문을 넣는다.

스크립트 참조문 추가하는 모습

저장하고 페이지를 새로 고침해서 js 파일을 잘 받아오는지 확인

readingtime.js를 잘받아오는지 확인

이제 readingtime.js를 호출하도록 script를 작성한다.

body 맨 아래쪽에 $(function()안에 document가 준비 되었을때 실행 될 함수들이 선언되어 있는데 여기에 넣어줍니다.

 

title-box부분은 본인 블로그 상에 페이지 헤더 상위 태그를 칭함

결과

적용된 모습