티스토리 링크버튼 HTML 서식 만드는 방법

티스토리 블로그를 통해 정보를 찾아다니다 보면 깔끔하게 만들어놓은 링크버튼을 볼 때가 있어요. 이는 티스토리에서 제공하지 않는 기능으로 필자 또한 내내 만드는 방법이 궁금하기도 했었는데요~ 오늘은 한 번만 따라 해 보면 누구나 쉽게 할 수 있는 티스토리 HTML 링크 버튼 서식 만드는 방법에 대해 알려드릴게요.

 

 

HTML과 CSS 서식 만들기

먼저 티스토리에서 사용할 링크버튼을 만들기 위해서는 HTML과 CSS에 심어 넣을 코드를 만들어줘야 하는데요~ HTML과 CSS라고 해서 어렵게 느껴지지만 그저 생성된 코드를 붙여 넣기만 해 주면 되는 아주 간단한 작업이기 때문에 순서대로 따라오면 쉽게 만들 수 있습니다. 그럼 먼저 서식 코드를 만들기 위해서 아래 링크버튼 코드 만들기를 누르고 해당 사이트로 들어가 주세요.

 

링크버튼 코드 만들기

 

 

 

 

해당 사이트로 들어갔다면 위와 같은 화면이 뜰 거예요. 그럼 왼쪽에서 내가 사용할 링크 이미지를 먼저 고른 뒤 2번이라고 표시해놓은 Get Code를 눌러줍니다. 그럼 오른쪽에 알 수 없는 영어가 막 쓰여있는 코드가 생성될 거예요. 저는 올리브 색상을 선택했고 체크박스는 선택사항이니까 취향껏 선택해주세요.

 

 

 

 

이렇게 내가 고른 링크버튼으로 코드가 만들어졌다면 두 개로 나누어 사용해야 하는데요~ 1번이라고 표시해둔 코드는 CSS에 사용할 것이고 2번이라고 표시해놓은 코드는 서식 만들기에서 HTML로 사용할 거예요. 먼저 1번 코드를 복사해줍니다.

 

 

 

 

그런 다음 내 블로그 설정 → 스킨 편집으로 들어가 CSS를 선택한 뒤 맨 하단에 위에서 복사한 1번 코드를 붙여 넣기 해주75세요. ( 저는 나중에 헷갈릴까봐 맨 하단에 붙여넣기 해줬어요 ) 그리고 여기서 원하는 color 부분에 #글자색상 코드가 써있는데 내가 원하는 색상으로 변경한 뒤 (예를들어 흰색은 #fffff) 한칸 띄고 !important; (예: #fffff !important;) 이 코드를 꼭 집어넣어주세요. 그렇지 않으면 아무리 폰트 색상을 변경해도 링크버튼 사이트에서 임의로 지정해둔 색상으로 고정되어있습니다.

 

 

 

 

그 후 이제 2번 코드를 복사해서 내 블로그 설정 → 서식관리 → 서식 쓰기로 들어가서 제목은 저처럼 내가 알아보기 쉽게 작성해주고 기본 모드 부분을 눌러서 HTML창으로 들어가세요. 그리고 아까 복사해둔 2번 코드를 제목 아래에 붙여 넣기 해주면 서식으로 만들어 놓기는 끝났습니다. 이제 앞으로 글을 쓸 때 링크버튼을 넣으려면 만들어둔 서식을 불러와 1번 #과 2번글자 부분만 수정해서 발행해주면 돼요.

 

 

 

 

포스팅에 링크버튼 적용해보기

그럼 이제 만들어둔 서식을 가지고 포스팅에 적용을 해봐야겠죠? 티스토리에 글쓰기 창 더보기 메뉴에서 서식을 누르고 만들어둔 링크버튼 서식을 불러와줍니다.

 

 

 

 

그런 다음 기본 모드에서 다시 HTML모드로 바꿔주면 이전에 만들어뒀던 서식 코드가 보일 텐데요~ 여기서 #을 지운 다음 그곳에 링크 주소를 집어넣고, 버튼 이미지 안에 쓰여있던 olive 글자(처음 이미지를 만들 때 선택한 색상이 영어로 쓰여있는 부분을 지워주면 됨)를 지워준 후 버튼에 넣을 문구를 작성해주세요. 저는 네이버 링크를 집어넣었고, 네이버 바로가기 문구를 작성해줬어요.

 

 

 

 

그리고 다시 기본 모드로 돌아와 포스팅을 작성하고 발행하면 요렇게 내가 만든 링크 버튼이 생성된 걸 볼 수 있습니다. 포스트 쓰기 창에서는 버튼이 그냥 글자로만 표시되고 발행을 해야만 링크버튼으로 보이니까 글을 작성할때 안보인다고 걱정은안해도 돼요.

---

오늘은 티스토리 링크버튼 HTML 서식 만드는 방법에 대해 포스팅을 해보았는데요~ 글로 읽다 보면 어렵게 느껴지지만 이미지를 보고 순서대로 따라 해 보면 전혀 어렵지 않으니까 앞으로는 여러분들도 서식으로 만들어놓고 사용해보세요. 

 

 

▼좀 더 쉽게 만드는 링크버튼은 요기 ▼

티스토리 링크버튼 3초만에 만들기 ( 서식 코드 공유 )