Review/Useful Information

블로그 글 상단,하단에 애드센스 컨텐츠 광고 박스 넣기

오늘은어때 2012. 3. 25. 23:03
구글 애드센스를 처음 적용한건 몇년 전인데..
글 이미지에 광고가 끼어드는 걸 원치 않아서 항상 사이드바 정도에만 적용을 해두었습니다.

그러다가, 이번에 티스토리로 옮기면서
한번 가운데 컨텐츠박스도 넣어봐?? 하는 맘이 생겨서 ㅎ 

작업하는데, 가운데에 이쁘게 넣으려니 조금 손이 가더라구요 ㅎ 
그냥 테이블로 짜서 하는건 코드가 지저분하게 느껴져서; ㅋ 

아래와 같이 수정했습니다.
혹시 필요한 분이 있을지 몰라, 올려놓습니다.
-사실... 스킨 이것저것 적용해 본다고 뻘짓하다 소스를 몇번 날려서....제가 필요했어요. ㅠ.,ㅠ

적용예시는 제 블로그를 보시면 아실꺼예요. 
(글 상단에 애드센스 작은 박스 두개 붙였어요)

1. 우선 애드센스 소스 복사해오세요.
2. 티스토리 관리자모드 > 꾸미기 > HTML/CSS편집
3. skin.html 소스 중 
<div class="desc">##_article_rep_desc_##</div>
요녀석 찾으신 뒤에 ##_article_rep_desc_## 이놈 앞에다 아래 소스 붙이시면 됩니당.
(하단에 넣고자 하시면 뒤에다 넣어주세요) 

원래는  ##_article_rep_desc_##  이것 앞뒤로 [] 이렇게 붙어있어요.
티스토리 자체필터링으로 함께 적으면 view 페이지에서 사라져서;; 생략하고 적었으니
소스는 [] 이 표식 앞뒤로 붙여주셔야합니다.

<!-- 애드센스 컨텐츠 광고 박스 script --> 
<div class="addBox">
<div class="contentboxlf">
<<요기에 구글 소스1 붙이세욘>>
</div>
<div class="contentboxrt">
<<요기에 구글 소스2 붙이세욘>>
</div>
</div>
<!-- 애드센스 컨텐츠 광고 박스 -->

4. style.css 소스에 아래 소스 붙이세요.
/* 애드센스 박스 CSS */
.addBox {10 10 10 10;overflow:hidden;width:원하는가로사이즈;vertical-align:middle;text-align:center;}
.addBox .contentboxlf {float:left}
.addBox .contentboxrt {padding-left:10px;float:left} 

5. 본인 블로그 확인 ^^

  
아래는 예시입니다. 제것 ㅎ 

<!-- 애드센스 컨텐츠 광고 박스 script -->
<div class="addBox">
<div class="contentboxlf">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9081747548086465";
/* 300250 중간직사각형1 */
google_ad_slot = "9016697480";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div class="contentboxrt">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9081747548086465";
/* 300250 중간 직사각형 2 */
google_ad_slot = "4786071150";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
<!-- 애드센스 컨텐츠 광고 박스 -->

/* 애드센스 박스 CSS */
.addBox {10 10 10 10;overflow:hidden;width:/*@post-width=*/650px/*@*/;vertical-align:middle;text-align:center;}
.addBox .contentboxlf {float:left}
.addBox .contentboxrt {padding-left:10px;float:left} 

 

참고로 이건 티스토리용이구요.

.
.
이글루스 적용은 조금 다릅니다.
이글루스에서 티스토리처럼 본문 html에 적용하시면..자체적으로 먹어버립니다. -,.- 사라져요.
그래서 위젯 설정으로 가셔야하는데요.
 

우선 스킨 자체가 와이드위젯 적용이 가능한 것으로 설정이 되어 있어야하구요.
이글루스 스킨편집 도움말 - 새스킨만들기 레이아웃  << 요기 보시면 중간부분에 2) 포스트 상단 광고 영역 
이라는 부분이 있어요. 이부분 보시면 레이아웃은 어느정도 이해가 가실겁니다 ^^

구글 애드센스 내 이글루에 붙이기 이 글을 보시면 구글애드센스 붙이는 설명이 되어있습니다만,
지금 적고자 하는 컨텐츠부분 위젯설명은 제대로 나와있지 않더라구요 ㅠ,ㅠ
(하단에 글로 설명되어있어서.. 못봤어요 ㅜ.ㅜ)
그래서 조금 헤맸습니다. ㅎ

우선 컨텐츠 위젯도 다른 위젯과 마찬가지로 내 저장위젯관리에서 등록 가능한데, 적용하는 부분이.

이부분 입니다.
템플릿변경 > 포스트영역 > 와이드위젯

여기서 설정하셔야해요. 따로 위치지정은 안되더군요 ^^;
유의하시고 적용하시게요 ㅎ