컴퓨터 상식 2010.08.10 11:50

다음 구글 광고 나란히 배치하는 방법

티스토리 블로그 광고를 시작하신지 얼마 안된분들 이라면 구글애드 광고와 다음뷰의 뷰애드 광고를 본문에 적용할때 뒤틀리는 상황에 당황하기 마련일꺼라 생각합니다.

저역시 이리 저리 해보고 여기 저기 검색하다 고생하면서 알게 되었답니다.
일단 여러 자료들이 정리가 잘되어 있긴하지만 어려움은 여전합니다. 기본적인 기초는 알고 있을꺼라 판단하고 모든걸 생략한체 간단명료하게 설명된 글들이 많기 때문이죠.

그래서 저 나름대로 자세하게 적어봅니다.

일단 블로고 글을 쓰면 자동으로 구글이나 다음뷰의 광고가 나타나게 하는 것이 첫번째겠죠.
저는 처음 어떻게 하는지 몰라서 본문 글쓸때마다 구글에서 html 광고 소스를 복사해서 본문글에 붙여넣기 한적이 있답니다. 다들 그렇게 구글 광고를 적용하는 줄알았었죠 ㅠㅠ 지금 보면 한심한 노가다였습니다.

일단 다음뷰 광고를 글을 쓸때마다 자동적으로 적용하는 방법 부터 하겠습니다.
 
1.티스토리 관리 목록중 플러그인 설정에 들어간다.
2.관리및 통계의 view AD를 선택한다.
3.이용약관에 체크후 저장 시킨다.


이렇게 설정해주시면 이제 본문을 쓸때마다 자동으로 다음뷰애드가 적용됩니다.



이제 구글 애드센스를 본문 글쓸때마다 작동으로 적용시키는 방법을 알아보자.

일단 티스토리 관리자 메뉴에 가서 스킨>스킨편집 메뉴로 갑니다. *skin.html 에 보시면 <div class="article"> 찾으시기 바랍니다.

보통 텍스트로된 글을 하나하나 찾으시는 분들이 계신데 그렇게 찾으면 시간도 오래 걸리지만 엄청 힘든 작업이랍니다. 그렇기에 텍스트 검색 기능을 이용하시면 편하게 찾을수있답니다.

우선 ctrl+F 를 눌러서  요렇게 생긴 탐색창을 불와서 찾고 싶은 글을 적은후 검색하면 문장내에서 그 문장이 있는 위치로 이동합니다..



찾으셨다면 이제 아래 skin.html 내용중에서
 파란색으로 표시된 부분 사이에  자신의 구글 애드센스 소스 넣으시면 됩니다. 아래 빨간색으로 표시된 부분이 애드센스 소스코드가 적용된 글입니다. 아래 코드를 그대로 넣으면 저한테 수익이 오니까.. 반드시 본인 코드를 구글에서 복사후 적용하시기 바랍니다.
다음은 style.css   파란색 글을 적어서 넣으시면 됩니다.

이 부분은 복사하실수 있도록 댓글란에 적어두겠습니다.
이렇게 두가지 작업을 수행하셨다면 저장후 나오시면 됩니다.
참고로 style.css의 소스내용중 상하 좌우 공백을 결정하는 픽셀명령어가 있는데 제가 알아서 적용시켜둔 값이니까 따로 설정하실 필요는 없을겁니다. 혹시 공백을 바꾸고 싶으신 분은 댓글주세요
 

①- skin.html 에 추가할 내용 -

<div class="article">

[##_article_rep_desc_##]</div>

---------------------------------------------------------------

②- style.css 에 추가할 내용 -


.google_ad{
float:left;
margin: 20px 15px 33px 50px;
}

참고로 블로그 글을 발행할때 광고를 몇개나 넣을지는 본이이 결정하는 것이지만 너무 많은 광고가 노출될때는 노출 단가가 낮아져서 수익이 줄어들게 되어 있습니다.  굳이 그렇지 않더라도 좀 지저분해질수있으니 잘 알아서 배치하시길 바랍니다.

그리고 요즘 자주 질문하시는 내용중 왜 구글 광고가 어떤 페이지에서는 나타나지 않느냐고 하시는데
구글 광고는 한 페이지에 최대 3개의광고만 뜨게 되어 있답니다. 그러니 그이상 올리시면 자동으로 나머지 광고는 나타지 않게 되는 거랍니다.

허접한 글입니다만 질문하신분들께 많은 도움이 되시길 빌어요~
나름 힘들여 가면서 적었으니 도움이 되셨다면 클릭한번 해주세요 ^^;;;;
그럼 즐거운 하루보내세요~~~

  • Favicon of http://ghostjin.tistory.com BlogIcon Ghost JiN 2010.08.09 16:50 신고

    .google_ad{
    float:left;
    margin: 20px 15px 33px 50px;
    }

  • Favicon of http://soul-stitch.com BlogIcon 니들우먼 2010.08.09 18:15 신고

    고마운님~~답변이 절대 늦은건 아니구요.방금 나란히 나온다고 하셨는데
    지금은 어떤지 한번 봐 주릴런지요.~~&&
    제가 참 귀찮게 하는것 같아서 죄송합니다.
    제 컴엔 아직도 반쪽씩 아래위로 뜨거든요.

  • Favicon of http://whiteink.kr BlogIcon 하얀잉크 2010.08.10 01:19 신고

    댓글에 적어주신 건 style.css 에서 어디에 넣어야 하는건가요? 아무데나 상관없나요?

    • Favicon of http://ghostjin.tistory.com BlogIcon Ghost JiN 2010.08.10 11:03 신고

      네 아무곳이나 명령어 끝나는 곳에 넣으셔도 괜찮은데 저 같은 경우느 제일 상단에 넣었답니다. 즐거운 하루 보내세요

    • Favicon of http://whiteink.kr BlogIcon 하얀잉크 2010.08.10 14:50 신고

      적용했습니다.... 정말 감사합니다. ^^

    • Favicon of http://ghostjin.tistory.com BlogIcon Ghost JiN 2010.08.10 16:43 신고

      적용되셨다니 너무 너무 축하드립니다~
      저도 적용됐을때 무지 기뻤는데 ㅎㅎㅎ
      즐거운 하루보내세요~

  • Favicon of http://sajawamg.tistory.com BlogIcon 사자왕 2010.08.10 08:16 신고

    모르는 분들을 위하여 수고해주셔서 감사합니다.
    도움이 되겠습니다.

    • Favicon of http://ghostjin.tistory.com BlogIcon Ghost JiN 2010.08.10 11:04 신고

      도움이 되신다니 너무 행복하내요~ 사자왕님도 즐거운 하루 보내세요~

  • Favicon of http://soul-stitch.com BlogIcon 니들우먼 2010.08.14 19:14 신고

    저~~위에 강아지 보러 왔답니다.ㅋ
    저란 표정을 어떻게 잡았는지 사실인가요?
    즐거운 주말 보네세요~~~~~

    • Favicon of http://ghostjin.tistory.com BlogIcon Ghost JiN 2010.08.14 19:27 신고

      앗 니들우먼님 또오셨군요~ㅎㅎㅎ
      저사진 인터넷에 돌아다니는 사진인데 사람처럼 보이려고 눈매랑 입가를 포토샵으로 작업한거 같아요~ㅎㅎㅎ
      그래서 더 귀여워보이죠? 니들우먼님도 즐거운 주말보내세요



티스토리 툴바