티스토리 버튼 넣기

티스토리 블로그 글에서 아래와 같이 버튼을 넣고 싶다면 서식을 활용하여 미리 저장해놓고 필요할 때 꺼내 쓰는 방법에 대해 알아보겠습니다. 

 

코드

<center>    <div><a href="#"><button style="background-color: #00d7ff; border-radius: 50px; display: inline-block; cursor: pointer; color: #333; font-family: 'HSSanTokki20-Regular'; font-size: 22px; padding: 16px 30px; text-decoration: none; align: center; border: 0;"> 공모전 자세히 알아보기</button></a></div></center>

 

버튼 형식이므로 #은 링크 경로를 넣으면 됩니다. 

 

▶ 배경색 설정

background-color: #00d7ff

 

▶ 양쪽 동그랗게 

border-radius: 50px

 

▶ 글자색 

color: #333

 

▶ 폰트(글꼴)

font-family: 'HSSanTokki20-Regular'

 

▶ 폰트 크기 

font-size: 22px

 

▶ 배경 박스 두깨

border: 0

1, 2, 3, 4,... 등 두깨설정 가능

 

원하는 디자인으로 세팅해보시기 바랍니다. 

 

서식등록

버튼 디자인을 완성했다면 서식에 등록합니다.

 

서식관리에 들어가서 글쓰기 페이지에 들어가서 기본모드 말고 html모드로 들어갑니다. 

 

html모드에서 상단에 코드를 넣고 저장합니다. 

 

서식 적용하기 

글쓰기에 들어가서 버튼이 들어갈 부분에 커서를 두고

 

상단 ... 을 눌러보면 아래와 같은 메뉴가 나옵니다. 

 

거기서 서식을 선택하고 저장해놓은 버튼을 선택합니다. 

버튼 안에 글자와 링크를 수정하고 마무리 합니다.