티스토리 클릭 유도하는 CCS 버튼 만드는 방법(왕초보자용)

티스토리 블로그를 보시다보면 아래와 같은 CSS 버튼을 많이 보셨을텐데요. 클릭을 유도하여 수익을 증대시키기 위해 중요하는 역할을 합니다. CSS 버튼을 만들고 적용시키는 법에 대해 알아보겠습니다.

 

CSS 버튼 제너레이터 사이트 바로가기

 

 

목차

 

 

CSS버튼이란?

티스토리 블로그를 운영할때 수익을 위해서 링크를 많이 다시는데요. 링크를 달때는 직접 달기, 사진에 링크 넣어서 달기, 링크버튼을 넣어서 달기 등 다양한 방법이 있습니다. 링크를 직접 달때는 너무 노골적으로 링크를 유도하는 느낌이 들어 클릭률이 떨어진다는 단점이 있습니다. 그래서 저는 미리캔버스에서 직접 링크를 유도하는 사진을 만들어 링크를 넣어 주었는데요. 이게 제작하고, 사진 용량 줄이고, WBEP로 변환하고 많이 번거롭더라구요. CSS버튼 링크를 통해 사이트 연결을 보다 용이하게 할 수 있습니다.

 

CSS버튼 만드는 방법

초보자도 쉽게 CSS버튼 만드는 방법에 대해 알아보겠습니다. CSS버튼은 CSS 버튼 제너레이터 사이트에서 만들 수 있습니다.

 

CSS 버튼 제너레이터 만들러 가기

 

1. CSS 버튼 제너레이터에 사이트에 들어가면 다양한 종류의 CSS버튼을 볼 수 있습니다.

 

2. 원하는 디자인의 CSS버튼을 선택합니다. (취향에 맞게 수정도 가능합니다.)

CSS버튼

3. Get Code를 눌러 코드를 복사합니다.

이때 위에 한줄은 티스토리 서식에 적용할 것이고, 밑에 있는 부분은 CSS에 적용할 것입니다.

CSS 버튼 코드

CSS버튼 티스토리 CSS 적용방법

CSS버튼 티스토리 CSS적용 방법에 대해 알아보겠습니다.

 

1. <티스토리 - 블로그 관리 - 꾸미기 - 스킨 편집 - html 편집 - CSS>에 들어갑니다.

 

2. 복사해준 CSS용 코드를 CSS 제일 하단에 붙여 넣습니다.

 

★ 여기서 주의할 점이 있습니다. ★

 

CSS용 코드를 그대로 붙여 넣게 되면 CSS 버튼내에 있는 글자의 색깔이 설정된 것과 다르게 표시되는 오류가 발생하는데요.

 

[color:#ffffff;] 부분을 [color:#ffffff!important;]로 바꿔주면 오류가 사라집니다.

CSS버튼 CSS

 

CSS버튼 티스토리 서식 적용방법

CSS버튼 티스토리 서식 적용방법에 대해 알아보겠습니다. CSS에 코드를 붙여넣어 줬다면 이제 마지막으로 서식에 CSS버튼 코드를 등록해 둔다면 글을 쓸 때마다 간편하게 사용 할 수 있습니다.

 

1. <티스토리 - 블로그 관리 - 콘텐츠 - 서식관리>에 들어갑니다.

 

2. 글쓰기 모드를 HTML로 바꿔줍니다.

 

3. 서식용 CSS버튼 코드를 붙여 넣어줍니다.

 

4. 서식을 저장하고, 글쓰기 할때 마다 서식을 활용하여 CSS 링크 버튼을 넣을 수 있습니다.

 

CSS버튼 작성방법

CSS버튼 작성방법에 대해 알아보겠습니다.

 

<a href="#" class="myButton">green

 

예시용 서식 기준으로 <# 부분>에 링크 할 주소를 넣어주면 되고, <green 부분>에 CSS버튼에 넣고 싶은 글자를 작성해 주면 됩니다.

 

기본모드에서 보면 링크버튼이 적용되지 않아 보이지만 미리보기로 보면 링크버튼이 적용 된 것을 확인 할 수 있습니다.

 

단, 모바일 미리보기에는 링크버튼이 제대로 표시 되지 않는 것으로 보이는데요. 발행 후 크롬, 네이버 등 타 모바일 사이트에서 확인하면 제대로 적용되어있는 모습을 확인 할 수 있습니다.

 

지금까지 티스토리 클릭 유도하는 CSS 버튼 만드는 방법에 대해 알아보았습니다. 도움이 되셨길 바랍니다. 감사합니다.

 

같이 보면 좋은 글

티스토리 쿠팡파트너스 광고 배너 삽입하는 법

[티스토리] 인기글 삭제하는 법

티스토리 스킨 변경 후 구글, 네이버 검색 노출 html 다시 등록 하는 법

1분 안에 티스토리 복사 불펌 금지하는 법(우클릭 및 드래그 금지)

티스토리 블로그 파비콘 만드는 법 / 설정하는 법