티스토리 CSS 링크버튼 생성 가장 간단한 방법

티스토리 글쓰기 작성 시 유용한 링크 버튼 만들기 만드는 방법을 가장 쉬운 방법으로 알아보겠습니다. 링크 주소를 그대로 남겨둬도 무방하지만 티스토리 블로그의 가독성을 높이고 클릭률을 유도하는 한 가지 수단으로 유용한 링크 버튼은 생성 방법이 어렵지 않으니  원하는 디자인대로 만들어서 적용해 보시기 바랍니다.

 

1.CSS 링크버튼 생성
2.CSS 코드 적용
3. 링크 버튼 서식으로 만들기
4. 티스토리 CSS링크 버튼 글쓰기에 적용하기

 

1.티스토리 CSS 링크 버튼 생성하기(Button Generator)

 

버튼 생성시 가장 많이 쓰이는 프로그램은  Button Generator입니다. 가장 빠르고 쉽게 링크 버튼을 생성할 수 있습니다.

Button Generator사이트에서 원하는 디자인과 색,글씨체와 사이즈 등을 원하는 대로 수정한 뒤 코드를 가져온 뒤 버튼 생성기 중간에 Get code를 클릭해서 코드를 확인합니다.

 

링크버튼생성 바로가기

 

생성된 코드를 보면 빨간 박스와 같은 HTML 코드 초록 박스와 같은 CSS 코드 두 가지로 나눠집니다.

CSS 코드와 HTML 코드는 복사해서 각각 다른곳에 붙여 넣어야 합니다.

Button Generetor

 

2.CSS코드 붙여 넣기

 

CSS 코드(초록 박스)는 블로그 관리→ 스킨 편집→html 편집→CSS에서 맨 마지막에 Button Generator에서  생성된 코드를 붙여 넣기 해준후 적용을 눌러줍니다.

CSS코드 삽입

 

3. 링크 버튼 서식으로 만들기

 

생성된 html 코드(빨간 박스)는 블로그 관리→ 서식관리→서식 쓰기 → 제목→html선택→생성된 html 코드 붙여 넣기→기본 모드→ 완료 순서대로 적용해주세요.

 

 

 

 

서식에 html삽입

완료로 했을 경우 링크 버튼은 바로 보이지 않으니 미리보기로 맞게 적용되었는지 확인하시면 됩니다.

링크버튼 미리보기

 

4. 글쓰기에 링크 버튼 적용하기

 

CSS코드 HTML 코드가 적용되었다면 글쓰기에서 어떤식으로 적용이 되는지 그 방법을 알아보겠습니다.

글쓰기→링크 버튼 넣고자 하는 위치에서 서식 불러오기

서식→ 링크 버튼 불러오기→html모드로 변경→ 링크 주소와 문구를 아래와 같이 넣어주기→ 기본 모드 저장

     # → 링크 주소 넣기(ex.https://www.bestcssbuttongenerator.com)

     grey → 노출하고자 하는 문구 넣기(ex. 버튼박스만들기)

▼아래 그림을 참고해주세요 

링크버튼 서식만들기

버튼박스만들기

 

CSS링크 버튼 만들기를 한 후 서식에 저장해서 필요할 때마다 불러와서 사용하시면 됩니다. CSS링크 버튼은 글을 쓰는 과정에서는 원래 이미지대로 보이나 블로그 글을 발행하게 되면 링크 박스가 제대로 보이게 됩니다. 미리보기로 확인하셔도 됩니다.블로그 글쓰기에 조금이나마 도움이 되셨으면 좋겠습니다.

 

감사합니다.

 

▶블로그,카페 동영상 프로그램 설치없이 쉽게 저장하는 방법(크롬 브라우저)

블로그,카페 동영상 프로그램 설치없이 쉽게 저장하는 방법(크롬 브라우저)