반응형 log./tistory custom3 티스토리 게시물 상단에 읽기 진행도 표시하기 - 상단 프로그레스바로 완성! 게시물 로딩바 보기 1. HTML1.1. 태그내 최상단에 div 코드 추가 1.2. 태그내 최하단에 script 코드 추가여기서 '#content' 부분이 게시물 시작되는 부분의 태그인데요.태그명이 다를 수 있으니 본인의 블로그에서 게시물이 시작되는 div의 id가 무엇인지관리자도구-검사로 체크해서 해당하는 div id를 작성해주세요.저는 게시물이 시작하는 부분의 태그아이디가 content여서 '#content'라고 설정하였습니다.2. CSSCSS 최하단에 코드추가/* content progress-bar */.scroll-bar { position: fixed; top: 0; z-index: 9999; width: 100%;}.progress-container { width:.. 2024. 12. 9. 티스토리 자동목차 설정으로 쉽게조회수 늘리기 - 스크롤 따라 움직이는 반응형 목차(TOC) 만들기 SEO, 자동목차를 설정해야 하는 이유티스토리 게시물에 목차가 생성되어 있으면 구글에서 해당 사이트를 좋은 사이트로 인식하면서 SEO 점수가 높게 측정됩니다. SEO(Search Engine Optimization) - 검색엔진최적화검색 엔진에서 특정 키워드를 검색했을 때 웹사이트가 상위에 노출되도록 콘텐츠, 링크, 기술적 요소 등을 최적화하는 과정을 말합니다. 구글에서 제공하는 사이트인 성능측정사이트에 주기적으로 들어가서 SEO 측정 점수를 확인하면서 블로그를 운영하는 것이 좋아요.https://pagespeed.web.dev/ PageSpeed Insights올바른 URL을 입력하세요.pagespeed.web.dev 티스토리 자동목차 생성하기자동목차(TOC, Table Of Contents)는 티스.. 2024. 12. 9. CodePen :: 티스토리에 HTML CSS JS 코드 예쁘게 첨부하기 1. 코드펜 사이트에 회원가입 후 로그인 해줍니다.저는 깃허브 계정으로 로그인 해버렸어요.https://codepen.io/ CodePenAn online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.codepen.io 2. html, css, js를 작성합니다.3. save - embed - html - 코드복사지금보니 gif가 잘 안보이네요..상단의 save - 하단의 embed - html - 코드복사를 차례대로 눌러주세용 4. 티스토리 글쓰기에서 html블럭에 붙여넣.. 2024. 12. 3. 이전 1 다음 728x90 반응형
