티스토리 블로그 강조 되는 링크 버튼 만들기

안녕하세요 

오늘은 티스토리나 블로그에서 사용하는 버튼 만드는 법을 알려드리려고 합니다. 

다른 자료로 링크 이동을 걸려고 하면 눈에 띄는 게 좋습니다. 그래서 눈에 띄는 버튼을 만드는 방법을 알려드리겠습니다. 

 

# 티스토리 블로그 강조 되는 링크 버튼 만들기

목차

1. 버튼 만드는 사이트 (버튼디자인 만들기)

2. 티스토리  css 적용하기

3. 글쓰기(html 코드작성)

4. 서식으로 만들기

 

 

1. 버튼 만드는 사이트(버튼디자인 만들기)

1) 우선 버튼 디자인을 만드는 사이트로 들어갑니다. 

원하는 형태로 버튼을 만들고 나면 html  코드랑  css를 바로 확인할 수 있습니다. 

https://www.bestcssbuttongenerator.com/#/30

A useful tool for designing css buttons

 

버튼 디자인 제작 사이트에 접속 후 아래 사진처럼 좌측에서 원하는 이미지를 선택합니다. 

그리고 우측에 있는 메뉴들을 조절해서 원하는 디자인을 정밀하게 수정합니다. 

버튼제작사이트

2) 디자인을 정하면  Get Code를 눌러서  html코드랑  css를 확인합니다. 

버튼제작사이트

 

2. 티스토리  css 적용하기

1) css코드를 복사해서 티스토리 스킨에 적용해 줍니다. 

아래 사진에 표시한 부분이 css 코드입니다. 

버튼제작사이트

이코드를 복사한 후 티스토리 블로그의 스킨편집으로 들어갑니다. 그리고 html편집을 누릅니다.

티스토리스킨편집

 

css에 들어가서 맨 아래쪽에 좀 전에 버튼사이트에서 복사한 css 코드를 붙여 넣습니다. 

그리고 중간에 font-family: Arial을 삭제합니다. 

티스토리에 있는 폰트를 사용할 거 기 때문에 필요가 없습니다. 

그러고 나서 적용을 해줍니다.

티스토리스킨편집

 

 

 

3. 글쓰기(html코드작성)

티스토리에서 글쓰기로 들어가서  버튼 제작사이트에서 복사한 html 코드를 적용시킵니다. 

1) 버튼사이트에서 html 코드 복사

버튼제작사이트

2) 티스토리 글쓰기에서 html 모드로 들어가서 붙여 넣기

티스토리버튼

아래 미리 보기를 누르면 버튼이 이렇게 나오는 걸 볼 수 있습니다. 

티스토리버튼

버튼 위치와 색상은 html 코드를 직접 수정해서 적용시켜줘야 합니다. 

style ="color : #FFFFFF"를 코드에 입력합니다.   

html에서 하얀색이  #FFFFFF입니다. 

그리고 미리 보기를 누르면 아래처럼 글자 색이 흰색으로 바뀝니다.

티스토리버튼

가운데 정렬을 하려면  html에 들어가서 아래 코드를 입력해 줍니다.

<div style ="text-align: center">

</div>

티스토리버튼

이렇게 하면 버튼이 생성됩니다. 

계속 작성해서 쓰기 어렵기 때문에 이걸 서식으로 등록해서 쓰면 편합니다.

 

4. 서식으로 만들기

1) 3에서 작성한 코드를 복사합니다. 

그리고 티스토리 홈에서 서식관리로 들어갑니다. 

서식 쓰기로 새로운 서식을 만듭니다. 

티스토리서식

2) 제목을 정해주고 html모드로 들어가 아까 복사한 html 코드를 붙여 넣어 줍니다 

그리고 완료를 눌러 저장해 주면 됩니다. 

티스토리서식

 

글쓰기에 들어가면 서식에 추가가 되어있습니다. 

티스토리서식

티스토리서식

 

글쓰기에  버튼이라고 적고 서식을 적용하면 좀 전에 작성한 버튼이란 글자만 있고 서식이 적용된 게 보이지 않습니다. 

이때 html로 들어갑니다. 

그러면 서식이 적용된게 보이고 href="#"에서 #을 원하는 url로 변경해서 저장해 주면 됩니다. 

티스토리서식

저장한 후 발행한 글로 들어가면 아래처럼 버튼이 나와있습니다 

버튼을 누르면 url로 연결해 놓은 사이트로 들어가집니다. 

 

이렇게 티스토리에서 강조하는 버튼을 만들어 보았습니다. 

잘적용 해서 사용하시기 바랍니다. 

감사합니다. 

아래 티스토리 목차만들기 링크를 걸어놓았으니 참고해 보시면 좋을 것 같습니다. 

 

티스토리목차만들기