티스토리 블로그 CSS : CSS 버튼 만들기(애드센스 수익율 향상)

티스토리 블로그 css : CSS 버튼 만들기(애드센스 수익율 향상)

 

티스토리 블로그 CSS : CSS 버튼 만들기(애드센스 수익율 향상)

애드센스 광고는 본문에 자동 또는 수동으로 삽입되는 방법 말고도 이피드, 사이드 광고, 일치하는 컨텐츠 광고, 목록광고, 전면광고 등을 사용자가 원하는 형태로 운영할 수 있으므로 수익성이 서로 다릅니다.

하지만 무조건 광고를 클릭할 수 있도록 유도하는 방식으로 이동하기 단추를 만드는 방법이 있습니다.

 

전면광고는 현재 페이지에서 어떤 링크를 눌러 다른 페이지로 전환시 뜨게 됩니다. 다운 링크 버튼이나 다른 사이트로 넘어갈때 주로 나옵니다. 그래서 화면이 전환되기 전에 화면 전체 또는 중앙에 광고가 한눈에 보이기 때문에 클릭할 확률이 높아지게 됩니다.

 

보통은 블로그로 수익내기 등의 강좌를 보면 이미지로 많이 사용을 하는데, 인터넷이 느리거나, 이미지가 깨지는 등의 단점이 있고, 이미지를 계속 만들어야 할 때도 있기 때문에 불편할 수도 있습니다.

CSS를 이용하면 단순히 텍스트 부분만 수정하면 되기 때문에 CSS를 이용한 버튼을 만드는 방법이 편할 수 있습니다.

 

 

티스토리 블로그 CSS버튼 여러가지 형태로 만들어 보기

CSS버튼을 쉽게 만들 수 있는 사이트가 있습니다. 'Button Generator' 이라는 사이트에서 여러가지 CSS버튼의 형태를 쉽게 만들어 볼 수 있습니다.

 

아래의 링크를 통해서 바로 이동이 가능합니다.

CSS 버튼 쉽게 만들기 : BUTTON GENERATOR 사이트 바로가기

 

BUTTON GENERATOR 사이트

위처럼 사이트에 접속하시면 왼쪽에는 CSS버튼의 형태를 보실수 있고, 가운데는 완성된 형태, 오른쪽에는 색상등을 선택하실 수 있습니다. 빨간색으로 표시된 부분을 누르시면 오른쪽화면이 바뀌면서 CSS코드를 복사해서 붙여넣기를 할수 있습니다.

 

BUTTON GENERATOR 사이트

위의 이미지처럼 빨간색 부분을 누르시면 CSS 코드가 나왔다가 설정화면으로 나왔다가 합니다.

 

티스토리 블로그 CSS버튼 만들기

 

완성이 되었다면 오른쪽에 CSS코드가 나오게 해서 코드를 복사한후 티스토리 블로그 CSS탭으로 이동후 적당한 곳에 붙여 넣기를 해주면 되는데 구분을 지어주기 위해서 위아래로 /* CSS버튼 만들기 */ 식으로 위아래로 주석을 달아주어 나중에라도 확인하기 편하게 해줍니다.

 

티스토리 CSS 코드 적용화면

 

 

 

티스토리 블로그에 CSS버튼 만들어 적용하기

긴 코드를 포스팅 할때마다 매번 삽입할 필요가 없고, 적당한 곳에 CSS코드를 적용하시면 됩니다.

아래의 다운 받는 CSS코드는 위의 홈페이지에서 사용이 어려우신 분들에게 도움이 되고자 올려두었으니 다운 받아 사용하셔도 됩니다.

 

CSS-BUTTON.txt

0.00MB

 

텍스트 크기는 'font-size'의 수치를 조절하시고, 버튼의 크기는 'padding:16px 31px;'에서 조절가능하며 16px가 세로, 31px가 가로 크기이니 css 적용후 미리보기를 통해 보시고 조절하시면 됩니다.

 

현재 저는 북클립을 사용중인데 다른 스킨을 사용하시더라도 상단이나 편하신 곳에 적용하시면 됩니다.

 

 

 

티스토리 블로그에 CSS버튼 적용하기 위해 포스팅시 적용할 HTML

위에서 적용한 CSS버튼을 본문 포스팅시 적용을 해볼게요

글쓰기 모드를 HTML로 변환하시고 아래의 코드를 넣어주시면 됩니다.

<a href="#" class="CSSbutton"><font color="#333333">CSS 버튼</font></a>

 

이렇게 넣어주시고, 다시 기본모드로 오시면 적용된 CSS버튼을 보실 수 있습니다.

이 코드를 복사해서 메모장 등에 붙여넣기 해서 사용하신다면 좀더 빠른 포스팅도 가능하실 겁니다.

font color="#333333"은 글자 색깔로 다른색으로 지정이 가능합니다.

색깔을 지정하는 방법으로는 티스토리 글쓰기 상단에 글자색을 누르시면 여러가지 색이 나오는데 색을 선택하시면 바로 아래에 색에 대한 rgb값이 나오는걸 참고하시면 됩니다.

 

글자색 RGB 값 찾는 방법

 

원하시는 링크의 주소는 'a href="#"'부분에서  #부분에 링크 주소를 'https://money.gureugi-j.com'식으로 넣어주시면 됩니다.

 

 

 

티스토리 블로그 CSS버튼 여러가지로 만들기

CSS탭에 코드를 'CSSbutton'으로 하나를 올리고 추가로 다른이름으로 올리면 선택적으로 사용이 가능합니다.

예를 들어 'CSSbutton'을 하나 했다면 다음건 'MYCSSbutton1', 'MYCSSbutton2' 식으로 본인이 알아볼수 있도록 변수명을 지정해서 CSS 코드를 만들어 줍니다.

 

이렇게 만들어서 사용할때 HTML 코드 역시 같은 이름으로 적용해서 사용하시면 됩니다.

 

<a href="#" class="CSSbutton"><font color="#333333">CSS 버튼</font></a>

<a href="#" class="MYCSSbutton1"><font color="#333333">CSS 버튼1</font></a>

<a href="#" class="MYCSSbutton2"><font color="#333333">CSS 버튼2</font></a>

 

 

티스토리 블로그 서식 이용해서 CSS버튼 활용하기

티스토리에는 서식이라는 기능이 있어서 이걸 활용하면 글쓰기가 좀더 수월합니다.

서식 활용하는 방법은 아래의 링크에서 확인하시면 도움이 되실겁니다.

 

미리 서식에 <a href="#" class="CSSbutton"><font color="#333333">CSS 버튼</font></a> 식으로 만들어 두시면

글을 쓰다가 바로 쓸수 있기 때문에 서식을 만들어 두시는것도 도움이 되실겁니다.

 

 

티스토리 블로그 세팅 후 글쓰기 방법(서식 활용 방법)

 

 

마지막으로

보통 블로그를 보면 무분별한 광고로 그냥 넘어가는 경우가 많아 클릭율이 저조해집니다.

저또한 이제 다시 공부하면서 광고를 여기저기 넣어 보고 있지만... 클릭율이 생각보다 저조합니다.

그래서 찾아본 내용이 링크 버튼을 만들어주어 전면광고를 반 강제적으로 보게끔 해서 수익율을 높일 수 있다는 내용에

이글을 포스팅 해봅니다.