블로그스팟용 동적 링크 버튼 완성!

블로그스팟에서 사용할 수 있는 세 가지 컬러의 동적 링크 버튼을 만들어드렸습니다. 이 버튼들은 글씨 길이에 따라 자동으로 폰트 크기가 조절되고, 반응형 디자인으로 모바일에서도 완벽하게 작동합니다.

🎨 주요 특징

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단계: 테마에 코드 삽입

1. 블로그스팟 관리자 → 테마 → HTML 편집

2. </head> 태그 바로 앞에 제공된 CSS/JavaScript 코드 삽입

3. 저장

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 이하: 더 작은 패딩과 폰트 크기

• 터치 친화적인 크기와 간격

blogspot-buttons.md 코드 다운로드링크

생성된 파일

• 상세한 설치 가이드와 사용법이 포함된 마크다운 파일을 생성했습니다.

이제 블로그스팟 테마에 이 코드를 삽입하고, 포스팅에서 간단하게 버튼을 사용할 수 있습니다. 버튼은 자동으로 텍스트 길이를 감지해서 최적의 크기로 조절됩니다!

처음으로

Read More