본문
|
이번엔 애드센스 광고를 상단 중앙에 한 개만 배치하는 방법과 광고에 테두리를 넣는 방법까지 알아봅시다.
저는 다음과 같이 336*280 사이즈의 광고를 하려고 합니다.
그래서 애드센스 홈페이지에서광고 이름과 사이즈를 선택한 후에
아래쪽의 파란색으로 된 저장 및 코드 생성 버튼을 눌러주시면
이와같은 화면이 뜨죠?
이전 포스팅에서 알아봤듯이 광고 코드를 다 복사해줍시다.
그리고 관리자 페이지로 들어오셔서 위 사진의 빨간색 네모 부분에 있는 HTML/CSS 편집을 눌러줍시다.
그러면 이러한 화면이 뜨게되구요.
Ctrl+F를 눌러서 article_rep_desc를 찾아줍시다.
일단 본문 상단에 광고를 배치할 것이므로 article_rep_desc 위에 광고 코드를 붙여야 하는데요.
그냥 광고 코드를 붙이게 되면 본문 상단 중앙이아니라 본문 상단 왼쪽에만 광고가 나오게 됩니다.
저희의 목적은 본문 상단 중앙에 광고를 배치하는 것이죠.
그렇게 하려면 article_rep_desc 위쪽에다가 아래의 코드를 삽입해주셔야합니다.
<div align="center">
애드센스 광고코드 삽입 위치
</div>
물론 이 코드를 그냥 넣으시는게 아니라 애드센스 광고코드 삽입 위치<<라고 쓰여진 곳에
아까 애드센스 홈페이지에서 받았던 광고 코드를 붙여넣어주시면되요.
그러면 위 그림처럼 될텐데요.
이제 이 코드 전체를 복사해서
이 사진의 빨간색 네모 부분처럼 article_rep_desc 위에 붙여주시면 됩니다.
그리고 적용을 눌러주시면
이렇게 본문 상단 중앙에 광고 한 개가 붙어있는 것을 볼 수 있습니다!
본문 상단 중앙에 광고 한 개를 배치하는 방법을 알아봤습니다.
그렇다면 이 삽입한 광고에 테두리를 넣으려면 어떻게 해야하는지 알아보겠습니다.
기본적인 과정은 똑같습니다.
이렇게 티스토리 블로그 관리자 페이지에 들어가셔서
HTML/CSS 편집을 눌러줍시다.
그리고 Ctrl+F를 눌러서 article_rep_desc를 찾아주세요.
그러면 일단 본문 상단에 삽입할 것이니까 article_rep_desc 위에 뭔가를 삽입해야 하겠죠?
그런데 테두리를 넣을 것이므로 아까 삽입했던 코드와는 조금 다른 코드가 필요할 것입니다.
그 코드는 아래와 같습니다.
<TABLE style="BORDER-COLLAPSE: collapse" cellSpacing=1 cellPadding=1 width=100% bgColor=#ffffff>
<TBODY>
<TR>
<TD style="BORDER-BOTTOM: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; BORDER-RIGHT: #cccccc 1px solid" width="100%">
<br>
<center>
애드센스 광고코드 삽입 위치
</center>
<br>
</TD></TR></TBODY></TABLE>
다음과 같은 코드에 있는 ‘애드센스 광고코드 삽입 위치‘라는 글자를 지우시고 대신에 애드센스 홈페이지에서 받은
광고 코드를 삽입해주시면 됩니다.
그래서 요렇게 됐습니다.
이제 이것을 아래 그림처럼 article_rep_desc 위에 붙여줍시다.
이렇게 빨간 네모처럼 붙여주시면 됩니다.
그러면 위 사진처럼 광고 주위에 테두리가 생긴 것을 알 수 있습니다.
이것을 약간 응용해보자면 테두리 안에 두 개의 광고를 붙이는 겁니다.
그럴려면
아까 썼던 광고 테두리 있는 광고 코드에서
‘애드센스 광고코드 삽입 위치’라는 글자를 지우시고 대신에 광고 코드를 삽입하시면 되는데요.
위 사진처럼 두 개의 광고 코드를 ‘애드센스 광고코드 삽입 위치’라는 글자가 있던 곳에 삽입해주시면 됩니다.
저는 사이즈를 300*250짜리 두 개를 삽입하였습니다.
그리고 이것을 모두 복사해서
위 사진처럼 article_rep_desc 위에 붙여넣기 해주시면 됩니다.
그러면 이 사진처럼 테두리 안에 두 개의 광고가 나란히 있는 것을 볼 수 있죠~