안녕하세요. 알면 돈되는 꿀팁 저장소입니다.
이번시간에는 html 코드를 이용해, 워드프레스 블로그 버튼 만드는 방법을 알려드리겠습니다.
워드프레스 버튼은 클릭률을 매우 높여주니, 끝까지 따라해서 꼭 마음에 드는 버튼을 만들어보세요.
1. 워드프레스 버튼 만드는 사이트로 이동하기
저도 워드프레스 블로그에 광고 클릭률을 높이기 위해서 큰 버튼을 만들어 적용시키고 싶었는데, 이게 꽤 어려운 작업이라는 걸 크게 느꼈습니다.
아무리 다른 블로거 분들이 올린 방법을 봐도 적용하기도 어렵고, 막상 적용을 해도 버튼 만들기가 진짜 쉽지가 않더라고요.
그래서 결국 노력 끝에 찾아낸 방법을 공유해드립니다.
일단 가장 먼저, 아래의 링크를 눌러서 버튼 만드는 사이트로 이동해주세요.
이동하면 아래와 같은 화면이 나오게 되는데, 오른쪽에 나와있는 ‘텍스트’ 부분을 조절해 원하는 모양대로 설정하면 됩니다.
2. HTML 코드 복사하기
텍스트 부분을 조절해서 자신이 원하는 워드프레스 버튼을 만들었다면 아래에 나와있는 ‘코드 받기’를 눌러 코드를 받습니다.
위의 코드에서 첫 부분은 HTML 부분이고, my button 부터 끝까지는 CSS 부분입니다.
혹시, 위에 말이 설명이 이해가 안되셨다면 아래 사진을 참고해주세요.
3. 워드프레스에 만든 버튼 적용하기 (HTML)
저는 CSS 코드를 적용시켜서 버튼 만드는게 너무 어려워서 HTML 코드를 이용해서 버튼을 만들었습니다.
저는 워드프레스에서 ‘클래식 편집기’를 사용했으니 꼭 참고해주세요.
① 아래 사진에 나온 부분을 복사합니다.(HTML 부분만)
★참고★
위에 html 코드에서 “green”이 써져있는 부분만 자신이 원하는 “상품권 다운로드 바로가기” 등과 같은 글로 바꿔주시면 버튼에 글씨가 바로 적용됩니다.
② 워드프레스 글 쓰는 공간에서 텍스트를 클릭 (오른쪽 맨 위)
비주얼을 누르게 되면 아래와 같은 모양입니다.
비주얼을 누르게 되면 아래와 같은 모양입니다.
버튼이 제대로 적용되었는지 확인하기 위해서는 임시글이나, 비공개 글로 발행한 후 페이지를 확인해보면 버튼이 적용된 것을 확인할 수 있을 것입니다.