블로그스팟으로 수익형 블로그를 운영하다 보면, 방문자의 클릭을 유도할 수 있는 예쁜 버튼이 필요할 때가 있습니다. 특히 디자인적으로 돋보이면서도 반응형 기능이 적용된 버튼은 콘텐츠 내에서 사용자의 시선을 끌고 클릭을 유도하는 데 매우 효과적입니다. 오늘은 클릭률을 높이는 데 유용한 반응형 CSS 버튼을 블로그스팟 글에 어떻게 적용하는지 자세히 알려드릴게요.
CSS 버튼은 어디서 구할 수 있을까?
예전에는 직접 코드를 짜서 만들기도 했지만, 요즘은 고퀄리티의 CSS 버튼을 무료로 공유하는 블로그들이 많아졌습니다. 디자인과 반응성, 깔끔함까지 갖춘 다양한 스타일의 버튼이 제공되는 사이트들이 많기 때문에, 굳이 직접 만들 필요 없이 원하는 버튼을 골라 사용하는 것이 효율적입니다. 마음에 드는 버튼만 잘 골라서 가져오면 됩니다.
반응형 CSS 버튼의 구성 요소
CSS 버튼은 두 가지 핵심 구성요소로 이루어져 있습니다.
-
CSS 코드
이 코드는 버튼의 디자인을 정하는 부분으로, 블로그 테마의 소스 코드에 추가해야 합니다. 전체 블로그에 적용되기 때문에 한 번만 설정하면 이후 글쓰기에서 반복해서 사용할 수 있습니다. -
HTML 코드
이 코드는 실제 버튼을 삽입할 위치에 넣는 것으로, 글쓰기 화면에 작성해야 합니다. 이 HTML 태그를 통해 버튼이 본문 내에 보이게 되는 것이죠.
CSS 스타일 코드 넣는 방법
예를 들어 ‘링크 버튼 ’이라는 버튼을 골랐다고 가정해볼게요.
- 먼저 해당 버튼의 CSS 스타일 코드를 복사합니다.
- 블로그스팟 관리자로 들어가 ‘테마’를 클릭합니다.
- ‘맞춤설정’ 옆의 ▼ 버튼을 눌러 ‘HTML 편집’에 들어갑니다.
- HTML 소스에서 Ctrl + F 키를 누른 후 ‘</style>’ 을 검색합니다.
- 찾은 태그 바로 위에 복사한 CSS 스타일 코드를 붙여넣습니다.
- 우측 상단에 있는 ‘저장’을 클릭하면 CSS 설정은 끝입니다.
HTML 코드 적용하는 방법
CSS 스타일 코드 설정이 끝났다면, 이제 글 안에 버튼을 넣기 위한 HTML 코드를 적용할 차례입니다.
- 버튼을 제공한 블로그로 돌아가 원하는 버튼의 HTML 코드를 복사합니다.
- 블로그스팟 관리자로 들어가 좌측 메뉴에서 ‘설정’을 클릭하고 ‘글 템플릿’으로 들어갑니다.
- 복사한 HTML 코드를 글 템플릿에 붙여넣고 저장합니다.
- <button class="button--moema">버튼</button>
- 이후 ‘새 글’을 작성할 때 템플릿에 설정한 버튼이 자동으로 나타납니다.
- 글 작성 화면에서는 디자인이 잘 보이지 않을 수 있으므로, 반드시 우측 상단의 ‘미리보기’를 통해 버튼 디자인을 확인하세요.
미리보기에서는 버튼이 반응하지 않을 수 있습니다. 마우스를 올렸을 때 색이 변하거나 애니메이션 효과가 나타나는 등 실제 반응형 기능은 글을 발행한 후 정상적으로 작동합니다.
디자인 선택 팁
하나의 버튼 디자인이 모든 화면에서 완벽하게 보이지는 않기 때문에, 반드시 PC와 스마트폰 양쪽에서 버튼의 반응성과 디자인을 확인하는 것이 중요합니다. 기기에 따라 다르게 보일 수 있으니, 직접 확인해보고 가장 적합한 버튼을 선택하는 것이 좋습니다.
리뷰를 마치며
오늘은 블로그스팟 글쓰기 시 클릭을 유도할 수 있는 반응형 CSS 버튼을 적용하는 방법을 소개해드렸습니다. 버튼 하나만 잘 선택해도 글의 완성도가 달라지고, 방문자 행동을 유도할 수 있습니다. 특히 수익형 블로그를 운영하는 분들이라면, 클릭을 유도할 수 있는 요소 하나하나가 수익에 큰 영향을 미칠 수 있으니 꼭 한 번 적용해보시길 추천드립니다. 이왕이면 디자인도 예쁘고 반응도 빠른 버튼으로 말이죠!
