티스토리 링크 버튼 여러개 만들기, 안될때 해결 방법

티스토리 블로그에 링크 버튼을 만들면 전면 광고가 뜨기 때문에 링크 버튼을 만드는게 도움이 된다고 합니다. 
그래서 링크 버튼을 만들어 보았습니다. 
그런데 따라하면 되는 줄 알았는데 원하는데로 안되어서 한참을 고생을 하여 겨우 방법을 알아내었습니다. 
 

 

 

 

티스토리 링크 버튼 여러개 만들기, 안될때 해결 방법

 
 

목차

1. 버튼 코드 만들기
2. 서식 만들기
3.  CSS 코드 적용하기
 
 
 
 

1. 버튼 코드 만들기

버튼 코드는 특별한 기술이 없어도 버튼 제너레이터(Button Generator)라는 사이트에서 쉽게 만들수가 있습니다. 
 

Button Generator 바로가기

 

 
위의 사이트에 들어갑니다. 
 
 

Button Generation

 
왼쪽에 있는 버튼 중에서 마음에 드는 버튼을 선택합니다. 저는 노란색 바탕의 orange를 선택하였습니다. 
오른쪽의 텍스트(Text), 사이즈(Size), 보더(Border) 등을 적절히 조절하면 중앙의 링크버튼이 모양이 바뀝니다. 
원하는 모양의 링크버튼이 만들어 지면 Get Code를 클릭합니다.  
 
 
 
 

 
Get Code를 클릭하면 오른쪽과 같이 HTML 과 CSS코드가 생깁니다. 
윗 부분의 파란색 박스안에 있는 것은 HTML 코드이고 아래의 빨간색 박스에 있는 것은 CSS코드입니다. 
 
 
 
 

2.  서식 만들기

 

 
 
관리 > 콘텐츠 > 서식 관리에서 서식 쓰기로 들어갑니다.
서식에 방금 만든 HTML코드를 저장해 두었다가 필요로 할때마다 사용하는 방식입니다.
 
 

서식 제목을 만들고 내용에 티스토리 바로가기 라고 글자를 입력하고 기본모드 아래에 있는 HTML 모드로 들어갑니다. 
 
HTML 모드에서

 
복사한 코드(파란색)를 붙여넣습니다. 그러면 위와 같이 나옵니다.
여기서 일부분을 아래와 같이 수정하여야 합니다. 
 
 

 
 1. "#" 부분을 "https://www.tistory.com"
2. "myButton" 부분을  "myButton30"
3. orange 부분을 티스토리 바로가기 
이렇게 수정하였습니다. 
그리고 앞부분은 기본모드에서 중앙정렬을 하면 이렇게 자동으로 바뀝니다. 
 
※ 참고로 2번의 "myButton" 부분을  "myButton30" 으로 바꾼것은 여러개의 링크버튼을 만들때 반드시 숫자로서 구분해야 인식이 됩니다. 
 
 

 

 

3.  CSS 코드 적용하기

이제 가장 중요한 CSS 코드를 적용하여 봅니다. 
티스토리 > 관리 > 스킨편집 > html 편집 > css 로 들어갑니다. 
앞서 Button Generator 에서 생성한 CSS 코드를 복사하여 붙여넣기 합니다. 
 
 

 
 
그런데 여기서 중요한 점이 있습니다.
(이 부분은 제가 시행착오를 거치면 알아낸 부분입니다. )
 

 
 
위에서 복사한 CSS코드(왼쪽)와 제가 수정한 CSS코드(오른쪽)의 차이점이 보입니까?
 
1. color 와 text- decoration 부분의 빨간 박스입니다. 
색상과 텍스트를  나타내는 코드 뒤 부분에  "! important"를 삽입하여야 합니다. 이 "! important"를 삽입하지 않으면 스킨의 종류에 따라 색깔이 엉뚱한 것이 나오기도 합니다. (중요. 저는 이부분 때분에 오랜시간 고생하였습니다.)
 
color : #333333 ;    →   color : #333333 ! important ;
text - decoration : none ;  →  text - decoration : ! important none ; 
 
2. myButton 부분의 파란색 박스입니다. 
이것은 여러개의 링크 버튼을 사용할 경우 반드시 숫자로 구분하여 주어야 에러가 생기지 않습니다. 
 
myButton → myButton30 또는 myButton40 등등으로
myButton뒤에 숫자로서 여러개의 링크버튼 코드를 구분하여야 합니다. 
 
 
 

 
 

 
이렇게 여러개의 링크버튼도 쉽게 만들수 있습니다.