블로그를 운영하시다보면 링크버튼을 활용하실 경우가 많이 있습니다. 링크버튼을 만드는 방법에는 다양한 방법이 있습니다. 오늘은 티스토리 서식을 이용하여 쉽고 간편하고 빠르게 링크버튼을 만드는 방법을 말씀드리겠습니다. 각자 원하는 디자인으로 링크버튼을 만들고 이를 편하게 사용하실 수 있습니다.
링크버튼 만드는 사이트
다양한 디자인의 링크버튼을 만들 수 있는 사이트를 소개해드리겠습니다. 바로 button generator 라는 사이트입니다. 여기에서 내가 원하는 디자인, 글씨체, 모양, 색깔 등을 다양하게 고르실 수가 있습니다.
아래 링크버튼이 제가 처음 만들어본 링크버튼입니다. 아래 링크버튼을 통해 해당 사이트로 이동하실 수 있습니다.
1. 원하는 디자인과 모양을 선택하기
해당 사이트에 이동하시면 아래와 같은 화면을 보실 수가 있습니다. 빨간색 박스로 표시된 부분을 보시면 사이트에서 기본적으로 제공하는 버튼 디자인이 있습니다. 여기서 원하는 디자인을 선택합니다.
원하는 디자인에서 보다 디테일하게 원하는 디자인으로 바꾸실 수도 있습니다. 화면 우측에서 가로/세로 사이즈나 글자 크기, 글자체 등을 바꾸면서 내가 원하는 디자인으로 최적화하시면 됩니다.
내가 원하는 디자인의 링크버튼을 만들었다면 해당 링크버튼의 코드를 복사해서 나의 티스토리에 붙여넣기를 해야합니다. 아래의 Get code를 클릭해서 해당 코드를 확인할 수 있습니다.
2. 링크버튼 코드를 티스토리에 붙여넣기
위의 Get code를 누르시면 아래와 같이 코드를 확인할 수 있으며, 여기서 코드를 2개 부분으로 구분을 해야합니다.
먼저 빨간색 부분은 html 코드로 티스토리에서 서식으로 만들 때 사용할 코드이고, 두 번째로 파란색 부분은 CSS코드로 티스토리 스킨편집의 CSS 부분에 붙여 넣을 코드입니다.
1단계: 링크버튼 코드 CSS에 붙여넣기
위에서 말씀드린 파란색 코드 부분을 티스토리 CSS 부분에 붙여넣기 하시면 됩니다. 먼저 티스토리 CSS 부분은 티스토리 관리자화면에서 스킨편집 > html편집 > CSS를 클릭해서 들어오실 수 있습니다.
 |
 |
 |
CSS에 들어오셨다면 우측에 있는 스크롤바를 맨 아래로 내린 다음에 파란색 박스 부분을 붙여넣기를 합니다. 특히 여기서 중요한 부분이 color 부분에다가 !important 를 기입해주셔야 합니다.
링크를 걸게되면 텍스트 색깔이 분홍색으로 변하는 걸 보신 적이 있으실거에요. !important 를 기입하지 않게되면 글자색이 자동으로 분홍색으로 변하게 돼서 디자인하신 링크버튼 모양이 변경이 됩니다. 그렇기 때문에 칼라색인 #fffff와 ; 사이에다가 !important 를 꼭 기입하셔야 합니다.
2단계: 서식에 html 코드 붙여넣기
티스토리 관리자 페이지에서 서식관리에 들어가신 후 서식쓰기를 누르면 글쓰기 화면으로 이동하게 됩니다. 여기서 우측상단에서 기본모드를 html 모드로 변경합니다.
 |
 |
 |
여기에서 제목은 알아보기 쉽게 "링크버튼 - 레드"과 같이 적어주시고, 위의 빨간색 박스의 html 코드를 붙여넣기를 합니다. 다시 기본모드로 돌아와서 링크버튼이 가운데에 위치할 수 있도록 가운데 정렬을 한 다음, 아래 미리보기를 눌러보시면 아래와 같이 링크버튼을 확인할 수 있습니다.
 |
 |
 |
3단계: 글쓰기에서 링크버튼 사용하기
글쓰기 창에서 우측상단에 있는 점 3개를 클릭해서 서식을 클릭하면 내가 작성한 서식을 확인할 수 있습니다. 여기에서 내가 만든 링크버튼 서식을 클릭합니다.
 |
 |
그럼 아래와 같이 만들었던 서식이 불러와지고 내가 원하는 글자를 입력하기 위해서는 html에 들어가서 red 대신에 내가 기입하고 싶은 문구를 적어주면 됩니다. 그 후 미리보기를 눌러보시면 아래와 같이 내가 원하는 링크버튼이 생성되는 걸 확인할 수 있습니다.
여기까지 진행하시면 링크버튼 만들기가 모두 완료되었습니다. 다시 글쓰기 모드로 돌아가셔서 해당 문구에 원하는 링크주소를 입력하시면 링크생성이 완료되게 됩니다.
오늘은 티스토리 글을 작성하실 때 편하고 쉽게 링크버튼을 만드는 방법을 말씀드렸습니다. 기존에 ppt나 미리캔버스에서 링크를 만드신 분들은 버튼 제너레이터를 통해 링크를 만들어보시기 바랍니다. 글 작성 효율이 엄청나게 향상되는 걸 경험하실 수 있으실 겁니다.
'생활 정보' 카테고리의 다른 글
| 편의점 택배 수거시간 배송기간 운임 비교 (GS25, CU, 세븐일레븐, 미니스톱, 이마트24) (0) | 2023.09.13 |
|---|---|
| 전세 월세 자가 이사 후 할일 체크리스트 (5가지 필수) (0) | 2023.09.11 |
| 침수차 확인방법 무료 조회 방법, 침수차 구별법 필독! (0) | 2023.09.07 |
| 무료 e북 전자책 도서관 전자도서관 어플 사이트 추천 5 (0) | 2023.09.02 |
| KT 알뜰폰 0원 요금제 및 친구추천선물 15만원 받기, 셀프개통방법 (0) | 2023.08.31 |
댓글