초등학생도 할수 있는 티스토리 버튼 만들기

 
티스토리 블로그를 적는 모든 분들의 가장 큰 관심사는 역시 블로그 수익일 것입니다. 오늘은 블로그 수익 향상에 도움이 된다고 알려진 티스토리 내에서 버튼 만드는 법을 알아보겠습니다.
 

버튼 만드는 방법

---

저 또한 워낙 이쪽으로 문외한인지라 버튼을 여러번 만들어 보려다 실패했는데요. 최대한 쉽고 자세히 가르쳐 드리겠습니다.
 
1. [버튼 제너레이터] 사이트에 들어 갑니다. 
 
              버튼 만들기
 
2. 버튼 안에 들어갈 글자를 적고 아래 사이즈 및 Border 메뉴등을 만져 마음에 드는 크기와 디자인의 버튼을 만듭니다. 
 

 
3.Get Code 를 누르면  아래 사진과 같이 오른편에 code 가 나오는데 "파란색 박스 안에 2번 코드만 복사합니다."
 

 
4. 이후 티스토리로 돌아와 티스토리 설정 내의 꾸미기 > 스킨편집으로 들어갑니다. 
 

 
5. 이후  html 편집을 눌려줍니다. 
 

 
6.  상단의 CSS 를 눌러줍니다. 
 

 
7. CSS 중 가장 하단으로 가서 [버튼 제너레이터]에서  복사한 파란색 박스 안의  2번 코드를 붙여 넣기 합니다. 
 

 
8. 빨간색 박스부분에서 #ffffff과 ; 사이에 !important 를 적어 주고 우측 상단에 [적용]을 눌러 줍니다.
 

 
 
9. 티스토리 설정으로 돌아와서  콘텐츠 > 서식관리 > 서식쓰기를 눌러 줍니다. 
 

 
 
10. 제목을 아무거나 적어주시고 , [HTML]을 눌러 주면 검은색 화면으로 바뀌며 HTML 모드로 들어갑니다. 
 

 
11. 다시 버튼 제너레이트로 돌아와 빨간색 박스인 1번 부분을 복사합니다.  
 

 
12. 조금전 열었던 티스토리의 HTML 부분에서 복사한  빨간색박스 부분  CODE를 붙여 넣고 우측 하단의 완료를 눌러 저장합니다.
 
 

 
 
13. 이제 다 끝났고 사용만 하면 됩니다. 일반 글쓰기로 와 봅니다.  조금 전 서식에서 만든 버튼을 불러와야 합니다.
... 을 누르고 서식을 눌러 방금 전 저장한 버튼을 불러옵니다. 
 

 
14. 아래와 같이 글씨에 그저 밑줄형태로 불러와질 텐데, 제대로 작동하고 있는 것이니 걱정하지 마세요. 해당 글쓰기에서 HTML모드로 들어갑니다.
 

 
 
15. 아래와 같이 버튼코드가 불러와집니다. 
 
★여기가 중요한데 빨간색 박스 안에 #  대신에는 연결하고자 하는 사이트를  파란색 박스안에 글자에는 박스안에 넣고 싶은 단어를 바꾸어 넣습니다.
 

 
16. 저는 다음 사이트에 연결해 보겠습니다. 빨간색 박스에는 다음 사이트 주소를 파란색 박스에는 "다음 바로가기"라고 적겠습니다. 이후 다시 기본모드로 돌아옵니다. 
 

 
17. 버튼이 안 생겨서 궁금하신가요?  하단의 미리 보기를 눌러 줍니다. 
 

 
 
18. 버튼이 잘 만들어진 걸 알 수 있습니다. 밑줄 친 글의 위치를 옮겨 버튼의 위치를 바꿀 수 있습니다.
 

 
19. 사이트로 제대로 이동하는지  확인을 위해 글을 비공개로 발행하고  클릭해 보았습니다. 
 

 
 
20. 다음으로 바로가기 버튼이 제대로 작동합니다. 
 

 

글을 마치며 

---

저 또한 예전부터 버튼 만드는 방법을 배우고 싶었지만 꽤나 헤매었는데요. 정작 만들어 놓으면 간단한데, 왜 잘 안되었을까? 생각했는데, 글을 써보니  다른 세팅들은 대부분 특정 위치에 코드만 붙이는데 반해 버튼 만들기는 코드 두 개를 CSS와 서식에 각각 붙이고 만들어야 해서  초반 세팅단계가 조금은 복잡하고, 사용할 때도 한 번도 HTML 모드로 들어가 사이트와 버튼 안 글자를 바꾸어 사용해야 해서 다른 세팅보다는 조금은 복잡하다는 걸 느꼈습니다. 
 
하지만 어렵게 생각한다면 한도 끝도 없이 어렵지만, 별거 아니라고 생각하면 쉽게 할 수 있는 게 사람인만큼 몇 번 연습해 보시면 금방 하실 수 있을 거라 생각합니다.