본문 바로가기
카테고리 없음

티스토리 링크버튼 만드는 법 / HTML 링크버튼 코드 만들기

by yacha718 2023. 7. 2.
728x90
반응형
SMALL

 

 

 

티스토리 링크버튼 코드 받기

 

STEP1. 코드받기

위의 링크를 타고 들어가서 코드를 받아주세요.

1.원하는 디자인의 버튼을 왼쪽에서 선택하고

2.가운데 GET CODE 버튼을 눌러주세요

3.우측에 코드가 생성됩니다

 

 

 


 

 

STEP2. HTML 편집하기

1.티스토리 블로그 설정에 들어가줍니다

2.스킨편집 > HTML편집 > CSS창으로가서 제일 아래로 내려줍니다.

 

 

 


 

STEP3. 코드 붙여넣기

1.CSS의 제일 아래부분에 아까 생성한 코드를 붙여넣기 해줍니다

2.단 여기서 전체부분이 아닌 빨간색 네모친 "myButton 부분만 붙여줍니다"

 

이부분만 복사해주세요!

 


 

STEP4. 서식등록하기

1.다시 티스토리 블로그 설정에서 "서식관리"에 들어가 줍니다.

2."서식 쓰기" 버튼을 눌러줍니다.

3.서식 글 제목은 아무거나 원하는 것을 해줍니다.

4.우측에서 기본모드를 HTML 모드로 바꿔줍니다.

5.글 내용에 아까 코드의 윗부분을 붙여넣기 해준 후 저장해줍니다.

 

 

이제 완료 되었습니다. 이제 글을 쓰 때 서식 기능을 사용하여 원하는 곳에 해당 디자인의 버튼을 만들 수 있어요.

 

 

서식에서 아까 만든 서식을 선택해준 후, 기본모드에서 HTML 모드로 들어가줍니다.

여기서 #부분에 원하는 페이지의 링크를 복사해주고

버튼의 이름은 "graphicriver"라고 되어있는 부분에 작성해줍니다.

예를들어 이름을 "여기를 누르면 네이버로 가지롱" 그리고 링크는 네이버로 하려면 위처럼 하면 됩니다.

 

이후 글 작성을 완료하고 공개발행 후 보면

 

이렇게 버튼이 잘 뜨는 것을 볼 수 있어요

버튼을 누르면 당연히 네이버로 이동 한답니다.

728x90
반응형
LIST