블로그 소통의 완성! 푸터에 인스타그램·페이스북 아이콘 예쁘게 넣는 법

 

독자와 연결되는 창구! 푸터 SNS 아이콘 배치 가이드

블로그 글을 재밌게 읽은 독자가 나의 인스타그램이나 페이스북으로 바로 넘어올 수 있다면 얼마나 좋을까요? 푸터에 깔끔한 SNS 아이콘을 배치하여 블로그의 활동성을 보여주고 팔로워도 늘려보세요.

1단계: SNS 아이콘 전용 CSS 설정

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

아래 코드를 복사해서 붙여넣으세요. 마우스를 올렸을 때 색상이 변하는 부드러운 호버 효과가 포함되어 있습니다.

/* SNS 아이콘 레이아웃 */ .footer-social-links { display: flex; justify-content: center; /* 가운데 정렬 */ gap: 15px; /* 아이콘 사이 간격 */ padding: 20px 0; } .social-icon { width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; /* 동그란 모양 */ color: #ffffff !important; font-size: 18px; text-decoration: none !important; transition: all 0.3s ease; } /* SNS별 고유 색상 설정 */ .icon-facebook { background-color: #3b5998; } .icon-instagram { background-color: #e1306c; } .icon-youtube { background-color: #ff0000; } /* 마우스를 올렸을 때 살짝 투명해지며 위로 이동 */ .social-icon:hover { transform: translateY(-5px); opacity: 0.8; }

2단계: 푸터에 아이콘 HTML 삽입하기

[테마] → [HTML 편집]에서 </footer> 태그 바로 위나, 저작권 문구 위쪽에 아래 코드를 넣으세요.

<div class="footer-social-links"> <!-- 페이스북 --> <a href="내_페이스북_주소" class="social-icon icon-facebook" target="_blank" title="Facebook">f</a> <!-- 인스타그램 --> <a href="내_인스타그램_주소" class="social-icon icon-instagram" target="_blank" title="Instagram">i</a> <!-- 유튜브 --> <a href="내_유튜브_주소" class="social-icon icon-youtube" target="_blank" title="YouTube">y</a> </div>

💡 더 예쁜 아이콘을 쓰는 법
위 코드에서는 단순 텍스트(f, i, y)를 썼지만, 더 전문적으로 보이려면 FontAwesome 같은 아이콘 폰트를 연동하여 실제 로고 아이콘을 넣는 것이 좋습니다. 혹은 작은 SNS 로고 이미지를 준비해 <img> 태그로 대체하셔도 좋습니다.

⚠️ 주의사항
- 새창 열기: target="_blank" 속성을 꼭 넣어야 독자가 내 블로그를 떠나지 않고 새 탭에서 SNS를 확인할 수 있습니다.
- 모바일 확인: 아이콘이 너무 작으면 손가락으로 터치하기 힘드니 40px 정도의 넉넉한 크기를 유지하세요.

세련된 SNS 아이콘으로 블로그 밖에서도 독자와 활발히 소통해 보세요!