애드센스 반응형 적용된 마크쿼리 스파이더웹 소스 공유

몽리 블로그 스킨, 마크쿼리 스파이더웹 소스 공유

이 글을 blah blah blah로 분류해야 할지 블로그팁으로 분류해야 할지 엄청 고민했습니다. 약 1분간 말이죠. 제가 직접 만든 스킨이 아니기에 blah blah blah로 넣을까 했었지만 이게 그래도 나름 블로그팁이잖아요. 그래서 블로그팁에 우겨 넣었습니다. 대체 무슨 소리냐굽쇼?



몽리 꿈속으로 블로그 스킨


여러 블로거들이 몽리 블로그 스킨에 적용한 잡스러운 것들을 자신의 블로그에도 적용하고 싶어 하시네요. 특히 애드센스 부분을 말입니다. 일일이 다 손봐줄 수 없는 노릇이기에 소스를 공개해드리겠습니다. 사실 이거 소스를 공개하지 않더라도 뜯어갈 사람들은 다 뜯어가죠. 잘 모르는 분들은 소스를 그대로 다 줘도 안된다는 것이 문제인데요. 일단 소스 공개하고 시간 날 때마다 하나 하나 차근 차근 글로 설명하겠습니다.


관련 게시물

티스토리 이미지 테두리 설정 방법, CSS border

티스토리 카테고리의 다른글 썸네일 표시 방법

블로그 게시물에서 데드 링크(깨진 링크) 찾는 방법

구글 드라이브를 이용한 파일 공유 방법

디스커스(Disqus) 댓글 숫자 표시 방법

티스토리 댓글의 URL 주소 자동 링크 방법


애드센스 광고 단위 코드


우선 일단 매우 주의해야 하는 부분이 있습니다. 중요한 부분은 바로 애드센스 부분인데요. 공개한 스킨 소스 중에 만약 애드센스 사용자 코드 부분(data-ad-client="ca-pub-숫자숫자숫자"과 data-ad-slot="숫자숫자숫자")이 남아 있다면 절대 절대로 그 소스를 그대로 사용하면 안됩니다. 반드시 자신의 애드센스 코드 소스로 변경해줘야 합니다.


여기서 잠깐! 2개의 애드센스 계정을 하나의 사이트에 운여하는 것은 애드센스 정책 위반입니다. 애드센스 정책 위반 중에서도 가장 강략한 규제가 들어오는 계정 수준의 정책 위반입니다. 본의 아니게 실수로 그랬다 하더라도 계정 비활성 당할 수 있으니 절대 주의하시기 바랍니다. 저도 덤으로 비활성 당하니 더욱 주의를 하셔야 합니다. 암요! 애드센스 소스 중 사용자 소스 코드 부분은 제거 한다고 열심히 제거했는데 혹시 모르니 주의 주의 절대 주의 하십쇼. 만약 눈에 띄면 바로 알려주시고요.




몽리 블로그의 반응형 스킨 마크쿼리 스파이더웹 소스

마크쿼리 스파이더웹(markquery Spider's Web) 4.0 버전이고, skin.html 파일은 구글 드라이브에 올려 놓았으니 필요하신 분들은 다운로드 받아 수정한 후 사용하시면 되겠습니다. 티스토리 블로그의 style.css 파일은 언제든 볼 수 있는 파일이니 살펴 보시면 되겠고요. 몽리, 꿈속으로 블로그의 style.css에서 필요한 부분이 있으면 복사 붙여 넣기 신공을 펼쳐주시면 되겠습니다. 혹시 모르니 스킨 파일은 .html .txt 2개를 스타일 파일은 style.css 1개를 함께 압축하여 올렸습니다. '몽리 블로그의 마크쿼리 스파이더웹 소스'를 다운로드 받으시면 되네요. 당연히 소스 정리는 안되어 있고요. 정리해서 잘 쓰시면 되겠습니다.



수정해야 할 곳은 주석과 텍스트를 이용하여 표시


수정해야 할 곳은 주석과 텍스트를 이용하여 '수정'이 포함되게 간단 설명 추가하였으니 '수정'으로 검색하여 찾으시면 되고요. 수정 작업 다 끝내고 알았는데 댓글 부분의 수정과 '수정'이 겹치니 댓글 부분의 텍스트로 된 수정은 그대로 유지하고 사용하시면 되겠습니다.



인터넷 익스플로러11에서의 카테고리의 다른 글 더 보기 썸네일


익스플로러11에서는 위와 같이 카테고리의 다른 글 더 보기 썸네일이 2단으로 나옵니다. 저거 수정해야 하는데 제가 귀차니즘이 심해서.. 뭐 큰 문제는 없으니 그냥 쓰시거나 수정하고 사용하시면 되겠습니다.



애드센스 반응형 광고 코드 화면 폭에 맞는 광고 크기 지정


아참 그리고 애드센스는 반응형을 이용하는데요. 감싸고 있는 div 박스의 class 값과 애드센스 광고 단위의 class 명을 이용하여 크기, 여백 등을 조절할 수 있습니다. 이에 공개한 style.css 파일의 777줄부터 시작되는 class와 ID를 스킨에 삽입하는 애드센스 광고의 class 명과 일치 시켜 주시면 되겠습니다. 물론 자신의 블로그에 어울리는 것으로 변경하거나 관리하기 편한 것으로 변경해서 적용하시면 되겠고요.


스킨에 애드센스 광고 단위를 추가할 때는 원본 광고 단위 코드 소스에서 class="adsbygoogle" 부분에서  adsbygoogle 뒤에 한칸 뛰고 영문으로 class 명을 추가해 주어야 합니다. 예시 <ins class="adsbygoogle mongritopleft" 그리고 style 부분을 display:inline-block으로 변경해야 하고, 하단의 마지막 줄 data-ad-format="auto" 부분은 제거해주어야 합니다. 구글이 권장하는 방법이니 안심하셔도 됩니다. 마음의 평화를 위해 직접 애드센스 고객센터의 '반응형 광고 코드 수정 방법'을 확인하실 것을 권장드립니다.


애드센스 반응형 광고 단위 원본 소스

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 수정_반응형_본인것으로 -->
<ins class="adsbygoogle"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>


애드센스 반응형 광고 단위 수정 소스 예시
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 수정_반응형_본인것으로 -->
<ins class="adsbygoogle mongritopleft"
     style="display:inline-block"
     data-ad-client="수정ca-pub-xxxxx"
     data-ad-slot="수정xxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>


수정한 애드센스 반응형 광고 소스를 예시 <div class="googleLeft">광고 단위 수정 소스</div>와 같이 div 박스로 감싸주면 됩니다. 광고 단위에 있는 class 명을 이용하여 .css 파일에서 크기 및 간격을 설정할 수 있으니 반드시 수정한 광고 단위 코드 소스의 class 명과 div 클레스 명은 .css의 class 명과 일치 시켜주어야 합니다. 일치 시키지 않으면 크기와 여백 등을 조절할 수 없습니다. 제 멋대로 나오게 됩니다. 끝~


©꿈속으로(mongri.net), 무단전재 및 재배포 금지. 공유와 직접 링크를 선호합니다.
[저작권 규약, 운영 원칙 및 이용자 준수 사항]