티스토리 뷰

* 모르는 HTML 소스가 나온다고 넘어가지 마세요! 차근차근 자세하게 읽어보면 모두 해결하실 수 있으십니다. 그래도 해결이 안되시는 분은 방명록 남겨주세요 ^0^

제 블로그 본문 상단에 위치한 애드센스를 보시면 아시겠지만 위처럼 광고를 꾸며서 독자들의 시선을 끌 수 있게됩니다.
이번 팁은 티스토리 기준으로 설명해드리겠습니다.

먼저 위 상단처럼 하시려면 준비물이 필요하겠죠?

준비물 - 애드센스 코드, HTML 코드, CSS 코드, 백그라운드 이미지

[HTML 코드]

<div id="ad_code">
      <!-- REPLACE ONLY THIS LINE WITH YOUR AD CODE -->
</div>

[CSS 코드]

#ad_code { background:#FFFFFF url(백그라운드 이미지 URL 입력) center center no-repeat; width:345px; text-align:center; padding:50px 20px 60px 0; }

[애드센스 코드]

<script type="text/javascript"><!--
google_ad_client = "자신의 애드센스 코드";
//250x250, 작성됨 07. 12. 31
google_ad_slot = "자신의 애드센스 채널";
google_ad_width = 250;
google_ad_height = 250;
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

====================================
자, 이제 설명해드리도록 하겠습니다.

먼저, 티스토리 관리자로 로그인 하신 뒤, 관리자 > 스킨 > HTML/CSS > HTML 부분에서 애드센스 코드를 삽입한 부분을 찾으신 뒤에 아래의 보기처럼 위 아래에 선홍색으로 표시된 HTML 태그를 아래와 같이 입력합니다.

[skin.html 부분]

<div id="ad_code">
      <!-- REPLACE ONLY THIS LINE WITH YOUR AD CODE -->

<script type="text/javascript"><!--
google_ad_client = "자신의 애드센스 코드";
//250x250, 작성됨 07. 12. 31
google_ad_slot = "자신의 애드센스 채널";
google_ad_width = 250;
google_ad_height = 250;
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

style.css부분에서 /* 코멘트 */ 를 찾으신 뒤 위쪽에 아래 코드를(파란색으로 된 부분) 모두 추가해주시기 바랍니다. (검정색으로 된 부분은 다를 수 있습니다.) 즉, 콘텐츠 소스 제일 하단 마지막 부분에 넣어주시면 됩니다.
또한 애드센스 백그라운드라는 이 표시는 수정할 때 찾기 쉽게 표시해 두면 좋습니다.

[style.css 부분]

.categoryBtn { background:url(images/iconCategory.gif) 0 0 no-repeat; padding-left:20px; padding-top:5px; height:16px;}
a.categoryBtn {color:#777 !important; }
.author .date { background:url(images/iconClock.gif) 0 0 no-repeat; padding-left:30px; padding-top:5px; height:16px;}
.author .ownerBtn { background:url(images/iconOwner.gif) 0 0 no-repeat; padding-left:30px; padding-top:5px; height:16px;}

/* 애드센스 백그라운드 */

#ad_code { background:#FFFFFF url(백그라운드 이미지 URL 입력) center center no-repeat; width:345px; text-align:center; padding:50px 20px 60px 0; }


/* 코멘트 */

====================================
자, 그럼 이제 적용을 눌러주시면 됩니다. 아, 여기서 설명을 안한 것이 있는데요. 바로 백그라운드 이미지를 넣어주셔야 합니다. 백그라운드 이미지는 광고크기와 알맞게 제작하신 뒤 티스토리 직접올리기 부분에서 업로드 해주신 뒤 불러와 주시면 됩니다. 그리고 애드센스 광고의 정렬은 css 코드에서 수정해주시면 되는데요. 코드중에 padding 부분을 수정해주시면 됩니다. 순서대로 위, 우측, 하단순서 입니다.
아래 예제를 참고해주시기 바랍니다.

css 코드 예제

파일 명 - adsense.png
위쪽 값 - 60px
우측 값 - 30px
하단 값 - 60px <- 이녀석은 수정하실 필요 없습니다.


#ad_code { background:#FFFFFF url(images/adsense.png) center center no-repeat; width:345px; text-align:center; padding:60px 30px 60px 0; }

광고의 정렬은 하나하나 맞추어 가면서 해보시면 괜찮게 나오게 됩니다. 그리고 광고의 배경과 일치하게 하려면 애드센스 광고관리에 가셔서 제작한 백그라운드 이미지와 같은 배경색으로 배경을 지정해주시면 됩니다.


ⓒ이 저작물은 스크랩 가능하나 출처를 남기셔야 합니다. By. 튀긴건빵
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함