티스토리 플로팅 반응형 CSS 버튼 - 데스크톱 사이드바, 모바일 하단 자동 배열

티스토리 플로팅 반응형 CSS 버튼을 소개합니다. 이 버튼은 방문자의 화면 크기에 따라 자동으로 위치가 조정됩니다. 화면 폭이 넓은 데스크톱에서는 사이드바처럼 보이고, 화면 폭이 작은 모바일 환경에서는 하단에 고정되어 표시되도록 디자인되었습니다.

 

✅ 티스토리 플로팅 반응형 CSS 버튼 예시

티스토리 반응형 플로팅 CSS 버튼이 적용된 모습

 

이번 포스팅에서는 위의 예시처럼 화면폭에 따라 자동으로 버튼의 위치가 변경되는 반응형 CSS 버튼을 티스토리 블로그 스킨에 적용하는 방법에 대해서 알려드릴게요.

 

부탁드립니다.

이 포스팅에서 사용된 코드를 자신의 블로그에서 사용하거나, 자신만의 아이디어를 더해 기능이 업그레이드된 버전을 재배포하시는 것은 자유입니다.

 

하지만, 이 포스팅에서 사용된 코드를 그대로 자신의 블로그에 포스팅하는 것은 하지 마세요. 부탁드립니다.

 

 

티스토리 플로팅 반응형 CSS 버튼 사용 방법

이 버튼의 디자인은 노트북이나 데스크톱 화면처럼 화면폭이 큰 경우에는 사이드바처럼 본문 옆에 붙어서 고정됩니다. 삼성 갤럭시 스마트폰이나 애플 아이폰, 아이패드 등 화면폭이 작은 모바일 기기에서는 화면 아래쪽에 자동으로 고정되며, 방문자의 관심을 끌 수 있도록 애니메이션 효과가 적용되어 있습니다.

 

 

• 화면폭이 큰 경우 : 사이드바처럼 본문 옆에 고정
• 화면폭이 작은 경우 : 화면 아래쪽에 고정되며, 버튼에 애니메이션 효과 적용

 

사용하고 있는 스킨에 이 버튼 디자인을 적용하는 방법은 간단합니다. CSS 코드와 HTML </body> 코드 위에 넣어주면 되는 매우 간단한 작업입니다. 잘 모르시는 분은 아래에 자세하게 설명된 내용을 참고해 주세요.

 

✅ 티스토리 반응형 플로팅 CSS 버튼 코드 다운로드

 

데스크톱 사이드바, 모바일 하단 고정 버튼.txt

0.01MB

 

✅ 데스크톱, 태블릿 화면에서 2개의 버튼 좌우 배치, 모바일 화면 위아래 자동 배열

 

 

 

 

Step 1. 티스토리 스킨에 CSS 코드 등록

티스토리 관리 페이지에서 꾸미기 메뉴로 들어가 스킨 편집을 선택한 후, HTML 편집을 클릭하면 경고 문구가 나타납니다.

 

그다음 HTML 및 CSS를 편집할 수 있는 페이지에서 CSS 탭을 선택하고, 기존 코드가 끝나는 지점 아래에 다운로드한 파일에 있는 "/* 데스크톱 화면 우측 고정, 1300 이하 화면 하단 고정 코드 시작 /"부터 "/ 데스크톱 화면 우측 고정, 1300 이하 화면 하단 고정 코드 끝 */"까지의 내용을 복사하여 붙여 넣습니다.

 

마지막으로, 붙여 넣은 CSS 코드를 저장하기 위해 "적용" 버튼을 클릭해 주면, CSS 등록이 완료됩니다.

 

1. 티스토리 관리 페이지 - 꾸미기 - 스킨편집 선택
2. 스킨 편집 페이지에서 html 편집을 선택하면 나오는 경고 문구 확인
3. HTML 및 CSS를 편집할 수 있는 페이지에서 CSS탭 선택
4. 기존 코드가 끝나는 지점 아래에 다운로드한 파일에 있는 /* 데스크톱 화면 우측 고정, 1300 이하 화면 하단 고정 코드 시작 */부터  /* 데스크톱 화면 우측 고정, 1300 이하 화면 하단 고정 코드 끝 */의 내용을 복사 붙여 넣기.
5. 붙여 넣기 한 CSS 코드를 저장하기 위해 "적용" 선택

 

티스토리 스킨에 플로팅 반응형 CSS 코드 등록

 

 

사이드바를 왼쪽으로 배치하는 방법

현재 기본 설정은 본문 오른쪽에 나타나도록 되어 있습니다. 본문 왼쪽으로 이동시키려면 아래 그림을 참고해서 button-grid에 있는 left: ~ 되어 있는 코드를 right로 수정해 주세요.

 

 

사이드바를 본문 왼쪽에 배치하는 방법

 

 

사용하는 스킨에 사이드바가 있다면

현재 배포하고 있는 티스토리 플로팅 반응형 CSS 코드는 #1 스킨을 기준으로 제작되었습니다. #1 스킨의 경우 본문의 폭이 820px입니다.

 

티스토리 스킨마다 사용되는 폭이 다릅니다. 그리고, 본문 상단에 이미지를 출력하는 북 스킨 같은 경우에는 본문 포스팅 상단 이미지와 겹칠 수 있습니다. 상황에 맞게 CSS 버튼이 출력되는 자리를 수정해 주세요.

 

 

X축(좌우)은  cal(50% + 450px)이라는 코드이며, Y축(상하)은 top:100px이라는 코드입니다. 000px의 수치를 조절하시면 됩니다.

 

사이드바의 위치를 수정하고 싶을 때

 

Step 2. HTML 코드 등록

CSS 코드를 등록했나요? 그럼 이제 HTML 탭을 선택한 후, HTML 코드의 가장 하단부에 </body> 태그를 찾아주세요.

 

</body> 바로 위에 다운로드한 파일에 있는 <!-- 데스크톱 화면 우측 고정, 1300 이하 화면 하단 고정 코드 시작 -->부터 <!-- 데스크톱 화면 우측 고정, 1300 이하 화면 하단 고정 코드 끝 -->까지의 내용을 복사하여 붙여 넣습니다.

 

마지막으로, 붙여 넣은 HTML 코드를 저장하기 위해 "적용" 버튼을 클릭해 주면 버튼이 적용된 모습을 확인할 수 있습니다.

 

 

1. HTML 및 CSS를 편집할 수 있는 페이지에서 HTML탭 선택
2. HTML 코드 가장 하단부에 있는 </body>를 찾아주세요. </body> 위에 다운로드한 파일에 있는 <!-- 데스크톱 화면 우측 고정, 1300 이하 화면 하단 고정 코드 시작 -->부터 <!-- 데스크톱 화면 우측 고정, 1300 이하 화면 하단 고정 코드 끝 -->의 내용을 복사 붙여 넣기.
3. 붙여 넣기 한 HTML 코드를 저장하기 위해 "적용" 선택

티스토리 스킨에 반응형 플로팅 html 코드 등록

 

 

버튼에 사용되는 텍스트 및 링크 주소 수정 방법

버튼에 표시되는 텍스트 및 링크 주소를 수정하려면, 방금 붙여 넣은 html 코드를 아래의 그림을 참고해서 변경하시면 됩니다. 편집 작업이 서툰 분은 별도의 메모장을 이용해서 편집한 다음 다시 붙여 넣기 해주세요.

 

 

버튼 출력 개수

모바일 화면(6개 출력)보다는 데스크톱 화면(10개 이상 출력)에서 더 많은 버튼이 출력됩니다. 사용하려는 링크의 우선순위를 정해서 사용하세요.

 

반응형 플로팅 버튼에 사용되는 텍스트 및 링크 주소 편집

 

 

링크 현재창 열기 OR 새창으로 열기

구글 애드센스 전면광고를 위해 버튼의 링크 주소를 현재창으로 열 것인지 아니면 새로운 창으로 열 것 인지 선택할 수 있습니다.

 

 

반응형 플로팅 버튼 링크 주소 현재창 또는 새창으로 열기 선택 방법

 

 

 

맺음말

지금까지 티스토리 스킨에 적용할 수 있는 반응형 플로팅 CSS 버튼(데스크톱 : 사이드바로 고정, 모바일 : 화면 하단 고정)을 사용하는 방법에 대해서 알아보았습니다. 부족한 글이지만 끝까지 읽어주셔서 감사합니다. 다음에는 더 좋은 내용으로 뵙겠습니다.

 

✅ 데스크톱, 태블릿 화면에서 2개의 버튼 좌우 배치, 모바일 화면 위아래 자동 배열

 

 

 

출처 및 저작권 표시

 

자료 출처

 

저작권 표시

썸네일 디자인 : 미리캔버스에서 제작되었습니다.

본문 글꼴(폰트) : Google Noto Sans Korean - OFL(Open Font Licese)

이미지에 삽입된 글꼴(폰트) : 이 페이지는 카페 24(주)이 제공한 "카페 24 당당해"가 적용되어 있습니다.