본문 바로가기
728x90
반응형

CSS

티스토리 블로그 페이지 스크롤 진행률 프로그레스 바(Progress Bar) 적용
IT 이야기/티스토리 2022. 3. 28. 티스토리 블로그 페이지 스크롤 진행률 프로그레스 바(Progress Bar) 적용 티스토리 블로그에 프로그레스 바(Progress Bar) 적용하기 최근 이웃분들 블로그를 다니다 보니 눈에 띄는 이상한 그래프 게이지가 있습니다. 스크롤을 내리는데 상단에 진행률 같은 막대가 늘어났다 줄어들었다 하더라고요. 정식 명칭은 프로그레스 바(Progress Bar) 우리말로 "진행 표시줄" 입니다. 궁금해서 찾아보니 간단하게 적용할 수 있어서 저도 한 번 따라해보았습니다. 좋은 건 같이 해야죠. [적용방법] 아래의 소스코드를 스킨 편집메뉴의 HTML 편집에 들어가서 태그 안에 넣어주면 땡~! [소스코드] 사실 저도 html 이나 css 를 잘 몰라서 자세히 설명드리기는 어렵고 아셔야 할 내용은 딱 두 가지 입니다. 1. Progress Bar 두께(height) 기본값(Default) 은 hei..
[티스토리] 공감버튼 하트 콩닥콩닥 움직임 연출(css)
IT 이야기/티스토리 2020. 12. 6. [티스토리] 공감버튼 하트 콩닥콩닥 움직임 연출(css) 티스토리 글 하단에 있는 하트모양 공감버튼에 콩닥콩닥 뛰는 움직임을 주는 css 입니다. 적용 방법 스킨 편집 - html 편집 - CSS 로 이동한 다음 스크롤을 내려 제일 하단에 아래 코드블럭 내용을 추가해 주시면 됩니다. 기존 코드를 손대지 않아도 되니 편하게 적용할 수 있어서 좋아요. /* 하트 CSS 추가 */ .ico_like { position: relative; animation: ico_like 1s infinite; margin:0 auto } .ico_like:before, .ico_like:after { position: absolute; content: ""; top: 0; -webkit-transform-origin: 0 100%; -o-transform-origin: 0 100..
[Tistory] 리디바탕체 적용_Poster Skin
IT 이야기/티스토리 2020. 9. 11. [Tistory] 리디바탕체 적용_Poster Skin 안녕하세요. 티스토리 스킨을 또 변경하였습니다. Whatever 스킨을 사용하다 좀 지겨워 Magazine 스킨으로 얼마 전 변경하였는데, 스킨이 너무 무거워 이번에 Letter 와 Poster 중 고민하다 Poster 스킨으로 다시 변경하였습니다. 기존 Magazine 스킨에서 처음 리디바탕체를 적용하여 사용하였는데, Poster 스킨으로 바꾸면서 관련 설정을 또 해주다 보니 기록해 두는 게 좋을 거 같아서 포스팅 합니다. 설정 방법은 스킨 편집 메뉴의 html 편집으로 들어가서 css 설정을 변경해 주시면 됩니다. 리디바탕체 다운로드 및 기본적인 설정은 별도로 설명하지 않겠습니다. /* Web Font Load */ @import url('//fonts.googleapis.com/earlyaccess..
728x90
반응형

티스토리툴바