엠원베이직 (M1basic) 애드센스 광고 넣는 방법 (권장) :: 엠원스킨

우선 엠원스킨, 엠원베이직 스킨을 사용해주셔서 감사합니다 ㅎㅎ 광고 넣는 방법을 알려드리겠습니다. 권장 위치인데요, 사이드바의 탑, 사이드바 중간, 본문 하단 그리고 모바일 하단.. 이렇게 알려드리겠습니다. 다른데 넣으셔도 됩니다만, 권장 위치에 넣으시면 더 깔끔할겁니다. 검증이 된 위치이기 때문입니다.

 

 

1. 우선 블로그관리홈에서 좌측메뉴의 HTML/CSS 편집을 클릭하세요.

 

 

 

2. 먼저 본문상단우측에 300x250 광고 or 336x280 광고 or 본문상단에 728x90 광고 or 본문상단에 336x280x2 (좌우로 2개)를 넣어보겠습니다. 아래 사진의 빨간줄 부분에, 아래 첨부파일소스를 넣어주시면 됩니다.

 

본문 상단 우측 광고 300x250 소스.txt

본문 상단 우측 광고 336x280 소스.txt

본문 상단 광고 728x90 소스.txt

본문 상단 광고 336x280x2 소스.txt

 

 

3. 이번엔 300x250 사이드바 탑고정 광고를 넣어보겠습니다. 만약 2번과정을 하셨다면 이부분은 경우에 따라 생략하셔도 됩니다. 광고가 좌우로 붙어있게 되서 보기가 좀 안좋을수가 있습니다. 반대로 이부분에 넣고, 2번과정을 생략해도 됩니다. 자신의 취향대로 하세요 ㅎㅎ HTML 편집 모드에서 소스를 살펴보시면 아래와 같은 부분이 나옵니다. 검색은 <s_sidebar>로 하시면 되겠네요. 그러면 <s_sidebar> 바로 뒤에 자신의 광고 소스를 넣으시면 됩니다. 그냥 넣으시면 안되고요. 아래 첨부된 소스를 활용해서 넣으셔야 합니다. 아래 소스를 보시면 '광고소스' 라고 되어 있는 부분을 지우시고 그 자리에 자신의 광고 소스를 넣으신 후, 전체소스를 복사해서 위에 설명드렸던 자리에 넣으시면 됩니다.

 

사이드바 광고 300x250 탑고정 소스.txt

 

 

 

저장하시고 확인해보실까요? 아래 사진처럼 잘 뜨시나요? 광고의 경우 애드센스 기준인데, 애드센스가 승인이 나서 광고가 잘 나오는 상황이어야 합니다. 그렇지 않으면 잘 안나오겠죠? 그리고 애드센스말고도 클릭몬같은 경우도 동일한 방법으로 가능합니다. 그 외 광고도 사이즈만 맞으면 가능합니다.

 

 

 

4. 세번째는 사이드바 중간 위치에 300x250 광고 or 250x250 광고 or 300x600 광고를 넣어보겠습니다. 아래 사진을 보시면 빨간줄이 있는 곳에 넣을겁니다. 250x250 광고는 개인적으로 3단탭 바로 하단에 광고가 들어가면 좋을 것 같습니다. 역시 광고 소스를 첨부하였습니다. 위와 동일한 방법으로 하시면 되고요. 300x250이나 300x600은 사이드바 가장 하단쯤에 위치시키는게 좋을 것 같습니다. 입맛대로 하시면 되겠습니다.

 

사이드바 광고 250x250 중간형 소스.txt

사이드바 광고 300x250 중간형 소스.txt

사이드바 광고 300x600 중간형 소스.txt

 

 

 

 

역시 잘되는지 확인을 해보겠습니다. 아래 사진처럼 잘 뜨십니까? ㅎㅎ 아래 스샷에는 제목이 클릭몬이라고 되어 있는데, 광고가 애드센스면 애드센스라고 수정하시면 됩니다. 제목 수정도 위 소스에 들어가 있습니다. 기본은 애드센스라고 타이틀이 되어 있습니다.

 

 

 

5. 이번에는 본문 하단에 728x90 광고 or 336x280x2 (좌우로 2개)를 넣어보겠습니다. 아래 사진처럼 빨간줄 부분을 찾아주세요. [##_article_rp_desc_##] 부분 바로 아래에 소스를 넣어야 합니다. 역시 소스를 첨부하였습니다. 엠원베이직스킨은 본문 가로 사이즈가 728px로 설정되어 있어서 가로 728 광고를 구현하는것이 최적화되어 있다고 보시면 됩니다. 여유분으로 3개 소스가 준비되어 있습니다. 하단에 연달아 배치할 경우 순서대로 사용하세요.

 

본문 하단 광고 728x90 소스1.txt

본문 하단 광고 728x90 소스2.txt

본문 하단 광고 728x90 소스3.txt

본문 하단 광고 336x280x2 소스.txt

 

 

 

자 또 확인해보실까요? 적절하게 하단에 위치했네요 ㅎㅎ 만약 텐핑같은 다른 광고를 동일한 부분에 넣을시에는 간격을 조금 조정해주시기 바랍니다. CSS편집모드에서 <!-- 광고 s --> .. <!-- 광고 e -->라고 되어 있는 부분에서 관련 소스를 수정하실 수 있습니다. 만약 이 부분이 찾아도 없다면, 구 버전의 스킨을 사용하고 계신겁니다. 업그레이드 해주세요 ㅎㅎ

 

 

 

6. 이번에는 검색결과, 카테고리 페이지 상단에 728x90 광고를 달아보겠습니다. 역시 아래 사진의 빨간줄 표시부분에, 아래 첨부파일소스를 넣어주시면 됩니다.

 

검색결과, 카테고리 페이지 상단 728x90.txt

 

 

 

7. 자~ 이번에는 아래 사진처럼 바깥쪽 우측에 160x600 광고를 넣어보겠습니다.

 

 

 

우선 아래 사진의 빨간줄 부분을 찾아서, 아래 첨부소스를 넣어주시면 됩니다. 역시 소스안에 '광고소스'라고 되어 있는 텍스트를 지우고, 본인의 광고를 넣어주세요.

 

아웃사이드 우측 광고 160x600 소스.txt

 

 

8. 이번엔 모바일에 광고를 넣어보겠습니다. 우선 블로그관리홈에서 플러그인을 클릭하세요.

 

 

 

그리고 아래 사진처럼 구글 애드센스 (모바일) 부분을 클릭하세요.

 

 

 

그러면 아래 사진처럼 광고 위츠를 선택할수가 있고, 위치를 선택하게 되면 하단에 소스를 넣는 칸이 나옵니다. 그곳에 적절한 광고 소스를 넣어주시면 됩니다. 간단하죠?

 

 

이렇게해서 권장하는 곳에 모두 넣어봤습니다. 사실 말이 권장이지, 넣고 싶은곳에 넣으셔도 됩니다. 하지만 권장이 괜히 권장은 아니겠죠? ㅋㅋ 이상입니다.

댓글(23)
  1. BlogIcon 조르바스토리 2018.01.07 15:22 신고 댓글주소  수정/삭제  댓글쓰기

    처음 시작하는 블로그인데 덕분에 힘이 됩니다.고마워요

  2. 홍씨냠냠 2018.01.11 14:34 신고 댓글주소  수정/삭제  댓글쓰기

    엠원님, 본문 글 옆에 넣는 법도 한번 알려주세요.

  3. BlogIcon 내 인생 2018.01.13 11:15 신고 댓글주소  수정/삭제  댓글쓰기

    감사합니다 스킨 설치했어요 너무 심플하게 잘 만드신듯 감사하고 새해 복많이 받으세요.

  4. BlogIcon 내 인생 2018.01.17 16:06 신고 댓글주소  수정/삭제  댓글쓰기

    http://eliminate123.tistory.com/

    1. 본문우측상단으로 넣었는데 좌측에 뜨네요 ㅠㅠ

    2. 160x600은 제가 넣어봤는데 메인이 엠원님이랑 달라서 광고가 글 맨위로 올라가더라고요 ㅠㅠ 그래서 지웠음..
    티에디션으로 수정해야하나요

    3. 사이드바중간 300 250으로 해서 똑같이 넣었는데 일부가 잘리더라고요 왜그러죠..

    죄송해요 질문이 많아서 제가 다시 일단 해볼게요

    • BlogIcon 엠원 #관리자 2018.01.17 16:38 신고 댓글주소  수정/삭제

      CSS에 연동되어 있는 코드라, CSS에 관련 코드가 누락되어 있으면 제대로 구현이 안됩니다 ㅎㅎ 현재 스킨다운로드에는 적용이 되어 있고요, 구 버전 스킨을 쓰시고 있으면, CSS에 관련 내용을 넣으셔서 업그레이드 해야 합니다. 새로 스킨을 다운로드하셔서 style.css 열어보시면 <!-- 광고 s --> .. <!-- 광고 e --> 라고 되어 있는 부분을 복사해서, 현재 스킨의 관련부분을 삭제하고, 복사한 것을 넣으시면 됩니다.

    • BlogIcon 내 인생 2018.01.18 10:39 신고 댓글주소  수정/삭제

      귀찮게 해드려서 죄송합니다. 본문우측상단 수정 성공했습니다. 이 본문으로 했을떄 왼쪽으로 나왔는데 20일날 올리셨던 26번글로 하니까 제대로 나왓네요 감사합니다.
      사이드바 중간은 사이즈 제대로 안나오지만 그냥 하는게 나을 것 같아요 버전은 1.1최신버전입니다.

    • BlogIcon 엠원 #관리자 2018.01.18 11:37 신고 댓글주소  수정/삭제

      아뇽 전혀 안귀찮습니다. 이런 피드백 좋아합니다 ㅎㅎ 스킨을 개선하는 과정에서 버전이 1.1이지만, 알게모르게(?) 업데이트가 더 되었고, 매뉴얼글도 따라서 업데이트가 된 경우가 있습니다. 그래서, 그 찰나에 작업을 하시는분은 혼동이 좀 있을 수 있습니다 (__)꾸벅~ 코드가 좀 바뀌어서 그럴겁니다. 매뉴얼의 코드와 스킨안의 CSS코드와 일치를 시켜야 제대로 구현이 되는 것이죠. 예를들어, 광고코드중에 ad_300x250_content_top_right 이라는 것이 있었다면, top하고 right하고 위치가 바뀌었다든지 ... 그러면 오류가 나기 마련이거든요. 조만간 반응형도 선보일 예정이니, 자주 놀러오세요.

  5. BlogIcon 친절한 한이사 2018.01.19 09:05 신고 댓글주소  수정/삭제  댓글쓰기

    엠원님, 모바일에서는 광고가 노출이 않되던데 맞는건가요? 엠원님 블로그도 모바일에서는 상단에 광고 노출이 않되요

    • BlogIcon 엠원 #관리자 2018.01.19 12:32 신고 댓글주소  수정/삭제

      아뇽 ㅎㅎ 현재 스킨은 일반형이라, 애드센스모바일전용 플러그인으로 설정을 해줘야 광고가 나옵니다. 제가 그걸 설정 안했네요 ㅋㅋ 링크글을 참고하세용 ㅎㅎ

      http://m1story.tistory.com/39

  6. BlogIcon AD_COMA 2018.01.23 13:53 신고 댓글주소  수정/삭제  댓글쓰기

    안녕하세요 좋은스킨감사드립니다!
    우측사이드바에 160*600 광고소스를 적용했는데 오른쪽으로 쏠려서 보이는데요 ㅠ
    오찌해야될까요^^;

    • BlogIcon 엠원 #관리자 2018.01.23 14:00 신고 댓글주소  수정/삭제

      확인해봤는데요, 잘 나오던데요? ㅡ ㅡㅋ ㅎㅎ.. 그리고 사이드바에 광고 넣으신거는 반응형으로 넣어주면 알아서 가로사이즈가 250으로 안으로 맞춰서 나오더라고요. 그러면 지금처럼 옆으로 삐져나오지 않을겁니다 ㅎㅎ 아니면 광고설정 가이드라인에 포함되어 있는 300x600 광고코드를 적용하시면 될 것 같습니다.

  7. BlogIcon AD_COMA 2018.01.23 14:05 신고 댓글주소  수정/삭제  댓글쓰기

    아코답변감사합니다
    죄송한데 300*600 짜리가 쏠려보이는거였어요 ㅠㅠ
    반응형으로 했는데도 쏠려보이거든요 ㅠㅠ
    완전바깥쪽 160*600은 잘됩니다 ㅠ

    • BlogIcon 엠원 #관리자 2018.01.23 14:13 신고 댓글주소  수정/삭제

      소스를 보니깐

      style="display:inline-block;width:300px;height:600px"

      300, 600으로 지정이 되어 있습니다. 반응형 소스가 아닙니다. ㅎㅎ 광고소스를 확인해보세용 보통 반응형은 style="display:block" 이라고 되어 있고, 포맷관련소스에 auto라고 되어 있습니다

  8. BlogIcon AD_COMA 2018.01.23 14:19 신고 댓글주소  수정/삭제  댓글쓰기

    번거롭게 해드려서 죄송해요
    제가적용한 소스가
    <!-- 광고 300x600 중간형 위젯 s --><s_sidebar_element>
    <!-- 광고 300x600 중간형 -->
    <div id="sidebar_plus">
    <div class="title">애드센스</div>
    <div class="widget">
    <div class="ad_300x600_side_mid">
    <!-- 광고 300x600 ★사용자 수정★ s -->
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- 18사이드바300*600 -->
    <ins class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-9275171418851899"
    data-ad-slot="8546815880"
    data-ad-format="auto"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    <!-- 광고 300x600 ★사용자 수정★ e -->
    </div>
    </div>
    </div>
    </s_sidebar_element>
    <!-- 광고 300x600 중간형 위젯 e -->

    이렇게 변경해도 쏠리는데 흑 무엇이잘못된걸까요 ㅡㅜ

    • BlogIcon AD_COMA 2018.01.23 14:40 신고 댓글주소  수정/삭제

      감사합니다
      말씀하신데로 적용하니
      똑같이보여지네요 ㅎㅎ
      무지무지감사합니다.

    • BlogIcon 엠원 #관리자 2018.01.23 14:42 신고 댓글주소  수정/삭제

      앗!! 제가 소스 잘못 넣었는데요 ㅋㅋ; 수정해야겠습니다. 300x250하고 300x600 소스 둘다 잘못넣은거 같은데요. 광고설정가이드라인의 삽입소스하고, css 소스 둘다 수정해야겠네요 어흐.. 발견감사감사 ㅎㅎ 일단 조금 기다려주세용

    • BlogIcon 엠원 #관리자 2018.01.23 14:56 신고 댓글주소  수정/삭제

      광고설정 글에서 가이드라인용으로 첨부했던 소스에 문제가 있었네요. 지금은 수정해놨습니다. 300x250 중간형, 300x600 중간형 이 두 소스가 문제가 있었네요.

    • BlogIcon AD_COMA 2018.01.23 15:01 신고 댓글주소  수정/삭제

      감사합니다
      다시적용했습니다^^

  9. BlogIcon uthline 2018.03.01 20:02 신고 댓글주소  수정/삭제  댓글쓰기

    어떻게 넣나 찾아보고 있었는데, 이것도 역시 설명을 해주셨네요.. 스킨 제작에 활용 팁까지 철저하게 작성해주셨네요. 감사하게 잘 쓰고있습니다.

  10. BlogIcon 새로고침(F5) 2018.04.08 22:26 신고 댓글주소  수정/삭제  댓글쓰기

    제 설정 화면에서는 html/css 편집 메뉴가 안 뜨는데, 어떻게 해결할 수 있을까요?

티스토리 툴바