[티스토리] 버튼 만들기, 클릭 링크 버튼 만드는 방법

---

 

다른 티스토리 블로그를 가보면 화려한 링크버튼들이 많은 걸 보곤 하는데요.

저도 이번에 처음으로 링크버튼을 만들어 보았습니다.

티스토리에 애드센스를 달게 되면 클릭 시 전면광고가 뜨기 때문에

많은 분들이 이렇게 링크버튼을 만드는 것 같습니다.

 

그럼 버튼 만드는 방법을 자세하게 알려드리도록 하겠습니다.

 

 

---

목차

1. 👉🏻 버튼 만드는 방법 (버튼 만드는 사이트)
2. 👉🏻 내 스킨에 적용하기
3. 👉🏻 서식으로 활용하여 간편하게 사용하기
4. 👉🏻 글 작성시 링크버튼 불러오기

---

👉🏻 버튼 만드는 방법 (버튼 만드는 사이트)

 

1.먼저 버튼 만드는 사이트에 접속해줍니다.

cssbuttongenerator 라고 하는 사이트입니다.

 

버튼 디자인 하러가기

 

2. 좌측에서 맘에 드는 모양의 버튼을 선택해줍니다.

해당 사이트를 번역해서 보시면 만들기가 더욱 쉽습니다.

 

 

3. 버튼을 내 맘대로 커스텀합니다.

(그대로가 맘에 드시는 분들은 그대로 하셔도 무방합니다)

중앙박스에서는 배경색 미리보기 컬러를 설정할 수 있으며,

그라데이션 상·하단 컬러, 글자컬러, 상자테두리컬러, 상자그림자 컬러, 글자 그림자컬러를 변경할 수 있으며,

투명한 버튼을 만들수도 있고, 글자에 기울기를 줄 수도 있습니다.

 

 

우측 설정창에서는 폰트의 크기, 두께, 이탤릭체를 설정할 수 있으며

상자의 높이와 테두리의 라운딩 정보, 테두리 두께

상자의 그림자와 글자의 그림자를 세밀하게 디자인할 수 있습니다.

 

 

4. 코드를 가져옵니다.

[코드 가져오기] (Get code) 버튼을 클릭하여 코드를 확인합니다.

 

코드는 css코드와 html코드가 있습니다.

우측에서 확인하실 수 있습니다.

 

 

상단의 1번 코드는 html 코드이며, 하단의 2번 코드는 css코드입니다.

 

 

 

 

 

👉🏻 내 스킨에 적용하기

 

이제 본격적으로 링크버튼을 만들기 위해 준비를 해봅니다.

1. 티스토리 관리 페이지에서 [꾸미기▶스킨 편집 ▶ html편집]을 클릭합니다.

 

 

 

2. css를 클릭 한 후 가장 아래에 2번 코드를 붙여넣어줍니다.

💡 코드를 붙여넣은 후의 수정사항

▶ color부분에서 #로 시작하는 색상코드와 ;사이에 #important를 넣어줍니다.

 

넣어주는 이유는 링크할 글자의 색상을 고정해주기 위함입니다.

그리고 적용 버튼을 클릭하여 내 스킨에 적용해줍니다.

 

 

 

 

 

 

👉🏻 서식으로 활용하여 간편하게 사용하기

 

버튼을 그때 그때 편하게 사용하기 위해서 링크버튼을 서식으로 만들어줍니다.

1. 블로그 관리페이지에서 [콘텐츠▶서식관리 ▶ 서식쓰기🖊] 를 클릭합니다.

 

2. 기본모드에서 HTML모드로 변경합니다.

 

 

2. html코드를 복사하여 붙여넣기합니다.

 

 

 

 

 

👉🏻 글 작성시 링크버튼 불러오기

 

 

버튼만들기 완료!

글을 쓸때 서식에서 만든 버튼을 불러와 손쉽게 적용할 수 있습니다.

이동할 링크는 href="#"의 #부분에 링크를 붙여넣으시면 됩니다.

 

기존 ✅ <p data-ke-size="size16"><a class="myButton" href="#">green</a></p>

수정 ✅ <p data-ke-size="size16"><a class="myButton" href="https://angtto.com/">버튼만들기 완료!</a></p>

 

저도 오늘 배운 내용인데 포스팅 하면서 복습이 되니 좋은 것 같습니다.

폰트를 변경하고 싶으시다면 아래 포스팅을 참고해보세요!

 

[티스토리] 링크버튼 폰트 변경하는 방법 폰트 바꾸기

[티스토리] 링크버튼 폰트 변경하는 방법 폰트 바꾸기