친절한효자손 취미생활

FastBoot 스킨을 사용하시는 분들을 위한 꿀팁! 구글 애드센스의 위치를 본문 중 우측 상단에 넣고자 하시는 분들에게 반드시 필요한 내용이다. 필자도 세컨 블로그를 현재 FastBoot으로 시험 적용중에 있고, 완벽하게 적응이 되면 지금 이 메인블로그에도 완벽하게 적용시킬 계획이다.

이 방법은 FastBoot 을 제작하신 Readiz님의 글을 인용한 것이며 좀 더 쉽게 적용시킬 수 있도록 필자 나름 방법을 좀 정리해서 적어본 내용이다. 중요한 것은, Fastboot 스킨 외에 다른 티스토리 스킨에는 적용이 되는지에 대한 여부는 확신할 수 없다.


피가되고 살이되는 블로그, 친절한효자손 취미생활!

글, 사진 및 이미지 ▶ CopyLeft(C) 유길용

#CopyLeft(C) 는 저작권의 반대개념으로, "모든것을 공유한다" 는 뜻 입니다#




FastBoot 본문 오른쪽(우측) 상단 애드센스 넣기


현재, 필자의 세컨드 티스토리를 보면 Fastboot 스킨이 적용되어 있으며, 본문의 내용 중, 오른쪽 상단에 애드센스가 자리잡고 있음을 확인할 수 있다.




데스크탑에서는 이렇게 광고가 노출되고 있다. 그러면 모바일에서는 어떤가?




모바일에서는 이렇게 200x200 의 작은 정사각형으로 애드센스가 보여진다. 반응형이라 이렇게 모바일과 PC에서 광고 크기가 바뀐다. 이건 어떻게 하는 것이 좋을까?


우선, 자신의 애드센스 코드를 가지고 와야 한다. 구글 애드센스에 들어가서 새로 광고를 개설해도 되고, 기존 반응형 광고코드를 써도 상관 없다.




구글 애드센스로부터 적용시키고자 하는 반응형 코드를 가지고 온다.




메모장에 붙여넣는다. 여기서 필요한 부분은, 저 client 안쪽의 큰 따옴표 ("") 안의 내용과 바로 그 아래에 있는 slot 다음 큰 따옴표 안의 숫자 코드 부분이다. 나머지는 필요 없다. 지금 파란색으로 지워져 있는 저 부분이다. 이 부분만 후에 나올 수정된 애드센스 코드의 특정 부분에 붙여넣기만 하면 된다.




자, 바로 적용시켜보자. 관리자에서 HTML/CSS 편집 부분으로 들어간다.




Ctrl + F를 눌러서 검색을 한다. ##_article_rep_desc 까지 검색하면 딱 하나가 나올 것이다.




이렇게 검색이 되었다. [##_article_rep_desc_##] 의 바로 위에 이제 수정된 애드센스 코드를 붙여넣기만 하면 된다. 코드는 다음과 같다.




첨부파일

오른쪽상단 애드센스 200x200.txt

모바일 본문상단 320x100 애드센스.txt

모바일 본문상단 300x250 애드센스.txt


여기서는 세가지 버전을 준비해 보았다. 하나는 모바일에서 200 x 200 크기의 우측에 정렬이 되는 애드센스고, 다른 하나는 모바일에서 흔히 사용하는 320 x 100 크기의 애드센스다. 마지막 하나는 300 x 250 사이즈다. 셋 다 데스크탑 크기는 같고, 모바일에서 광고가 다른 세가지 버전이다.


첨부파일의 텍스트를 보면 저렇게 client 부분과 slot 부분의 큰 따옴표 안에 아까 애드센스 코드를 붙여넣기만 하면 된다. 간단하다.




그리고 이렇게 붙여넣고 저장을 누르면 끝이다. 한번 확인해보라. 멋지게 적용된 모습을 볼 수 있을 것이다. 끝.


FastBoot 본문 하단 카테고리 다른글 보기 왼쪽에 애드센스 넣기

[친절한효자손] 티스토리 블로그 사용법



"친절한효자손 취미생활" 을 검색!


알리익스프레스 할인

이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유합시다

facebook twitter googleplus kakaostory naver

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

  1. 이전 댓글 더보기
  2. Favicon of https://aimtot.tistory.com 해밝세상 2017.01.03 17:00 신고

    네 효자손님 진심으로 감사드립니다. 전 티스토리 전용앱의 차이도 첨 알았습니다. 늘 번창하는 블로그가 되기를 진심으로 바랍니다.

  3. Favicon of https://aimtot.tistory.com 해밝세상 2017.01.03 17:05 신고

    지금 인터냇에서 확인해보니 잘 나오네요. 광고창이 너무 중간쯤에 보이는데 이건 애드센스규정에 괜찮을까요?혹시 오른쪽으로 광고창을 붙이는 방법도 있나요?거듭 염치없이 문의합니다.

  4. Favicon of https://aimtot.tistory.com 해밝세상 2017.01.03 17:08 신고

    네 애드센스 대박나세요^^

  5. 2017.01.03 17:12

    비밀댓글입니다

  6. Favicon of https://testtest2016.tistory.com 아싸리2 2017.01.29 12:35 신고

    320사이즈 해도된가요??

  7. Favicon of https://official-cloud.tistory.com _cloud_ 2017.01.30 17:37 신고

    질문있습니다!
    플러그인으로 하지 않고,
    html 을 수정해서 광고를 넣는 이유는 뭔지 여쭤봐도 될까용?

    플러그인이 간편한데, 왜 코드로 광고를 넣으셨는지 궁금합니다!

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2017.01.30 17:39 신고

      상단 같은 경우는 모바일에서 200x200 사이즈로 넣으려고 그렇게 한 것이구요, 하단은 카테고리 다른글 왼쪽에 넣고 싶어서 수동으로 넣었습니다~!

  8. Favicon of https://hyeonsul01.tistory.com 키헬 2017.02.10 02:04 신고

    홈 메인의 상단 광고, 리더보드 크기가 가로도 더 길며, 세로로 넓게 크게 만들어 놓으셨던데 이 방법에 대해선, 따로 방법을 포스팅 해주실 수 있으신가요?

  9. Favicon of https://libertykorea.tistory.com 득템 2017.02.24 13:52 신고

    안녕하세요! 오늘 애드센스 광고 붙여넣었는데 이상하게 화면에서 보이지가 않네요... 제꺼 한번만 봐주실수 있나요? 그냥 위에 부분이 하얗게만 나옵니다.... ㅠㅠ
    http://libertykorea.tistory.com/49

  10. Favicon of https://yuleehan.tistory.com 율리한 2017.03.05 01:00 신고

    ㅠㅠ 친절한 효자손님 안내대로 fastboot 1.6.2로 스킨 수정하고 우측 상단에 광고를 넣고 싶어서 그대로 수정해서 저장했는데 왜 우측 상단으로 안나올까요 ㅠ

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2017.03.05 01:13 신고

      안녕하세요! 블로그가서 살펴보니... 플러그인에 그냥 그대로 넣으신 것 같아요. 혹시 잘 안되서 그냥 플러그인에 넣은건가요?

  11. Favicon of https://yuleehan.tistory.com 율리한 2017.03.05 09:47 신고

    네.336×280 사이즈 광고 코드 만들고 효자손님이 첨부하신 파일 코드에 제 애드센스 코드 넣어서 수정했어요.그 담에 관리자에서 html 코드 넣으라는 곳에 삽입했는데 구현이 안되더라고요 나오더라고요.그래서 그냥 코드 다시 지우고 상단광고로 그대로 넣었어요.ㅜ

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2017.03.05 21:58 신고

      엇? 반응형 스킨으로 제작하시는 겁니다. 고정형 스킨이 아니에요.

    • Favicon of https://yuleehan.tistory.com 율리한 2017.03.05 22:02 신고

      결국엔 잘 모르겠어서 데스크탑웹 우측 상단광고로 했어요.이래도 문제 없겠지요?ㅜ

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2017.03.05 22:05 신고

      안됩니다. 모바일에서도 그대로 출력되기 때문에 정책위반에 걸려요. 크기가 너무 커져서요. 모바일에서는 크기가 작아지는 반응형으로 바꾸셔야해요.

    • Favicon of https://yuleehan.tistory.com 율리한 2017.03.05 23:42 신고

      제가 뭘 잘못하고 있는지 모르겠어요. 애드센스 반응형 코드 상단,하단용으로 각각 받았어요. 모바일 상단용은 320x100 크기로 코드를 받았고요.

      플러그인도 모바일(320x100) 상단만으로 설정, 반응형(상하 모두 반응형)으로 설정

      그리고 효자손님 320x100 첨부파일 다운 받아서 반응형 번호 각각 붙여넣기 하고 html에 붙여넣었습니다. pc화면에서는 우측 상단 광고는 이제 잘 나와요

      그런데 문제점이 2가지가 생겼어요

      1. pc화면일 때 하단형 광고가 나오지 않고 우측 상단광고 바로 밑에 가로형 광고가 본문 위에 붙여짐

      2. 모바일 화면에서 320x100이 오른쪽 상단보다는 전체가로형으로 보임. 광고가 중간에 2개, 하단에 2개 나옴

      분명히 알려주신대로 했는데 왜 이럴까요 ㅠㅠ

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2017.03.06 00:07 신고

      넵 반응형코드로쓰세요

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2017.03.06 01:55 신고

      반응형코드는 상단 하단 개념이 없습니다. 제가쓰는 방법은 순수한 반응형코드를 가지고 와서 코드를 수정하는 과정입니다. 지금 이 게시글이 그것이구요. 고졍형태 광고들은 모두 반응형이 아니에요. 반응형은 형태가 없습니다. 사이즈가 정해져 있지 않지요.

  12. Favicon of https://hwanggunstory.tistory.com InFoMania 2017.03.05 20:54 신고

    감사합니다 프로그래밍 전공하셨는지 이렇게 세세하고 어려운부분을 대체 어떻게 아시는지 정말 대단하십니다!

  13. 2017.04.11 19:02

    비밀댓글입니다

  14. 2017.04.11 23:48

    비밀댓글입니다

  15. 2017.08.27 18:34

    비밀댓글입니다

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2017.08.27 18:58 신고

      Q. 텍스트 집어 넣었는데 본문 글에 영어로 " data-ad-slot=" 어쩌고 저쩌고 뜨는데
      어떻게 해야하나요? 똑같이 따라했는데도 안되네요 ㅠㅠ

      A. 현재 어떻게 넣으신 상황인지 모르니 제가 답변을 드릴 수 없습니다.ㅠㅠ 그리고 비밀댓글의 경우는 답변을 안해드리고 있어요. 댓글도 하나의 정보의 공간이기 때문입니다. 아마 다른분들 모두 비밀댓글로 달아서 그렇게 하셨으리라 생각됩니다. 그냥 편하게 댓글 달아주시면 될 것 같습니다.

  16. Favicon of https://mashemellong.tistory.com 마시멜롱 2017.11.23 10:18 신고

    안녕하세요~ 티스토리를 시작하면서 효자손님 덕분에 많이 배우고 있는 한사람입니다~ 여기에 여쭤봐도 될런지 모르겠지만 한가지만 여쭤봐도 될까요? ㅠㅠ 블로그 홈에서는 사이드바에 애드센스 광고가 잘 노출되는데 어느순간부터 본문을 열면 사이드바에 애드센스광고가 노출이 안되는현상이 발생하고 있어요~ ㅠㅠ 효자손님이라면 뭔가 알고계시지 않을까하여 이렇게 여쭤봅니다. 추운데 건강관리 잘하셔요~!!

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2018.01.22 16:47 신고

      안녕하세요! 아이고...이제 봤어요. 죄송합니다. ㅠㅠ RSS 설정 부분에서 15개로 맞춰보시겠어요? http://rgy0409.tistory.com/1539 이 글을 참고해보세요.

  17. Favicon of https://mattstory.tistory.com          2018.01.22 10:19 신고

    이전에 쓴 글이 몇 백개가 되는데 포스팅 방식대로 하면 새로 쓰는 글 뿐만아니라 지난 글들 우측 상단에도 자동으로 붙여지나요?

  18. Favicon of https://mattstory.tistory.com          2018.01.23 15:15 신고

    답변 감사합니다. 이전 글들에 광고를 2개씩 이미 달아놨는데 우측 상단을 추가하면 총3개가 돼서 너무 많이 달리는게 아닌가해서 좀 조심스럽네요. 사이드바까지 하면 어떤 글에는 총4개의 광고가 달리는 꼴이 돼서요. 일일이 다 수정해주기엔 너무 양이 많고 한데 적절한 방법이 있을까요? 앞으로쓰는 글에만 우측 상단에 달리게 할 수도 있을까요?

  19. Favicon of https://eungigs.tistory.com 은긱스 2018.01.26 10:21 신고

    할까 말까 고민하다가 드디어 적용했습니다. 항상 감사합니다.

  20. Favicon of https://pj6083.tistory.com 늘봄나봄 2018.10.03 17:06 신고

    안녕하세요. 예전에도 문의드렸는데, 시간이 지나고 우측상단이 계속 광고가 안 떠서 재문의드립니다.
    1, 다음 애드핏 광고 모두 삭제
    2. 기존에 만든 반응형 광고 사용(텍스트/이미지 반응형)
    3. 본문에 올려주신 200x200 텍스트 파일에, data-ad-client, data-ad-slot 부분에 숫자 적용 후 html에서
    바로 위에 붙여넣고 저장버튼 클릭
    4. 하얗게 보이고 광고 안뜸. 몇번을 알려주신대로 해도 계속 그러네요. 왜 그런지 모르겠어요. ㅠㅠ 이거 해결하고 본격적으로 본문에 광고를 넣으려고 합니다.

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2018.10.04 00:10 신고

      안녕하세요, 광고가 안 나오는 이유는 스킨마다 구조가 달라서 저 역시 뾰족한 이유는 알 수 없습니다. 하지만 Fastboot 스킨은 RSS 설정해주는 부분의 숫자랑 사이드바의 최근 글 갯수랑 맞춰야 하는 버그가 있습니다. 그리고 보안연결 설정하시면 일수 스킨에서 스크립트 오작동이 있는걸로 알고 있는데 이건 Fastboot를 제작하신 분만 알겠죠?

  21. Favicon of https://deunsil.tistory.com 든실이 2019.08.26 00:00 신고

    글 잘 읽었습니다.

    친절한 효자손님 이 글 뿐만 아니라, 아직 시작한지 얼마 안되서 다른 유익한 글 많이 읽고 있습니다.

    다름이 아니라, 제가 본문 오른쪽 상단 광고를 넣기 위해, 위 방법대로 실시한 결과, PC는 정상적으로 작동//

    하지만, 모바일에서는 계속 상단으로 빠져(?)나온 상태로 노출 됩니다. 마치 본문 상단 광고 넣은 것 처럼 말이지요.


    이 부분때문에 3시간 동안 끙끙 앓고 있습니다. 반응형 코드를 이용하여 메모장 삽입 후, HTML 적정 위치에 삽입/

    엄청 간단한 프로세스인데, 모바일에서는 왜 이런 현상이 발생하는지 오히려 너무 간단해서 답답한 상황입니다.

    둘 다 노출이 안되었으면, 실수했거나 코드 잘못 넣었다고 볼 수 있는데, 그것도 아니니 어찌해야할지 모르겠습니다.

    심지어, 글상자가 있어서 안되나 싶어, 글상자 없이 글만 적고 비공개 발행 후, 테스트 하여도 오른쪽 상단에

    200X200으로 들어가지 않고 위로 반응형 광고가 노출되는 상황입니다.

    글 읽어주셔서 감사드리며, 한번만 자문 부탁드립니다.

    p.s 다른 게시글(본문 오른쪽 상단 삽입) 구글링하여도 저와 비슷한 사례가 발견되지 않았습니다.

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2019.08.26 09:04 신고

      안녕하세요, 새롭게 만든 우측상단 광고 코드를 업데이트 했습니다. 현재 예약글이고 8월 28일에 업데이트 될 예정 입니다.

    • Favicon of https://deunsil.tistory.com 든실이 2019.08.26 13:38 신고

      답변 감사합니다.

      새로 업데이트한 우측상단 광고코드 글이 저의 모바일에서 위로 빠지는 문제하고 관련이 있는 것인지 궁금합니다.