구글 블로그스팟 꾸미기 - 티스토리 스킨처럼 Blogspot 테마 바꾸기, 애드센스 광고 본문 상단에 달기

구글 블로그스팟 꾸미기 - 티스토리 스킨처럼 Blogspot 테마 바꾸기, 애드센스 광고 본문 상단에 달기

한국에서 블로그 플랫폼을 선택할 때, 네이버 블로그가 큰 인기를 끌고 있는 반면, 광고 수익을 목적으로 하는 블로그 운영자들은 주로 티스토리 블로그를 선택합니다. 그 이유는 티스토리 블로그가 광고 수익을 극대화할 수 있는 기능을 제공하기 때문입니다. 구글 역시 블로그 서비스를 제공하는 Blogspot을 운영하지만, 한국에서는 상대적으로 사용자가 적은 편입니다. 이로 인해 블로거닷컴이나 Blogspot을 사용하는 사용자들은 상대적으로 소수입니다. 그 이유 중 하나는 Google Adsense 광고를 원하는 위치에 배치하기 어려운 제한된 기능 때문입니다.

초창기 Blogspot은 HTML이나 CSS를 수정할 수 없었지만, 최근에는 테마의 HTML과 CSS를 수정할 수 있는 기능이 추가되었습니다. 이로 인해 Blogspot의 가능성과 가치가 크게 상승하였습니다. 다만, 티스토리와 같은 수준의 자유도는 제공되지 않으며, 개인이 제작한 스킨을 설치하는 것은 여전히 불가능합니다. 그럼에도 불구하고 HTML과 CSS를 수정할 수 있는 기능 덕분에 Adsense 광고의 위치를 자유롭게 조정할 수 있어 수익을 극대화할 수 있는 기회를 제공합니다.

이 글에서는 Blogspot을 티스토리처럼 꾸미고, 애드센스 광고를 본문 상단에 배치하는 방법에 대해 설명하겠습니다. 먼저, Blogspot 관리자 메뉴에서 테마로 들어가서 사용 중인 디자인의 HTML 편집 화면으로 넘어가야 합니다. Blogspot의 테마 HTML 편집은 초보자에게 다소 난해할 수 있는데, 이는 HTML5와 CSS3로 구성된 문서가 아닌 XML 문서로 제공되기 때문입니다. 이러한 XML 문서 구조 때문에 초보자는 HTML과 CSS의 위치를 파악하기 어려울 수 있습니다.

하지만, Blogspot은 블로그 개수에 제한이 없으며, 저장 용량의 한계만 있을 뿐입니다. 따라서, 실험용 블로그를 만들고 다양한 테스트를 해볼 수 있습니다. 이 글에서는 Blogspot에서 애드센스 광고를 본문 상단에 배치하는 방법에 대해 자세히 알아보겠습니다.

애드센스 광고 배치하기

1. 테마 HTML 편집하기
   • Blogspot 관리자 메뉴에서 '테마'로 이동한 후, 현재 사용 중인 테마의 'HTML 편집' 화면으로 들어갑니다.
   • XML 데이터로 된 테마 파일에서 <data:post.body/> 태그를 찾습니다. 이 태그는 블로그 본문을 표시하는 역할을 합니다.
   • 이 태그 바로 위에 위치한 <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'>를 찾습니다.
2. 광고 코드 삽입하기
   • <data:post.body/> 태그와 그 위에 위치한 <div> 태그 사이에 Adsense 광고 코드를 삽입하면, 본문과 제목 사이에 광고가 표시됩니다.
   • 만약 광고를 본문 바로 아래에 표시하고 싶다면, <data:post.body/> 태그 바로 다음 줄에 광고 코드를 넣으면 됩니다.
3. 자바스크립트와 jQuery 사용
   • Blogspot에서는 자바스크립트나 jQuery를 사용할 수 있습니다. 이를 통해 광고를 본문 중간으로 이동시키는 등의 추가적인 조정이 가능합니다.
4. CSS 스타일 적용하기
   • CSS를 적용하여 광고의 위치를 더 세밀하게 조정할 수 있습니다. Blogspot에서는 HTML 내에서 CDATA 형태로 스타일시트를 정의할 수 있으며, <b:templates-skin> 태그 아래에서 CSS 스타일을 정의합니다.
   • 아래의 예제와 같이 <b:templates-skin> 태그를 펼쳐서 CSS 스타일을 추가하면 됩니다:

     <b:templates-skin>
     <![CDATA[
       /* 여기에 CSS 스타일 추가 */
     ]]>
     </b:templates-skin>

결론

Blogspot은 한국에서 상대적으로 덜 알려진 블로그 플랫폼이지만, 최근에는 HTML과 CSS를 수정할 수 있는 기능 덕분에 사용자가 증가하고 있습니다. 티스토리 블로그와 비슷하게 애드센스 광고를 원하는 위치에 배치할 수 있는 방법을 배우면, Blogspot에서도 수익을 극대화할 수 있습니다. 테마 HTML 편집과 CSS 스타일 적용을 통해 광고를 효과적으로 배치하고, 자바스크립트와 jQuery를 활용하여 광고 위치를 더욱 세밀하게 조정할 수 있습니다.

다음 글에서는 네이버 웹마스터 도구에 Blogspot을 등록하는 방법에 대해 다룰 예정입니다. Blogspot의 잠재력을 최대한 활용하여 효율적인 블로그 운영을 하시기 바랍니다.

키워드: 구글 블로그스팟, 티스토리 스킨, Blogspot 테마, 애드센스 광고, 광고 배치, HTML 편집, CSS 적용, 자바스크립트, jQuery, 블로그 수익