티스토리 링크 버튼 만드는 사이트 추천

티스토리나 워드프레스, 구글 블로그 스팟을 운영하면서 링크 버튼을 이용할텐데요, html과 css를 잘 모르시는 사람은은 다른 사람의 버튼 링크 css 소스를 붙여넣어 이용하게 됩니다. 그러나 이 버튼 만드는 사이트로 한번에 쉽게 해결할 수 있습니다.

링크 버튼 생성 사이트

링크 버튼을 생성해주는 사이트입니다. 정확하게는 링크 버튼 css를 생성해주는 사이트입니다. 사이트에서 버튼의 모양을 쉽게 조절한 후 완성된 버튼 css를 얻고 그것을 티스토리에 입력하여 이용하면 됩니다.

 

티스토리에서 링크 버튼을 만들때 유용하게 이용할 수 있어요. html과 css를 몰라도 따라할 수 있습니다.

Button Generator 링크 버튼 사이트

링크버튼 css를 쉽게 만들 수 있는 사이트입니다.

 

A useful tool for designing css buttons

 

 

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

 

1) Button Generator 사이트에 접속합니다. 왼쪽에 패널에서 마음에 드는 버튼을 선택하면 중앙에 선택한 버튼이 보입니다.

 

 

2) 오른쪽 패널에서 버튼 안의 글자크기, 버튼의 높이와 너비, 버튼 테두리 굵기와 둥근 정도, 글자 그림자 등을 원하는 데로 설정하세요.

 

 

3) 중앙에 있는 "Get Code"를 누르면 오른쪽 패널에 html 코드와 css 코드가 보입니다.

 

 

4) 빨강색 박스가 html이고 녹색 박스가 css 입니다. 이것을 각각 티스토리에 넣어주면 됩니다.

 

 

5) 티스토리 본문에 만든 버튼을 적용합니다. 티스토리 글에서 html 모드로 들어갑니다.

 

 

6) 티스토리 관리화면에서 '스킨 편집'으로 들어갑니다.

 

7) html 편집으로 들어갑니다.

 

 

8) css로 들어갑니다.

 

 

9) 상단의 적당한 위치에 녹색 상자의 css 소스를 추가합니다.

.myButton {
background-color:#44c767;
border-radius:41px;
border:5px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:24px;
padding:19px 62px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}

.myButton:hover {
background-color:#5cbf2a;
}

.myButton:active {
position:relative; top:1px;
}

 

css를 처음 보시는 분들은 어디에 추가해야할지 모르시는 분들이 많으실 텐데요, 아래 이미지에서 보면 노랑색 상자처럼 ' } '로 끝나는 다음 지점에 추가한 후 적용을 누르면 됩니다.

 

 

10) 티스토리 본문에서 링크 버튼을 넣을 위치에 빨강색 상자의 html 소스를 넣고 저장합니다.

<a href="#" class="myButton">green</a>

 

아래 green이라는 글자는 원하는 글자로 지금 수정하거나 나중에 글자를 수정할 수도 있습니다.

 

 

11) html 모드에서 기본모드로 다시 들어갑니다.

 

 

12) green이라는 글자위에 커서로 선택한 후 상단에 있는 링크 아이콘으로 들어가서 원하는 웹주소를 넣고 "확인"을 누르면 완성됩니다.

 

12) 이렇게 아래와 같이 티스토리에 링크버튼이 생성되었습니다.

 

 

🚩 버튼 HTML은 자주 사용하므로 티스토리 관리화면에서 서식으로 저장하면 편리합니다.

티스토리 서식 이용 방법

 

CSS Button Generator 버튼 링크 사이트

CSS Button Generator 사이트도 위의 사이트와 마찬가지로 같은 인터페이스를 가지고 있습니다. 링크 버튼 만드는 방법은 위와 같습니다.

 

이 사이트는 STEP1과 STEP2로 나뉘어 있어서 초보자들도 HTML과 CSS를 쉽게 구분해서 이용할 수 있습니다.

 

CSS Button Generator | create CSS buttons without code

 

✅ 티스토리 링크버튼 만들기

아래 순서대로 따라해 보세요.

 

1) 왼쪽 패널에서 원하는 버튼을 선택합니다. (빨강색 상자)

2) 오른쪽 패널에서 버튼 사이즈, 글자크기 등을 조절합니다. (파란색 상자)

3) 만들어진 HTML을 티스토리 본문에 추가합니다. (노란색 상자)

4) 만들어진 CSS를 티스토리 관리화면의 CSS에 추가합니다.(녹색 상자)

 

먼저 위에서 티스토리 버튼 만드는 방법과 똑 같습니다. 아무거나 이용해보세요.

 

 

티스토리 버튼은 방문자가 원하는 바를 쉽게 보이게 적절한 위치에 놓으면 빠르게 웹페이지로 이동할 수 있는 장점이 있습니다. 버튼의 색깔과 모양 등 디자인도 영향을 끼칩니다. 여러가지고 실험해보면서 나의 의도와 맞는 버튼을 생성해 이용해보세요.