블로그스팟 모바일 편의성 끝판왕! SNS 공유 바에 '맨 위로 이동(TOP)' 버튼 추가하기

 

공유와 이동을 동시에! 모바일 하단 'TOP 버튼' 통합 가이드

독자가 긴 글의 끝까지 내려왔을 때, 다시 위로 올라가기 위해 화면을 계속 스와이프해야 한다면 피로감을 느낍니다. 기존 공유 바 마지막 칸에 상단 이동 버튼을 추가하여 블로그의 사용 편의성을 업그레이드해 보세요.

1단계: 모바일 통합 바 CSS 설정

📍 위치: [테마] → [맞춤설정] → [고급] → [CSS 추가]

버튼 개수가 늘어난 만큼 높이와 폰트 크기를 최적화했습니다. 기존 공유 바 코드를 지우고 이 코드로 교체하세요.

/* 모바일 통합 하단 바 (공유 + TOP) */ @media screen and (max-width: 768px) { .mobile-top-share-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: 55px; background: #fff; display: flex; box-shadow: 0 -3px 12px rgba(0,0,0,0.12); z-index: 9999; } .m-nav-btn { flex: 1; display: flex; align-items: center; justify-content: center; color: #fff !important; text-decoration: none !important; font-size: 15px; font-weight: bold; } /* 버튼별 색상 설정 */ .m-inst { background-color: #e1306c; } /* 인스타 */ .m-ytub { background-color: #ff0000; } /* 유튜브 */ .m-ka { background-color: #fee500; color: #3c1e1e !important; } /* 카톡 */ .m-copy { background-color: #555; } /* 링크복사 */ .m-top { background-color: #222222; } /* 🚩 TOP 버튼 색상 (검정색 추천) */ body { padding-bottom: 55px; } } @media screen and (min-width: 769px) { .mobile-top-share-bar { display: none; } }

2단계: 내 주소 입력 및 TOP 기능 (HTML)

📍 위치: [테마] → [HTML 편집] → </body> 태그 바로 위

각 영역의 [강조된 부분]에 본인의 링크를 정확히 넣어주세요. TOP 버튼은 별도의 주소 입력이 필요 없습니다.

<div class="mobile-top-share-bar"> <!-- 1. 인스타그램 이동 --> <a href="https://www.instagram.com/내아이디" target="_blank" class="m-nav-btn m-inst">IG</a> <!-- 2. 유튜브 채널 이동 --> <a href="https://www.youtube.com/@내채널주소" target="_blank" class="m-nav-btn m-ytub">YT</a> <!-- 3. 카카오톡 공유 --> <a href="javascript:window.open('https://sharer.kakao.com/talk/friends/picker/link?url=' + encodeURIComponent(window.location.href));" class="m-nav-btn m-ka">톡</a> <!-- 4. 링크 복사 --> <a href="javascript:void(0);" onclick="copyToClipboard();" class="m-nav-btn m-copy">🔗</a> <!-- 5. 맨 위로 이동 (TOP) --> <a href="javascript:void(0);" onclick="scrollToTop();" class="m-nav-btn m-top">▲ TOP</a> </div> <script> // 링크 복사 함수 function copyToClipboard() { var dummy = document.createElement('input'), text = window.location.href; document.body.appendChild(dummy); dummy.value = text; dummy.select(); document.execCommand('copy'); document.body.removeChild(dummy); alert('주소가 복사되었습니다!'); } // 상단 이동 함수 function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); } </script>

💡 레이아웃 구성 팁
- 직관적인 디자인: TOP 버튼은 공유 버튼들과 명확히 구분되도록 검정색(#222)이나 회색 계열을 사용하는 것이 좋습니다.
- 부드러운 이동: 자바스크립트의 behavior: 'smooth' 옵션 덕분에 화면이 뚝 끊기지 않고 부드럽게 위로 올라갑니다.

⚠️ 주의사항
버튼이 5개이므로 각 버튼의 너비가 좁아질 수 있습니다. 텍스트를 'IG', 'YT', '톡', 'TOP'처럼 아주 짧게 유지해야 글자가 겹치지 않습니다. 버튼 간격이 너무 좁다면 가장 덜 사용하는 버튼 하나를 삭제해 보세요.

공유와 이동을 한 번에 해결하는 스마트한 푸터 바를 만나보세요!