스크롤을 내려도 찰떡같이 따라오는 'SNS 플로팅 공유 바'
좋은 글일수록 독자는 다른 사람에게 공유하고 싶어 합니다. 이때 공유 버튼을 찾으러 맨 위나 아래로 갈 필요 없이, 화면 옆에 고정된 버튼이 있다면 공유 확률은 비약적으로 상승합니다. CSS의 sticky 기능을 활용한 레이아웃 수정법입니다.
1단계: 플로팅 바 디자인 CSS 설정
📍 위치: [테마] → [맞춤설정] → [고급] → [CSS 추가]
아래 코드를 복사해서 붙여넣으세요. 화면 왼쪽에 세로로 나열되는 깔끔한 버튼 스타일입니다.
/* 플로팅 공유 바 전체 설정 */
.floating-share-bar {
position: fixed;
top: 50%; /* 화면 중앙 높이 */
left: 20px; /* 🚩 오른쪽에 배치하려면 left 대신 right: 20px; 사용 */
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 10px;
z-index: 1000;
}
/* 개별 아이콘 스타일 */
.share-btn {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
color: #fff !important;
text-decoration: none !important;
font-weight: bold;
font-size: 18px;
transition: 0.3s ease;
}
/* SNS별 브랜드 컬러 */
.btn-fb { background-color: #3b5998; }
.btn-tw { background-color: #1da1f2; }
.btn-wa { background-color: #25d366; }
.share-btn:hover {
transform: scale(1.1); /* 호버 시 살짝 확대 */
filter: brightness(1.1);
}
/* 모바일에서는 숨기기 (가독성 보호) */
@media (max-width: 1024px) {
.floating-share-bar { display: none; }
}
2단계: HTML 구조 삽입하기
[테마] → [HTML 편집]에서 <body> 태그 바로 아래나 [레이아웃] → [가젯 추가(HTML/JS)]에 아래 코드를 넣으세요.
<div class="floating-share-bar">
<!-- 페이스북 공유 -->
<a href="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href));" class="share-btn btn-fb" title="Facebook 공유">f</a>
<!-- 트위터 공유 -->
<a href="javascript:window.open('https://twitter.com/intent/tweet?url=' + encodeURIComponent(window.location.href));" class="share-btn btn-tw" title="Twitter 공유">t</a>
<!-- 왓츠앱 공유 -->
<a href="javascript:window.open('https://api.whatsapp.com/send?text=' + encodeURIComponent(window.location.href));" class="share-btn btn-wa" title="WhatsApp 공유">w</a>
</div>
💡 레이아웃 최적화 꿀팁
1. 위치 선정: 블로그 본문 영역과 너무 겹친다면 CSS의
2. 모바일 대응: 위 코드는 모바일에서 바를 숨기도록 설정되어 있습니다. 모바일에서는 본문 하단에 가로로 배치하는 것이 UX(사용자 경험)상 더 좋습니다.
3. 카카오톡 추가: 한국 독자가 많다면 카카오톡 공유 API를 연결하여 노란색 버튼을 추가해 보세요.
1. 위치 선정: 블로그 본문 영역과 너무 겹친다면 CSS의
left 값을 늘리거나, right: 20px;를 사용하여 오른쪽으로 옮겨보세요.2. 모바일 대응: 위 코드는 모바일에서 바를 숨기도록 설정되어 있습니다. 모바일에서는 본문 하단에 가로로 배치하는 것이 UX(사용자 경험)상 더 좋습니다.
3. 카카오톡 추가: 한국 독자가 많다면 카카오톡 공유 API를 연결하여 노란색 버튼을 추가해 보세요.
⚠️ 주의사항
- 본문 가림 방지: 해상도가 낮은 노트북에서는 공유 바가 본문 글자를 가릴 수 있습니다. 반드시 다양한 기기에서 테스트해 본 뒤 여백을 조정하세요.
- 스크립트 충돌: 다른 공유 위젯과 중복되지 않는지 확인하고, 버튼이 작동하지 않는다면 자바스크립트 주소가 현재 페이지 URL을 제대로 인식하고 있는지 체크해야 합니다.
- 본문 가림 방지: 해상도가 낮은 노트북에서는 공유 바가 본문 글자를 가릴 수 있습니다. 반드시 다양한 기기에서 테스트해 본 뒤 여백을 조정하세요.
- 스크립트 충돌: 다른 공유 위젯과 중복되지 않는지 확인하고, 버튼이 작동하지 않는다면 자바스크립트 주소가 현재 페이지 URL을 제대로 인식하고 있는지 체크해야 합니다.
스크롤을 따라오는 세련된 공유 바와 함께 여러분의 글을 널리 퍼뜨려 보세요!
![[블로그스팟 가이드] 네이버처럼 메뉴 만들기: 라벨과 URL 설정 총정리](https://blogger.googleusercontent.com/img/a/AVvXsEgSBUNjbKJOjRWx4ILBNwUUDnjMAQnHBWLxjSNLUsTzgduMxyXF7IZdzpNkEpyAz5q1rWdLXjquQ-VFHv3UzZgcBgn6XGBzqMSknuGY-vNutr26KNQuJB0gajn-poIdhH3NqYBUaRIoW64ZFO1tOP_34rLpPlOs7-AsTAf6SnH-tekEWB29ZZHV3cY7XmY=w72-h72-p-k-no-nu)
0 댓글