티스토리 블로그 CSS 버튼 추가하는 방법

티스토리 수익형 블로그의 애드센스 수익을 높이기 위해서는 CSS 버튼을 이용한 모바일 전면광고 발동 횟수를 높이는 방법이 있어요. 티스토리 블로그에서는 정식으로 CSS 버튼을 제공하고 있지 않기 때문에 이 글에서 설명하고 있는 CSS 버튼 추가 방법은 당신의 블로그 수익을 획기적으로 높여줄 것임을 장담해요.

 

Contents

• 1. 수익형 블로그와 모바일 전면광고
• 2. CSS 버튼 추가 방법

티스토리 CSS 버튼 넣는 방법

 

수익형 블로그와 모바일 전면광고

수익형 블로그를 운영 중이신 분들의 가장 큰 고민은 낮은 수익률일 거예요.

유튜브 등에서는 하루 1시간이면 많은 돈을 벌 수 있다고 하지만 내가 직접 해보면 하루 3~4시간 이상의 시간을 할애하고 있지만 한 달 수익은 100달러도 안되어서 좌절하시는 분들이 많을 거예요.

 

 

애드센스 수익 높이려면

수익형 블로그의 수익을 높이기 위해서는 애드센스 광고 중 광고효율, 광고단가가 높은 광고를 최대한 많이 발동시켜야 해요.  수익형 블로그 고수들의 애드센스 보고서를 보면 모두 모바일 전면광고의 RPM이 상당히 높음을 알 수 있어요.

아래 그림의 제 애드센스 보고서로서 모바일 전면 광고가 다른 광고보다 RPM이 10배 이상 높아요.

애드센스 보고서

 

모바일 전면광고 발동조건

모바일 전면광고를 많이 띄우기 위해서는 모바일 전면광고 발동조건을 알아야겠죠?

모바일 전면광고는 주로 링크를 클릭하여 페이지를 이동하거나, 다른 화면에서 내 블로그 화면으로 포커스가 전환되었을 때 주로 발동하여요.

화면 포커스의 이동은 블로그 작성자가 제어할 수 없는 부분이지만 링크를 클릭해 페이지를 이동하게 하는 것들은 링크를 많이 만들어서 페이지 이동 가능성을 높일 수는 있어요.

 

고수익을 위해서는 모바일 전면광고의 발동 비중을 높여야 해요.

 

CSS 버튼 추가 방법

링크를 넣는 방법 중 한 가지가 바로 CSS 버튼이에요.

CSS 버튼은 주로 커서가 버튼으로 이동했을 때 커서의 색상이 변한다던지 버튼이 커져 글을 읽는 사람으로부터 관심을 유발할 수 있고 결과적으로 버튼을 클릭할 가능성을 높일 수 있어요.

이렇게 중요한 기능이지만 티스토리에서는 CSS 버튼을 정식으로 제공하고 있지 않기 때문에 CSS 코드 편집을 통해 CSS 버튼을 블로그 운영자가 추가하여야 해요.

 

CSS 버튼은 일반 <a> 태그보다 클릭률이 높아요

 

CSS 수정

티스토리 블로그 관리 화면으로 이동해 CSS 코드를 수정해요.

스킨편집 > html 편집 > CSS를 터치해 CSS 코드로 이동하고 제일 밑 부분에 아래 첨부문서 코드 전체를 추가해요.

 

CSS 코드 수정 방법을 모르신다면 아래 글을 먼저 확인하세요.

티스토리 블로그 목차 넣는 방법, 목차 이동 방법(CSS 코드 제공)

 

버튼 CSS 코드.txt

0.00MB

 

 

CSS 버튼 추가 방법

CSS 버튼을 추가할 본문 위치로 이동해 다음과 같이 입력해요

<p data-ke-size="size16"><a title="title" href="link address here"><button class="aros-button">링크</button></a></p>

 

일반적인 링크를 위한 <a> </a> 태그 내에 <button class="aros-button"> 내용 </button>을 추가하는 방식으로 CSS 버튼을 추가할 수 있어요.

 

 

---

 

오늘은 티스토리 블로그의 수익률 향상을 위한 최고의 방법인 모바일 전면광고의 발동 빈도를 높이기 위해 CSS 버튼 넣는 방법에 대해 알아보았어요.

 

함께 읽으면 좋은 글

네이버 서치어드바이저 수집보류 원인과 해결방법

티스토리 블로그(수익형 블로그) 만드는 방법 총정리