티스토리 블로그 버튼 서식 만들어서 활용하기

애드센스 광고를 통해 수익을 꾀하는 블로그라면 아셔야 할 것이 있습니다. 바로 전면광고 유형인데요. 링크를 통해 페이지가 이동하는 경우 일정 확률, 시간마다 방문자에게 전면광고가 노출되는데 이게 클릭율이 매우 높습니다.

일반적인 광고 클릭율이 1~2% 수준인  잡블로그 기준으로 전면광고에 주력할 시 5~10% 이상으로 CTR이 상승합니다.

전면광고 유도전략

이에 대해서는 예전에 유료광고 집행을 통한 전면광고 유도전략에서 고수들의 기법을 소개해드린 바 있습니다. 

많이 활용되는 방법 중 하나가 눈에 잘 띄는 버튼으로 링크를 배치하고, 새 창에서 띄우기를 해제하여 현재 창으로 페이지가 전환되도록 하는 것입니다. 애드센스 전면광고는 새 창에서 열릴 시 나타나지가 않고 현재 창으로 전환될 때에 표시됩니다. 

글 초반이나 단순 참고 문헌같은 외부링크를 거는 경우라면 새 창으로 열기를 하는것이 블로그 체류시간에는 도움이 됩니다. 반면에 글을 어느정도 읽고 연관된 다른 포스팅을 내부링크 거는 상황이면 현재 창에서 열리도록 해서 전면광고를 노릴 수 있습니다.

티스토리 관리메뉴에서 서식으로 미리 버튼의 소스를 넣어둔 뒤, 글 쓰실 때 서식만 불러와서 바로 사용하시면 매우 편리합니다. 오늘은 제가 사용하고 있는 검은색 버튼과 빨간색 버튼 두 가지 소스를 공유해 드리겠습니다.

검은색 버튼 소스

아래와 같은 소스를 티스토리 관리메뉴의 서식에 넣고 이름을 지정해줍니다. ‘검은 버튼’ 과 같이 알아보기 쉬운 걸로 하시면 됩니다.

<div align="center"><a style="position: center; text-decoration: none; display: block; width: auto; height: 80%; border: 7px solid #2d3238; border-radius: 20px; background-color: #2d3238; box-shadow: none; color: #40cbfc !important; font-family: Tahoma; font-size: 23px; text-align: center; font-style: normal; font-weight: bold; line-height: 100%; box-sizing: border-box; margin-bottom: 15px; padding: 10px; text-shadow: none;" href="/">✅ 티스토리 블로그 버튼 만들기</a></div>

그리고 글을 쓸 때 서식에서 검은 버튼을 고르면 에디터 상에 바로 입력해놓은 HTML 소스로 버튼이 나타납니다.

이렇게 말이죠. 그러면 텍스트 부분을 원하는 글자로 수정하고, 전체를 드래그 한 뒤 링크 (단축키 Ctrl+K) 메뉴에서 원하는 페이지 URL을 걸어주시면 됩니다. 

빨간색 버튼 소스

좀 더 시선을 사로잡는 강렬한 빨간색상의 버튼도 하나 보여드리겠습니다.

<div align="center"><a style="display: inline-block; background-color: #e91e63; border: none; color: white !important; text-align: center; font-size: 16px; padding: 20px; border-radius: 10px; transition-duration: 0.4s; cursor: pointer; font-weight: bold; text-decoration: none; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);" href="/">클릭하여 확인!</a></div>

이 소스를 서식으로 만들어 놓고 에디터에서 불러와서 사용하시면

이런 느낌의 버튼이 생성됩니다. 딱 봐도 눌러보고 싶은 버튼 아닌가요? 어떤 중요한 정보를 소개하면서 마지막에 가장 중요한 포인트를 이곳을 눌러서 확인하라고 연결할 때 사용합니다.

입맛에 맞게 가로폭이나 색상, 디자인을 수정하셔서 사용하시면 되겠습니다. 그럼 참고하셔서 블로그 글쓰기 하실때 버튼 잘 활용해보시길 바랍니다.