이 글에서는 티스토리 블로그에서 다운로드 링크 혹은, 클릭 링크를 만드는 방법에 대해서 알아보겠습니다. 한번 설정하고 나면 조금만 수정해서 편하게 사용할 수 있습니다. 또한 티스토리 외에 다른 블로그에서도 적용할 수 있으니 참고해 주세요.
링크 다운로드 버튼 만들기
다운로드 링크 버튼을 만드는 방법은 다음과 같습니다.
- 티스토리 접속 후 [콘텐츠 > 서식 관리 > 서식쓰기 > HTML 모드 > 아래 링크 붙여넣기 > 완료]
<p style="text-align: center;" data-ke-size="size16"><a style="background-color: #dc143c; color: #ffffff; border-radius: 10px; padding: 16px 32px; font-size: 30px; font-weight: bold; text-decoration: none;" href="https://naver.com">상품 구매 링크 바로가기</a></p>
HTML 모드는 오른쪽 상단에 위치해 있습니다. 보통 글을 쓰는 모드가 “기본모드”이고 위 코드를 입력하는 칸이 HTML 모드입니다. 이렇게 코드를 입력하고 나서 다시 기본모드로 돌아오면 버튼이 생성되어 있는 것을 확인할 수 있습니다.
다시 기본모드로 돌아가면 아래와 같은 버튼이 만들어져 있습니다. 아래 버튼은 임의로 “상품 구매 링크 바로가기”라는 글자를 적었고 클릭하면 네이버로 연결되게 설정했습니다. 자신이 원하는 링크와 버튼 명을 적으면 쉽게 수정할 수 있습니다. 버튼의 색상이나 글자 크기를 바꾸고 싶으면 다음과 같이 설정하면 됩니다.
- “background-color: #dc143c; color: #ffffff
위 #dc143c 부분을 수정하면 버튼의 배경 색상을 바꿀 수 있습니다. #ffffff 부분을 수정하면 글자 색상을 바꿀 수 있습니다. 색상 코드는 “HTML 코드표”로 검색하면 자료가 나옵니다.
- border-radius: 10px; padding: 16px 32px
위 숫자들을 조정하면 버튼 모서리의 곡률과 전체적인 크기를 조정할 수 있습니다.
- font-size: 30px
글자 크기를 조정할 수 있습니다. 글자 크기에 따라 버튼 박스의 크기도 변경됩니다.
이렇게 서식을 저장한 후에 글을 쓸 때 [더보기 > 서식 > 선택]으로 한 번에 다운로드 링크를 불러 올 수 있습니다. 링크 수정은 서식을 입력했던 것처럼 HTML 모드로 들어가서 수정해 주어야 합니다.
