티스토리 버튼 만들기 5초 완성

 

티스토리 버튼 만들기 5초 완성 가능합니다. 아래 Button Generator 사이트를 방문하여 원하는 색상, 버튼 모양(원, 네모)을 선택하고 자동으로 생성된 코드를 티스토리 CSS에 붙여 넣고 아래 안내해 드리는 HTML 코드를 메모해 두고 이용하면 편리하게 이용 가능합니다.

 

 

목차

 

티스토리 버튼 만들기 5초 완성

티스토리 버튼을 5초안에 만들어 버릴 것입니다. 아래 링크를 클릭하여 Button Generator 사이트를 방문해 주세요.

 

Button Generator 사이트 바로가기

 

Button Generator

• ① : 버튼의 색상과 모양을 완성된 이미지의 샘플로 선택/적용할 수 있습니다.
• ② : 선택/설정한 버튼을 확인할 수 있는 미리보기 입니다.
• ③ : Get Code는 버튼을 완성 후 클릭하면 CSS 코드를 확인할 수 있습니다.
• ④ : 텍스트(Text), 사이즈(Size)등 글씨와 크기를 설정할 수 있습니다.

 

위 메뉴 설명은 참고만 하고 바로 만들어 보세요! 색상과 모양을 고르는데 오랜 시간을 들이지 말고 일단 적당한 샘플을 선태하여 ③ Get Code를 클릭하여 CSS 코드를 복사하세요.

 

CSS 코드 복사

Get Code를 클릭하고 변경되는 화면 빨간 네모칸 부분(CSS 코드)을 복사합니다. 그리고 자신의 티스토리 꾸미기-스킨편집-html편집-CSS 순서로 접속합니다. 그리고 CSS 코드란의 맨 아랫부분에 붙여 넣기 하면 됩니다. 이제 티스토리 상에서 세팅이 완료되었습니다.

 

티스토리 글작성-기본모드에서 HTML로 변경하여 자신이 원하는 칸에 아래 HTML코드를 입력하면 됩니다.

<a class="myButton" href="https://www.bestcssbuttongenerator.com/">여기 버튼 이름</a>

 

버튼 이름과 중간에 링크 주소를 입력하면 버튼 완성입니다. 이렇게 한번 만들어 놓은 버튼은 메모해 둔 위 HTML 코드 입력만으로 버튼을 5초 만에 완성할 수 있습니다.

 

하지만 위 HTML코드를 다 입력했는데 아래와 같은 모습이라면 정상입니다! 미리 보기(글작성 왼쪽하단)를 통해서 글발행시 확인되는 버튼을 확인할 수 있습니다.

미리보기/글발행 전 버튼 모습

미리보기/글발행 후 버튼 모습

 

티스토리 HTML 버튼 만들기 장점

1. 이미지 사용 안 함

구글 노출을 위해서는 이미지 사용을 최소한으로 해야 합니다. 구글에서 글을 확인 시 빠르게 페이지가 확인되어야 해서 HTML로 버튼을 만들면 이미지 사용을 줄일 수 있습니다.

 

2. 글쓰기 시간 절약

매번 버튼 이미지를 만드는 시간을 줄일 수 있습니다. 이미지를 만들고 다시 삽입하는 시간까지 줄일 수 있기 때문에 HTML 복사/붙여 넣기가 글 쓰는 시간을 조금이라도 더 확보해 줍니다.

 

3. 가독성을 방해하지 않는 버튼

가독성을 방해하지 않는 버튼입니다. 이미지 버튼을 많이 삽입하게 되면 가독성을 방해하고 어렵게 쓴 포스팅의 가치를 낮출 수 있습니다. 글내용과 부합하는 이미지 버튼이라면 효과는 좋습니다.