티스토리 링크버튼 만드는 방법

티스토리에서 글을 쓰다가 링크를 넣고 싶을 때가 있을 겁니다. 글 쓸 때 링크를 복붙 해도 되지만 깔끔하게 버튼으로 삽입하고 싶을 때 이 포스팅이 도움이 되시길 바라겠습니다. 링크 버튼은 티스토리에서 제공하지 않는 기능이지만 3분 만에 만들 수 있습니다.

HTML, CSS 서식 만들기

티스토리에 링크버튼을 삽입하기 위해서는 HTML과 CSS에 넣을 코드를 먼저 만들어야 합니다. HTML과 CSS는 말만 들어도 어렵다고 생각하실 텐데 전혀 그렇지 않습니다. 하기 버튼을 눌러주세요

링크 버튼 만들기

홈페이지 왼쪽에서 사용하고 싶은 링크 이미지를 고르면 중간에 버튼이 보이고, 오른쪽에는 버튼 설정 화면이 나옵니다. 버튼 설정에서는 버튼의 크기 및 글꼴 크기 등 원하는 대로 값을 조정할 수 있습니다. 그리고 'get code'를 누르면, 오른쪽에 있던 버튼 설정 화면이 코드 화면으로 변경됩니다. 생성된 코드에서 첫 번째 줄 코드를 HTML에 사용하고, 나머지 코드를 CSS에 사용합니다. 

버튼 선택, 설정 및 코드

티스토리 설정> 꾸미기> 스킨 편집에 들어간 후 CSS를 선택해 나머지 코드를 복사 및 붙여 넣기 후 저장합니다.

티스토리 설정> 콘텐츠-서식관리> 서식 쓰기로 들어간 후 제목은 알아보기 쉽게 작성하고 글 형식을 기본모드에서 HTML로 변경한 다음 첫 번째 줄 코드를 복사해 글 쓰는 곳에 붙여 넣기 하신 후 저장하면 됩니다.

CSS 삽입

적용하기

링크 버튼이 삽입될 곳에 커서를 두고 티스토리 글쓰기 창 상단에서 점세개(ㆍㆍㆍ) 더 보기 버튼을 누르고 링크버튼 서식을 불러옵니다. 기본모드에서 HTML 모드로 변경하면 서식코드를 확인할 수 있습니다. 코드 내  #를 지우고 링크 주소를 넣어줍니다. CSS 글자를 지우고 버튼에 들어갈 문구를 작성합니다. 기본모드로 돌아온 후 글을 쓰고 포스팅을 발행하면 링크버튼이 생성된 것을 확인할 수 있습니다. 포스팅 발행 전까지는 밑줄 친 파란 글씨로 보이니 이 점 참고하세요.