애드센스 티스토리 블로그 CSS 버튼 만드는 방법 (ft. 기본버튼 다운로드)

티스토리 블로그를 운영하면서 효율적인 애드센스 광고의 효과를 보려면 버튼 사용이 많은 도움이 되는데요. 그러기 위해선 나만의 버튼을 만들어서 내 블로그에 적용시키는 방법을 알고 계시면 좋습니다.

 

처음 시작할 때는 어려운 단어가 왜 이렇게 많은지요! 버튼 만들고 적용하는 것 또한 알고 나면 어렵지 않은 부분이지만 처음 시작하시는 분들에게는  막막한 부분 중에 하나이기도 합니다.

 

티스토리 초보라면 오늘 기본적인 버튼 만드는 방법을 차근히 따라해보시고 내 블로그에 나만의 버튼을 적용해 보시기 바랍니다.

 

티스토리 기본버튼 다운로드 

 

 

먼저 아주 극초보라서 만드는 순서 따라 하는 것도 힘들어요! 하시는 분은 아래에 만들어 놓은 서식을 다운로드하여 사용해 보시시길 바랍니다. 다운로드 후 아래의 CSS 버튼 적용방법의 설명을 실행해 주시면 됩니다.

 

기본적인 버튼 만드는 방법은 크게 어렵지 않으니 일단 이걸 사용하시더라도 여유가 생기면 한번쯤은 연습해 보시길 추천드립니다.

 

>> 기본 버튼 코드 다운로드

 

버튼 코드 파일.txt

0.00MB

 

버튼 제네레이터 버튼 만드는 방법 

 

<버튼 제네레이터 영어>

<버튼 제네레이터 한국어>

 

CSS 기본 버튼 만드는 방법

1. 버튼 제네레이터 홈페이지 접속

2. 왼쪽 기본 버튼 디자인을 고른다.

3. 오른쪽 텍스트 크기등의 옵션을 변경한다.

4. 코드받기 Get code 를 선택 한다.

 

 

기본 버튼을 만들기 위해서 가장 편리하게 사용할 수 있는 버튼 제네레이터를 사용해 볼껀데요! 처음에는 복잡하게 느껴질 수 있지만 차근차근 하나씩 따라오시면 두 번째부터는 기본적인 버튼 만들기는 문제없으실 거예요! 

 

먼저 한국어 번역 기능이 있다면 한국어로 변경 후 사용하시면 더 보기 쉬우니 참고해 주세요.

 

버튼제네레이터에 들어가시면 메인 화면 바로 왼쪽에 이미 기본적인 버튼 모양들이 만들어져 있어요. 원하시는 모양을 눌러보고 마음에 드는 버튼을 선택하세요.

 

그리고 오른쪽에 보면 글꼴 크기부터 가로,세로 크기 그림자까지 상세하게 변경해 볼 수 있어요. 이거 만진다고 잘못되는 거 아니니 이것저것 설정값을 조정해 보면서 원하는 모양을 연습해 보세요.

 

만들어진 버튼 모양 아래에 색상 파레트를 누르시면 다양하진 않지만 어느 정도 색도 변경 가능합니다.

 

마음에 드는 버튼을 완성했다면 중앙 버튼 이미지 하단에 코드 받기 Get code를 눌러주세요. 그럼 오른쪽에 적용할 수 있는 코드가 나옵니다. 자! 이제 만들기는 끝났어요!!

 

CSS 버튼 적용하는 방법

 

코드 받기를 눌러 오른쪽에 코드가 나타났나요? 이렇게 만든 버튼 코드를 우리 티스토리에 적용만 하면 되는데요. 위의 그림과 같이 ①핑크네모와 ②노란네모를 복사해서 각각 필요한 곳에 붙여 넣기 하여 적용할 거예요!

 

순서는 아래의 노란네모칸에 있는 코드를 먼저사용합니다. 다음 순서를 하나씩 따라 해보세요!

 

1. CSS 코드 적용

CSS 코드 적용 방법

1. 티스토리에서 관리자모드 가기

2. 꾸미기 선택

3. 스킨편집에서 오른쪽 상단 HTML 선택

4. HTML에서 중앙에 CSS 클릭하기

5. CSS 맨 아래 칸에 내가만든 버튼 코드 아래부분 그대로 복사해서 붙여넣기

 

첫 번째로 CSS 코드를 적용할 건데요! 나의 티스토리 관리자 모드 - 꾸미기- 스킨편집- HTML편집-CSS의 순서대로 눌러줍니다. CSS페이지가 열렸나요?

 

이제 내가 만든 버튼 코드 중에서 ②노란 네모에 해당하는 코드를 모두 드래그 복사하여 열어놓은 CSS 맨 아래에 붙여 넣기 해줍니다. 붙여넣기 하셨다면 아랴의 설정 적용을 꼭 해주고 나오는 거 잊지 마세요! 위에 코드들과 구별이 쉽도록 칸을 많이 띄어주고 진행하시면 좋습니다.

 

벌써 하나 끝났어요!!

 

2. 서식 쓰기 설정

서식 쓰기 설정 방법

1. 티스토리 관리자 모드 들어가기

2. 왼쪽 서식관리에서 서식쓰기 클릭

3. 서식쓰기에 오른쪽 상단 기본모드를 HTML로 변경

4. 내가만든 버튼 코드중 핑크네모에 해당하는 부분을 붙여넣기

5.기본모드로 돌아가 제목쓰고 저장하기

 

이제 ①핑크네모에 해당하는 부분만 서식 쓰기에 저장해 주면 된답니다! 이번엔 나의 관리자모드-서식관리-서식 쓰기-오른쪽 기본모드를 HTML로 변경해 주세요!

 

그다음 내가 만든 버튼 코드 중에서 ①핑크네모에 해당하는 코드를 복사해서 그래도 붙여 넣기 하시고 다시 기본모드를 눌러 원래대로 돌아가신 후 버튼이름(제목) 쓰고 저장하시면 됩니다.

 

버튼 정렬을 가운데로 하고 싶으면 앞 위에 <center>그리고 </center> 코드를 넣어주세요!

 

예 :  <center> 핑크네모코드 붙여 넣기 </center>

 

이제모두 끝났습니다. 실제로 글을 쓰러 가볼까요?

 

3. 글쓰기에서 적용

 

티스토리 글쓰기에서 오른쪽 상단 점세개를 누르고 서식을 선택합니다. 아까 내가 저장해 놓은 버튼 이름을 클릭하면 글쓰기 페이지에 적용됩니다.

 

이때 기본 글쓰기에서는 만든 모양으로 보이지 않고 미리 보기 또는 발행 시만 적용되어 보이니 당황하지 마세요! 버튼을 클릭하고 연결할 링크주소를 넣어주고 아래의 대체 텍스트를 쓰고 저장합니다.

 

이제 완료입니다^^ 따라오느라 고생하셨습니다!

 

버튼제네레이터 글자 색상 오류

 

요즘 버튼 제네레이터에서 버튼을 만들고 적용하면 버튼 글씨 부분의 색상이 오류가 난다는 후기들이 종종 보이는데요. 만약 나의 경우도 그렇다면 이렇게 한번 해보세요!

 

오류시에는 관리자모드-꾸미기-스킨편집-HTML-CSS 그대로 들어가서 내가 붙여넣기한 버튼 코드를 살펴봅니다. 자세히 보면 color이라고 되어 있는 부분이 있는데 이 옆에 #000000이라고 되어 있는 부분이 버튼 글씨 색상번호입니다.

 

이 버튼글씩 생상번호 제일 마지막에 ; 모양으로 끝나는데요! 버튼 글씨 색상번호 #0000000와 ; 사이에 !important 코드를 넣어주시면 됩니다.

 

예 : color: #00000! important; 

 

---

이상으로 애드센스를 처음 하시는 분들에게 도움이 될만한 티스토리에 기본적인 버튼 코드 만드는 방법에 대해서 알아보았습니다.

 

위에서 말씀드렸듯이 알고 나면 참 적용하기 쉬운 기본적인 방법이니 걱정 마시고 한 번만 따라 해보시길 바랍니다.

 

 

---

 

 

구글 애드센스 시작 10개월 ｜일상을 주제로 하는 블로그는 살아남고 있을까?