본문 바로가기
The journey to the Rich/잡다한정보

티스토리 버튼링크 초간단하게 만들기 2편 HTML코드 활용

by roadjung 2023. 7. 23.

 

 

티스토리 CSS버튼링크 만들기 1편에 이어서, HTML 코드를 활용한 티스토리 버튼링크 초간단하게 만들기 2편입니다.

티스토리 블로그HTML 코드활용 버튼링크 만들기
티스토리블로그 HTML 코드활용 버튼링크 만들기 2편

 

티스토리 블로그 HTML 코드활용 버튼링크 만들기

버튼링크 만들기 1편에서는 CSS코드를 넣고, 글쓰기에서 거기에 맞는 HTML 코드를 붙여 넣어서 만들어봤습니다. 처음 접하는 분들은 조금 복잡할 수 있는 방법이기도 합니다. 그래서 정말 간편하고 쉬운 방법 HTML 코드에 바로 붙여 넣어서 적용할 수 있는 방법입니다. 

HTML 파일다운로드

링크버튼 코드 (1).txt
0.00MB

위에 HTML 파일을 PC에 다운로드하고 전체 코드를 글쓰기에서 HTML 모드에서 붙여 넣기 하면 아래와 같은 버튼링크가 만들어집니다.  

 

 

HTML 모드에 코드 붙여 넣기와 서식 만들기는 버튼링크 만들기 1편을 참고해 주시면 감사하겠습니다.

▶티스토리 css 버튼링크 만들기 1편 버튼제너레이터

버튼링크 만들기 편 바로보기
버튼링크만들기 1편바로보기

 

HTML 버튼링크 꾸미기

위에서 HTML 파일을 활용한 버튼링크를 손쉽게 만들었다면, 다음은 버튼링크를 원하는 색상으로 변경하는 방법입니다.

HTML 버튼링크 꾸미기
HTML 버튼링크 꾸미기

글쓰기에서 HTML 들어오면 위 사진과 같은 모습이 나옵니다.

버튼링크 꾸미기

  • 배경색상 변경은 : background-color #003f74 < 이 부분을 바꿔주시면 됩니다.
  • 글자크기는  font-size 부분의 숫자를 수정해 주면 됩니다.

최종적으로 완성된 버튼 링크입니다. 글씨 부분을 눌러서 링크 삽입하셔서 바로가기 이용하시면 됩니다.

 

 

그리드형

댓글