친절한효자손 취미생활

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

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


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

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

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




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


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




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




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


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




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




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




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




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




이렇게 검색이 되었다.

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

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


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

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

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




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


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




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




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


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




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




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




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




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




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




첨부파일

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

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

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


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


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




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


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

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



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


의 바로 위에 이제 수정된 애드센스 코드를 붙여넣기만 하면 된다. 코드는 다음과 같다.




첨부파일

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

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

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


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


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




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


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

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



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


공유하기

facebook twitter kakaoTalk kakaostory naver band