블로그스팟 글쓰기 : CSS 버튼 만들기, 클릭 유도 - 푸우꿀공장

수익형 블로그인 블로그스팟 글쓰기를 하다보면 예쁜 버튼을 만들어 클릭을 유도하고 싶을 때가 있습니다. 이때 사용하면 좋은 CSS 반응형 버튼을 만들어 보겠습니다.  

반응형 버튼은 어디서 찾나?

예전에는 직접 만들어서도 사용했지만, 내가 만든 것보다 더 예쁜 반응형 CSS 버튼을 제공하는 블로그가 있있서 소개합니다. 아래를 클릭하세요. 

CSS 버튼의 구성

CSS 버튼은 [CSS 코드]와 [HTML 코드]로 구성되어 있습니다. CSS 코드는 블로그스팟 테마 소스에 넣어야 하며, HTML 코드는 글쓰기를 사용할때 넣습니다. 

CSS 버튼 사용하는 법

CSS 코드 붙여넣기

• 위의 '반응형 CSS 버튼 모음' 링크를 들어가서 마음에 드는 반응형 버튼을 고릅니다. 

- 저는 '링크 버튼 11'을 골랐습니다. 

• CSS 스타일 코드를 복사합니다. 
• 블로그스팟 관리자로 들어가 [테마]를 누릅니다. 
• 맞춤설정 옆의 🔽를 누른후, [HTML 편집]으로 들어갑니다. 
• HTML 소스에서 'Ctrl+F'를 누른 후 ]]></b:skin> 를 검색합니다. 
• ]]></b:skin> 위에 엔터를 치고, 위에서 복사한 CSS 스타일 코드를 붙여넣습니다. 
• 오른쪽 상단에 [저장]을 누릅니다. 
  

HTML 코드 사용하기

• CSS 버튼 모음 블로그로 다시 들어가 내가 고른 버튼의 HTML 코드를 복사합니다. 
• 왼쪽 메뉴중 [설정]을 누른 후, [글 템플릿]에 들어갑니다. 
• 복사했던 코드를 붙여넣기 한 후, 저장합니다. 
• 왼쪽 메뉴 중 [새 글]을 누릅니다. 
• 버튼 디자인이 제대로 보이지 않으니, 오른쪽 상단 [미리보기]를 누릅니다. 
  
• 미리보기에서는 예쁘게 보이긴 하나 반응하지 않습니다. 실제 글을 발행하면 마우스 오버를 했을때 반응합니다. 

📌디자인을 제대로 확인하려면 PC와 스마트폰 둘다 확인한 후 가장 마음에 드는 버튼을 고르세요. 

마무리

오늘은 블로그스팟에서 글쓰기 할때 예쁜 CSS 반응형 버튼을 넣는 법에 대해서 해보았습니다. 버튼을 잘 쓰면 수익형 블로그에 굉장히 중요한 부분이 되기도 하니, 클릭을 유도하는 버튼을 잘 찾아보시기 바랍니다.