티스토리 링크 버튼 가장 쉽고 빠르게 만들기

 

티스토리 블로그를 하신다면 예쁘게 만들어진 링크 버튼에 대해서 궁금하실 겁니다. 링크 버튼 디자인부터 코드 넣고 서식으로 간편하게 사용하는 법까지 모두 알아보겠습니다. 활용 예시가 글 끝에 있으니 꼭 참고해주세요.

 

 

링크 버튼 만들기

링크 버튼 디자인

예쁘고 보기 좋은 모양으로 자신만의 링크 버튼을 만들어 보세요. 사이트를 이용하면 클릭만으로도 손쉽게 버튼을 디자인할 수 있습니다.

 

 

사이트 접속 후 좌측화면에서 마음에 드는 디자인을 선택하세요. 버튼 위에 마우스를 가져가면 애니메이션 효과도 확인할 수 있습니다. 디자인의 세부 조정은 화면 우측 슬라이더 버튼을 움직이면서 할 수 있습니다. 가운데 결과 화면을 보면서 조정해 보세요.

 

 

링크 버튼의 배경 색상은 가운데 결과 화면 하단의 색상 박스를 선택하면 됩니다.

 

 

링크 버튼 코드 생성

디자인이 완성되면 가운데 결과 화면 우측 아래 'Get Code' 버튼을 눌러 코드를 확인할 수 있습니다. 코드를 드래그해서 복사해 두세요. 코드의 맨 윗줄은 서식에 적용해서 쓰고 나머지 코드는 CSS에 추가할 것입니다. 참고로 생성된 코드는 디자인 내용에 따라 각기 결과가 다를 수 있습니다.

 

 

세부 디자인 화면으로 돌아오려면 'Get Code' 버튼을 다시 한번 눌러주세요.

 

티스토리에 코드 적용

CSS에 코드 적용

이제 티스토리 블로그에 코드를 적용시켜야 하는데요, 우선 CSS에 적용할 코드를 한 줄 수정하겠습니다. 아래 코드는 버튼 제네레이터에서 얻은 코드 중 맨 첫 줄을 제외한 나머지 부분입니다.

 

코드 가운데쯤에 붉은색 밑줄 친 부분을 참고하세요. !important를 추가합니다. 이렇게 하지 않으면 버튼의 텍스트 색상이 내가 디자인한 것과 다르게 나올 수 있습니다. 링크가 걸린 텍스트를 다른 색으로 표시해 주는 원래 기능을 제한하는 방법입니다.

 

 

수정한 코드는 CSS에 추가합니다. 

• 티스토리 설정 > 꾸미기 > 스킨 편집 > html 편집 > CSS 선택

가장 아래에 코드를 붙여 넣고 적용 버튼을 눌러 저장합니다.

 

서식에 등록

링크 버튼을 사용하고 싶을 때마다 html 코드를 이용한다면 불편할 것입니다. 서식에 html 코드를 등록해 두고 필요할 때마다 불러쓰시면 쉽고 간편하게 사용할 수 있습니다.

• 티스토리 설정 > 콘텐츠 > 서식 관리 > 서식 쓰기

제목에 링크 버튼이라고 쓰신 후 HTML 모드로 변경합니다. 서식 제목은 원하는 대로 쓰시면 됩니다. 

<a href="#" class="myButton">버튼텍스트</a>

위와 같이 한줄 코드를 붙여주고 저장합니다.

 

링크 버튼 활용

서식 활용

이제 모든 준비는 끝났습니다. 글쓰기에 활용할 차례입니다. 글쓰기 화면에서 링크 버튼을 넣고 싶은 곳에 서식을 불러옵니다. 링크 버튼이라고 저장해 둔 서식을 선택합니다. '버튼텍스트' 부분에 넣고 싶은 내용으로 편집해 주시고, URL 주소를 설정해 주시면 됩니다. 이미지나 텍스트에 링크 넣듯이 동일한 방법으로 하시면 됩니다.

 

활용 예시

내 블로그 방문자에게 도움 될 만한 각종 정보에 대한 링크를 자유롭고 편리하게 표현해서 버튼을 만들어보세요. 

 

가성비 절대만족 대한민국 최고 핫플 모음

 

무료인데 안간다고? 이기회에 문화생활 좀 해봅시다!

 

오늘은 뭐보지? 영화 드라마 한방에 추천 받기

 

처음엔 다소 과정이 번거로워 보이지만 한번 해두면 그만큼 편리하게 사용하실 수 있습니다. 

 

 

[함께 읽으면 좋은 글]

티스토리 애드센스 수동 광고 시 오류 해결 방법

티스토리 애드센스 수동 광고 시 오류 해결 방법

 

ChatGPT를 이용한 티스토리 애드센스 승인 후기

ChatGPT를 이용한 티스토리 애드센스 승인 후기

 

유튜브 쇼츠 썸네일 선택 변경하기

유튜브 쇼츠 썸네일 선택 변경하기