초보도 쉽게 만들 수 있는 '티스토리 링크 버튼(CSS HTML 버튼)'

전면 광고 수익화를 위해 꼭 필요한 티스토리 링크 버튼

티스토리 (CSS HTML) 링크 버튼은 내부 링크와 가독성 때문에 필요합니다. 애드센스를 이용하는 사용자라면 외부 링크를 선호하지 않을 것입니다. 외부 링크(새 창으로 연결)를 사용하면 전면 광고가 뜨지 않기 때문입니다. 또한 가독성 측면에서도 버튼은 매우 중요한 요소 중 하나입니다. 이러한 이유로 티스토리 (CSS HTML) 링크 버튼이 필요합니다.

---

티스토리 (CSS HTML) 링크 버튼 만드는 방법

티스토리 (CSS HTML) 링크 버튼을 만드는 방법은 다양합니다. 오늘은 가장 간단하면서 쉬운 방법에 대해서 알려드리겠습니다.

• 하단에 링크버튼 생성 바로가기 를 클릭하여 'Button Generator' 사이트에 접속합니다.

링크 버튼 생성 바로가기

• 다음과 같은 화면이 나오면 원하는 왼쪽에 원하는 색상의 버튼을 선택해 줍니다.

---

• 오른쪽에 버튼 상세 설정을 조절하여 디자인을 원하는 디자인으로 변경할 수 있습니다. 변경을 원하지 않으면 바로 버튼 상세 설정 아래에 Get Copy를 클릭해 줍니다.

---

• 빨간 테두리 안에 있는 코드를 드레그 해서 복사합니다. 처음 시작하는 myButton 앞에 점(.)까지 드레그해서 복사해 주세요.

---

• 티스토리 계정으로 들어가서 관리버튼 클릭합니다.

---

• 좌측 중간에 꾸미기에 스킨편집 클릭 >> html 편집 클릭합니다.

---

• 상단에 CSS 글자를 클릭해 줍니다.

 

---

• 맨 아래까지 스크롤을 내려서 가장 밑에 붙여넣기 합니다.

---

• 적용 버튼 클릭해서 CSS 코드 적용을 완료합니다.

---

• 티스토리 관리로 돌아와서 좌측 중간에 서식관리 >> 서식쓰기 클릭합니다.

---

• 타이틀제목에 CSS 버튼(블루) 이런 식으로 본인이 설정한 버튼색깔 이름을 넣어주고 기본모드에서 HTML 변경해 줍니다.

---

• 다시 'Button Generator' 사이트로 되돌아가서 코드 상단에 첫 줄을 드레그 해서 복사합니다.

---

• 다시 서식쓰기로 돌아와서 복사한 코드를 붙여넣기 하고 미리보기를 해보면 버튼이 생성된 것이 확인되면 서식쓰기를 완료합니다.

---

링크버튼 포스팅에 적용해 보기

• 이제 실제로 작성 중인 글에 링크버튼을 적용해 보겠습니다. 먼저 우측상단에 서식을 클릭합니다.

---

• 미리 만들어놓은 CSS 링크버튼 서식을 클릭해서 불러옵니다. blue라는 글자가 나타나는 것이 확인됩니다.

---

• html 모드로 변경해서 컨트롤+F (맥북은 커맨드+F) 찾기 모드에서 blue라고 쓰고 찾기를 합니다.

---

• # 글자를 지우고 복사한 링크 주소를 붙여 넣어줍니다.

---

• 다음으로 blue 글자를 지우고 원하는 링크버튼 이름을 만들어줍니다.

---

• 다시 기본모드로 돌아와서 생성된 링크버튼 이름의 크기와 색깔을 원하는 대로 변경합니다.

---

• 마지막으로 미리보기를 하면 완성된 링크버튼을 확인하실 수 있습니다.

---

링크 버튼을 만들 때 주의할 점

• 버튼의 디자인이 블로그의 전체적인 스타일과 어울리는지 확인합니다.
• 버튼의 색상이 블로그의 전체적인 색상과 조화를 이루는지 확인합니다.
• 버튼의 크기와 위치가 적절한지 확인합니다.

이러한 점들을 고려하여 링크 버튼을 만들면 블로그의 가독성 및 클릭률을 높일 수 있습니다.

---

함께 보면 좋은 글

티스토리 애드센스 수동광고 쉽고 간단한 설정 방법

 

티스토리 bing 활용해서 쉽게 포스팅하기

 

앱테크 모니모 쉽게 돈버는 방법 수익 인증