구글 애드센스 블로그스팟 광고수입에 필수, 링크 버튼 만들기와 적용

블로그 본문에 사용하는 이런 링크 버튼 보신 적 있으시죠?

블로그스팟은 티스토리보다 정보도 부족하고 어려운 점이 많더라구요. 블로그 링크 버튼 만들기와 적용하기도 마찬가지였어요. 글도 몇 개 없고 그대로 따라하기엔 초보자 입장에서 약간 어려움이 있었어요.

오늘은 나만의 블로그 링크 버튼을 10초만에 만드는 방법과, 블로그 포스팅 시 본문에 적용하는 방법까지 알려드릴게요. 저같은 초보자를 위해 실패할 일 없게 정말 자세하고 디테일하게 정리해드릴게요.

블로그 버튼 필요한 이유

티스토리 블로그, 구글 블로그스팟을 하시는 주요 목적은 구글 애드센스 광고수입이죠.

광고수입을 올리는 방법 중 하나는 링크를 걸어 전면광고를 띄우는 것인데요, 텍스트에 단순히 링크를 걸어둔 형태보다 버튼 형태에 링크를 연결하면 아무래도 더 눈에 띄고 클릭하고 싶은 마음이 들겠죠.

링크의 클릭률을 높이고 가독성을 높이기 위해 블로그 버튼을 사용한다고 생각하시면 됩니다.

블로그 버튼 만드는 방법은 간단해요. 크게 디자인을 따지지 않는다면 기본 제공 디자인을 선택하면 10초만에도 만들 수 있어요.

버튼 생성은 버튼제너레이터 사이트에서 진행합니다. 대부분의 블로그에서 버튼제너레이터에서 버튼 생성하는 방법을 소개하고 있고, 실제로 써보니 초보자 기준으로도 간단하고 쉬웠습니다.

버튼 제너레이터 사이트에 접속합니다.

가장 왼쪽에 있는 버튼 이미지는 기본 템플릿으로 클릭만하면 바로 적용이 되서 편리합니다. 기본 템플릿으로 버튼 생성 시 10초만에도 버튼 생성이 가능합니다.

Text 메뉴에서는 미리 텍스트를 넣어보고 기본 글자크기를 조절할 수 있습니다.

Size 메뉴에서는 버튼의 가로 세로 사이즈를 조절할 수 있습니다.

버튼 이미지 하단의 컬러팔레트를 클릭하면 버튼 배경, 그림자, 그라데이션, 폰트색상 등을 커스터마이징 할 수 있습니다. 저는 골치아파서 기본템플릿을 사용하고 이 부분은 그대로 두었습니다.

원하는 버튼모양을 완성했다면 가상이미지 하단의 get code 버튼을 눌러줍니다.

get code 버튼을 누르면 오른쪽에 완성된 버튼 코드가 나옵니다.

<a href="#" class="myButton">저는 버튼입니다</a>

이 부분은 본문에 링크 삽입 시 넣는 코드이고, 두번째 줄부터가 디자인을 설명하는 css 코드입니다. 전체 코드를 메모장 등에 복사해두세요.

직접 만들기 귀찮으신 분들은 위 이미지에 있는 코드를 공유드릴테니 바로 텍스트파일 다운받아 사용해보세요.

티스토리 기준 블로그에 버튼 넣는 방법은 나와있는데, 구글 블로그스팟에 적용하는 방법에 대한 포스팅들은 1% 부족한 느낌이더라구요. 버튼까지는 만들었는데 코드를 어디에 넣어야할지 모르겠는게 제일 컸어요.

저같은 초보자도 절대 실패할 수 없는 버튼 적용 방법으로 진행해볼게요.

버튼제너레이터 사이트에서 생성한 코드를 넣어줍니다.

제가 첨부한 텍스트파일을 다운받으신 분들은 전체 코드를 복사해서 이 부분에 넣어주시면 되고, 사이트에서 직접 코드를 만드신 분들은 첫번째 줄을 제외하고 복사해서 넣어주세요.

코드를 넣은 뒤에는 디스켓 모양의 저장버튼을 눌러주세요.

여기까지 완료했다면 다 왔습니다.

블로그 포스팅 시에는 원하는 자리에 아래 코드를 넣어주시면 됩니다. 버튼제너레이터에서 생성된 코드 중 첫번째 줄에 있던 코드에요.

<a href="#" class="myButton">저는 버튼입니다</a>

"#" 부분에 연결하고 싶은 URL, "저는 버튼입니다" 부분에는 버튼에 넣고 싶은 글자를 적어주세요. 이렇게 완성한 코드를 HTML 모드로 본문 원하는 위치에 넣으면 적용 완료입니다!

미리보기 화면에서는 텍스트로 보이는데, 발행 후 확인해보면 정상적으로 버튼 이미지가 적용되어 있는 걸 확인할 수 있습니다.

구글 블로그스팟 세팅과 사용에 궁금한 점이 있다면 아래 포스팅도 참고해보세요.