구글 블로그 상단으로 이동 버튼 만들기 | 블로그스팟 Scroll To Top 버튼 초간단 설치 방법
구글 블로그 상단으로 이동 버튼, 흔히 Scroll To Top 버튼이라고 부릅니다. 긴 글을 읽다 보면 다시 맨 위로 돌아가고 싶을 때가 있습니다. 특히 정보성 콘텐츠나 5천 자 이상 장문 포스팅에서는 이 기능이 체감상 큰 차이를 만듭니다.
모바일에서는 비교적 간단합니다. 아이폰의 경우 화면 상단을 터치하면 자동으로 위로 이동합니다. 하지만 PC 환경에서는 이런 기본 기능이 없습니다. 마우스 휠을 계속 돌리거나 스크롤 바를 직접 끌어야 합니다.
사용자 경험(UX) 관점에서 보면 작은 불편이지만, 반복되면 이탈로 이어질 수 있습니다. 따라서 블로그스팟 상단 이동 버튼 추가는 단순한 꾸미기가 아니라, 실질적인 사용자 편의성 개선 작업입니다.
왜 상단으로 이동 버튼이 SEO에 도움이 될까?
구글 SEO와 네이버 SEO에서 중요한 요소 중 하나는 체류 시간과 사용자 행동 지표입니다. 사용자가 글을 끝까지 읽고 다시 다른 글로 이동하면, 이는 사이트 구조가 잘 설계되었다는 신호가 됩니다.
상단 이동 버튼이 있으면, 독자는 쉽게 목차나 카테고리 영역으로 돌아갈 수 있습니다. 결과적으로 페이지 내 탐색 효율이 높아집니다.
- 블로그 체류시간 증가
- 페이지 전환율 상승
- 사용자 경험 개선
- 이탈률 감소 가능성
기본 테마에서 제공하는 경우
최근 배포되는 일부 프리미엄 블로그스팟 테마는 Scroll To Top 기능을 기본 탑재합니다. 설정 메뉴에서 ON/OFF만 하면 됩니다. 하지만 무료 테마나 오래된 스킨을 사용하는 경우, 직접 코드를 추가해야 합니다.
블로그스팟 상단으로 이동 버튼 설치 방법 (레이아웃 가젯 활용)
1. Blogger 관리자 페이지 접속
먼저 Blogger 관리자 화면으로 이동합니다. 왼쪽 메뉴에서 레이아웃을 클릭합니다. 이 메뉴는 블로그 구조를 시각적으로 배치하는 공간입니다.
2. 가젯 추가 버튼 클릭
레이아웃 화면에서 아무 위치나 상관없습니다. 가젯 추가 버튼을 클릭합니다. 단, 위치는 가능하면 페이지 본문 섹션 하단이 좋습니다.
3. HTML/JavaScript 가젯 선택
목록 중에서 HTML/JavaScript를 선택합니다. 제목은 비워도 무방하며, 콘텐츠 영역에 아래 코드를 그대로 붙여 넣으면 됩니다.
상단 이동 버튼 스크립트 코드
클릭하여 코드 확인하기
<!-- 상단 이동 버튼 -->
<style>
/* ... 내부 스타일 생략 (기존과 동일) ... */
</style>
<button onclick="topFunction()" id="topBtn" title="맨 위로">▲</button>
<script>
/* ... 스크립트 내용 생략 (기존과 동일) ... */
</script>설치 후 확인해야 할 체크 포인트
- 모바일 화면에서 버튼 크기 적절한지
- 다른 고정 버튼과 겹치지 않는지
- 광고 코드와 충돌 없는지
- 속도 저하 없는지
자주 묻는 질문 (FAQ)
Q1. 테마 편집에서 직접 넣는 게 더 좋은가요?
가능은 하지만, 초보자라면 레이아웃 가젯 방식이 안전합니다. 테마 백업 없이 수정하다 오류가 나면 복구가 번거롭기 때문입니다.
Q2. 버튼 디자인을 바꾸고 싶어요.
코드 내 background-color, font-size 등을 조정하면 됩니다. ▲ 기호 대신 이미지나 SVG 아이콘을 넣을 수도 있습니다.
Q3. 네이버 검색에도 영향이 있나요?
직접적인 랭킹 요소는 아닙니다. 하지만 사용자 행동 지표 개선 측면에서 긍정적입니다.