반응형 ▸티스토리 이야기/•링크버튼 및 TOP버튼 만들기4 티스토리 꾸미기 | 스크롤 반응형 탑(top) 다운(down) 버튼 만들기 스크롤에 반응하는 탑(top) 다운(down) 버튼 만들기 티스토리 블로그 탑(TOP) 다운(DOWN) 버튼의 장점 긴 페이지를 스크롤하면 사용자는 맨 위로 올라가는 것이 번거로울 수 있습니다. 탑 버튼은 사용자가 페이지 상단으로 쉽게 이동할 수 있도록 도와줍니다. 마찬가지로 다운 버튼은 긴 페이지에서 아래로 쉽게 이동할 수 있도록 도와줍니다. 탑(top) 다운(down) 버튼 미리보기 이번에는 스크롤에 반응하는 '탑 버튼'과 '다운 버튼'은 스크롤을 올리고 내리면 '탑 버튼'과 '다운 버튼'이 부드럽게 교차되며 나오는 스크립트입니다. 버튼 이미지 파일 업로드 탑(top) 다운(down) 버튼은 스크롤 시 이미지가 변경되는 스타일로 탑(top) 다운(down) 2개의 이미지 파일이 필요합니다. 아래의 z.. 2024. 2. 23. 티스토리 | CSS 링크 버튼 서식 모음 #2 목차'티스토리 링크 버튼' CSS 서식 모음 #2 티스토리 링크 버튼의 CSS와 HTMl 코드 모음입니다.티스토리 스킨 편집에 들어가 CSS 코드를 CSS 코드란에 삽입 후 HTML코드를 원하는 위에 넣어주거나 서식으로 만들어 사용하시면 됩니다. 티스토리 링크 버튼의 CSS 코드 삽입 및 HTML 서식 만들기는 아래 링크를 참조하시기 바랍니다. [˙티스토리 꾸미기] - 티스토리 | CSS 링크 버튼 만들기 #1 티스토리 | CSS 링크 버튼 만들기 #1티스토리 I CSS 링크 버튼 만들기 CSS 버튼 위의 CSS버튼의 소스 코드입니다. 티스토리 스킨 편집에 들어가 아래 코드를 CSS 코드란에 삽입 후 HTML코드를 서식으로 만들어 사용하시면 됩니다. 목차 CSgalam.tistory.com CSS 버튼.. 2023. 10. 18. 티스토리 | CSS 링크 버튼 만들기 #1 목차 티스토리 CSS 링크 버튼 만들기 티스토리 링크 버튼의 CSS 소스 코드와 HTML 서식 코드를 넣어 주는 방법입니다. 아래 CSS 예제 버튼을 기준으로 만드는 법에 대해 간단히 알아보겠습니다. CSS 버튼 예제 CSS버튼 만들기 1. '관리자 홈'에서 꾸미기 > 스킨 편집 > html 편집 > CSS로 들어갑니다. 2. 아래 코드를 복사한 뒤 CSS에 넣어주면 됩니다. /* CSS버튼 오렌지 */ .CSSButton { box-shadow: 0px 1px 0px 0px #fff6af; background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%); background-color:#ffec64; border-radius:20px; border:1p.. 2023. 10. 18. 티스토리 꾸미기 | 탑(TOP) 버튼 만드는 방법 목차 티스토리 블로그 탑(TOP) 버튼 만드는 방법 티스토리 블로그의 TOP버튼은 하단의 '푸터'부분에 조그마하게 위치하거나 스킨에 따라 아예 없는 경우가 있습니다. 그렇기 때문에 페이지를 끝까지 내리지 않는 이상은 스크롤을 올려서 상단으로 이동해야 하는 불편함이 있습니다. 하지만 TOP 버튼을 설치한다면 포스팅을 스크롤하면서 읽다가 어디서든 TOP 버튼을 클릭만 하면 본문의 제일 상단으로 쉽게 이동할 수 있습니다. 오래된 코드라 많이 알고 계시는 내용이고 또 꼭 필요할까 하는 생각에, 포스팅을 할까 말까 고민하다가 제가 TOP 버튼을 설치하고 사용해 보니 편하기도 하고 나중을 위해 TOP 버튼의 설치법을 기록해 두려는 목적으로 포스팅을 합니다. 탑(TOP) 버튼 미리보기 탑(TOP) 버튼은 화면 우측 .. 2023. 6. 30. 이전 1 다음 반응형
