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

티스토리 링크버튼 만들기

요즘 티스토리 블로그 하시는 분들 많으신데 HTML 코드를 만져서 취향대로 꾸며야 하다 보니 너무 어렵게만 느껴지는 것도 사실입니다. 게다가 다른 사람들은 링크버튼 하나도 간단하게 만드는것 같은데 막상 내가 하려면 어렵게 느껴지기도 하잖아요? 그래서 오늘은 3초도 안 걸리는 티스토리 링크버튼 만들기 방법을 알려드릴 테니 첨부해 드리는 서식 코드만으로 여러분도 아주 쉽게 따라 해보시길 바랍니다.

 

 

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

예전에 티스토리 링크버튼을 만들수있는 사이트에 들어가서 HTML 코드를 만들고 CSS에서 붙여 넣고 하는 방법을 포스팅한 적이 있습니다. 저도 처음에는 요 방법으로 사용했었는데 사이트 방문하고 이런 게 번거로우니까 오늘은 그냥 제가 알려드리는 코드를 서식으로 만들어온 뒤 사용해 보세요. 이 방법이 훨씬 쉽습니다.

 

티스토리 링크버튼 서식 코드

링크버튼 코드.txt

0.00MB

가장 먼저 위의 파일을 다운로드해서 내 컴퓨터에 저장해주세요. 그리고 파일을 열어 영어로 쓰여있는 코드를 전체 드래그해서 복사해 줍니다.

 

3초 만에 링크버튼 만들기

티스토리 링크버튼 만들기

코드를 복사한 뒤 내 티스토리 블로그 설정으로 들어가서 서식관리 → 서식 쓰기를 눌러주고 서식쓰기창 상단에 있는 메뉴탭 가장 오른쪽에 있는 기본메뉴를 HTML 창으로 들어가 복사해 둔 코드를 붙여 넣기 해주세요.

 

 

티스토리 링크버튼 만들기

그리고 기본모드로 다시 들어가면 요렇게 링크버튼이 생성된 걸 볼 수 있습니다. 여기서 제목도 내가 나중에 서식으로 불러올 때 알아보기 쉬운 단어로 적어놓으면 됩니다. 저는 그냥 단순하게 링크버튼으로 입력해 줬어요.

 

링크버튼 적용해 보기

티스토리 링크버튼 만들기

그럼 이제 글쓰기창에서 만들어둔 서식을 불러와볼까요? 글쓰기 창으로 들어가서 메뉴탭에 있는 점세개를 누르고 서식에서 내가 만들어둔 링크버튼을 불러와줍니다. 이후 HTML 창으로 들어가서 수정해 주면 되지만 저는 그냥 기본모드에 놓고 링크버튼 안에 있는 문구를 바꿔주고 있어요.

 

 

티스토리 링크버튼 만들기

이런 식으로 기본모드에서 만들어둔 서식을 불러오고 테스트 링크버튼입니다. 글자를 드래그한 뒤 티스토리 바로가기 등의 문구를 입력해 주면 됩니다. 단, 이 단계에서 글자를 드래그해서 백스페이스를 누르면 버튼 자체도 다 지워져 다시 서식에서 불러와야 되니까 저처럼 드래그한 상태에서 바로 글자를 입력하거나 한 글자를 남겨둔 상태에서 바꾸려는 문구를 작성하고 기존에 있던 글자는 지워주세요.

 

티스토리 서식 코드

티스토리 코드를 가지고 서식을 만들어둘 때 배경색상을 다른 색으로 변경하고 싶다면 background-color를 바꿔주면 되고, 글자 크기를 키우고 싶다면 font-size를 수정해 주면 되세요. 그리고 버튼 자체의 크기를 조절하고 싶다면 height 부분의 숫자를 수정해주면 됩니다. 그리고 버튼 안의 문구는 노란색으로 밑줄 그은 부분의 글자를 바꿔주면 됩니다. ( 색상코드는 아래 링크를 타고 들어가서 원하는 색상을 선택하고 코드를 복사해오세요~ )

 

 

저는 이렇게 서식으로 저장해 두고 이것으로만 사용하고 있는데 포스팅마다 또는 버튼마다 버튼 색상을 변경해주고 싶다면 서식을 불러온 뒤 기본모드에서 HTML모드로 변경하여 위의 코드를 찾아 수정할부분만 골라서 수정해 주면 됩니다. 이제 번거롭게 사이트 들어가서 만들지 말고 오늘 공유해 드린 서식 코드 가지고 쉽게 티스토리 링크버튼 만들기 해보세요^^

 

티스토리 링크 미리보기 전면광고 설정 방법