블로그스팟용 동적 링크 버튼 완성!
블로그스팟에서 사용할 수 있는 세 가지 컬러의 동적 링크 버튼을 만들어드렸습니다. 이 버튼들은 글씨 길이에 따라 자동으로 폰트 크기가 조절되고, 반응형 디자인으로 모바일에서도 완벽하게 작동합니다.
🎨 주요 특징
1. 세 가지 컬러 변형
블루 버튼 (
btn-blue): 블루-퍼플 그라데이션그린 버튼 (
btn-green): 그린-청록 그라데이션오렌지 버튼 (
btn-orange): 오렌지-핑크 그라데이션
2. 스마트한 동적 크기 조절
1-5글자: 큰 폰트 (18px, 넉넉한 패딩)
6-10글자: 중간 폰트 (16px, 표준 패딩)
11-15글자: 작은 폰트 (14px, 작은 패딩)
16-20글자: 최소 폰트 (12px, 최소 패딩)
3. 완벽한 반응형 디자인
데스크톱: 인라인 버튼
태블릿/모바일: 전체 너비 블록 버튼
CSS
clamp()함수로 유동적 폰트 크기
4. 매끄러운 애니메이션
호버 시 위로 떠오르는 효과
그림자 강화 효과
포커스 시 펄스 애니메이션
📥 설치 방법
1단계: 테마에 코드 삽입
블로그스팟 관리자 → 테마 → HTML 편집
</head>태그 바로 앞에 제공된 CSS/JavaScript 코드 삽입저장
2단계: 포스팅에서 사용
xml<a href="링크주소" class="dynamic-button btn-blue">버튼 텍스트</a> <a href="링크주소" class="dynamic-button btn-green">버튼 텍스트</a> <a href="링크주소" class="dynamic-button btn-orange">버튼 텍스트</a>
⚡ 자동화 기능
JavaScript가 자동으로 버튼 텍스트 길이를 측정
data-length속성 자동 추가수동으로 길이를 설정할 필요 없음
📱 모바일 최적화
768px 이하: 블록 레이아웃으로 전환
480px 이하: 더 작은 패딩과 폰트 크기
터치 친화적인 크기와 간격
상세한 설치 가이드와 사용법이 포함된 마크다운 파일을 생성했습니다.
이제 블로그스팟 테마에 이 코드를 삽입하고, 포스팅에서 간단하게 버튼을 사용할 수 있습니다. 버튼은 자동으로 텍스트 길이를 감지해서 최적의 크기로 조절됩니다!
댓글 쓰기