[8] 티스토리 링크버튼 만들기

티스토리는 다양한 코드 편집을 통해 블로그 꾸미기의 자유도가 높다는 것이 장점입니다. 저만 해도 코딩 관련으로는 까막눈이지만 많은 능력자분들이 계셔서 도움을 받아가며 조금씩 블로그를 커스텀하고 있습니다.

오늘 알려드릴 내용은 티스토리에서 링크버튼을 만드는 방법입니다. 저도 처음에는 링크를 안내하고 싶을 때 [여기]를 클릭하라거나 이미지 배너를 만들어 안내하고는 했습니다. 하지만 [여기]를 클릭하여 유도하는 방법은 글의 전문성이 없어 보였고, 이미지 배너를 만드는 것은 매 번 배너를 만드는 것이 번거로웠습니다. 이럴 때 사용하면 좋은 것이 바로 링크버튼입니다.

---

티스토리 링크버튼 만들기

1) 링크버튼이란

링크버튼 예시 1

링크버튼 예시 2

티스토리 블로그를 운영하다 보면 방문자에게 더 많은 정보를 주기 위해서 링크를 연결하는 경우가 참 많습니다. 링크 연결 시 가장 깔끔한 방법이 바로 링크버튼이 아닐까 싶습니다.

위의 이미지는 제가 쓴 글에서 캡쳐해 온 링크버튼입니다. 버튼을 누르면 해당 사이트로 자동으로 이동하게 되어 방문자에게도 매우 편리한 기능입니다.

2) 링크버튼 만들기

Button Generator에서 버튼 만들기

버튼 생성 시 가장 많이 사용하는 사이트는 Button Generator입니다. 버튼을 원하는 대로 커스텀할 수 있습니다.

Button Generator 이동하기

버튼 코드 가져오기

버튼 만들기가 완료되었으면 Get Code를 눌러 코드를 복사합니다.

생성된 코드입니다. 코드는 초록색(html)과 보라색(css 코드)으로 나누어집니다. 초록색과 보라색은 각각 다른 곳에 붙여넣기 해야 합니다.

CSS 코드 붙여넣기

보라색 부분(CSS 코드)을 스킨 편집> html 편집> CSS의 가장 끝에 붙여넣기 합니다.

링크버튼 서식 만들기

여기까지 했다면 이제 링크버튼 서식을 만들어야 합니다. 글을 쓸 때마다 html을 붙여넣기 하려면 매우 번거롭기 때문에, 글쓰기 과정을 간소화하기 위해 서식으로 만들어 주겠습니다.

블로그 편집> 서식 관리에서 서식쓰기를 누른 후 html 모드로 변경하여 초록색 부분(html 코드)을 붙여넣기 합니다. ...href="#">뒷 부분을 버튼 제목으로 수정합니다.

글에 적용하기

글을 작성하면서 링크버튼을 적용하는 방법을 알아보겠습니다. 링크 버튼이 들어갈 곳에 커서를 두고 서식을 선택합니다.

아래와 같이 링크 버튼 대신 파란 글씨가 나타납니다. 링크 버튼은 글 작성시에는 나타나지 않으며, 게시글 발행 후 확인할 수 있습니다.

html 모드로 변경하여 링크 버튼이 들어간 곳을 살펴보면 다음과 같은 코드가 생겼습니다.

<p date-ke-size="size16><a class="myButton" href="#">버튼 제목</a></p>에서 #을 지운 뒤 링크 주소를, 버튼 제목을 지운 뒤 링크 버튼에 노출하고자 하는 문구로 수정하면 됩니다.

예시)
<p date-ke-size="size16><a class="myButton" href="www.naver.com"네이버 바로가기</a></p>