○ 텍스타일 블로그 상단 애드센스 큰 리더보드 광고 넣기
제가 운영하는 텍스타일 블로그에 원래는 방문자 100명 넘을 때 부터 애드센스 광고 넣으려 했는데요 ^^;;
음.. 블로그 카테고리를 생각하다가 .. 그냥 넣기로 했어요 ^^ 유용한 정보니까요..
그리고 HTML 코드를 모르면 하고 싶어도 못하잖아요?
그래서 제가 이 글을 만들어 봤습니다. ^^ HTML코드를 몰라도 따라만 하시면 됩니다.^^
자~ 그럼 들어가 보겠습니다.^^ 우선 애드센스는 모두 가입 되어있는 것으로 알고 진행합니다.
나중에 애드센스 가입 어떻게 하면 되는지 포스팅 할께요 ^^~
○ 애드센스 광고 생성 ( 970 X 90 큰 리더보드 )
이 970X90 큰 리더보드가 광고 형태 중에서 가장 효과가 좋다고 하더라고요 ^^
그리고 온라인 기사 처럼 글 상단 우측에 .. 다시 말해서 글 속에 336 X 280 직사각형 광고가 효과가 있다고 하고요..
그런데.. 제 경우는 우측에 다음뷰 손가락이 자리를 잡고 있어서리..^^;; 위와 같은 광고는 포기 했답니다.
그래서 사이트바와 하단에 광고를 넣어서 이렇게 한 페이지에 3개을 운영하려 해요..
아실지 모르겠지만.. 애드센스 광고는 한 화면에 3개 까지만 할 수 있으니까요^^
이렇게 큰 리더보스 광고를 만드시고 나면.. 코드를 저장해 놓으시고요~ 이젠 텍스타일 블로그에서 HTML 수정합니다.
○ HTML.CSS 수정
이 위치는 아시겠죠? 텍스타일 블로그 관리자 화면 중에 좌측 중간 쯤 있는
"HTML.CSS 편집" 메뉴 입니다. ^^ 클릭하면 우측화면에 여러 입력수정 박스가 나오는데요..
우선 제일 위에 있는 "textyle.html" 입력 창을 봅니다.
스크롤을 조금만 내리면 <div id="body"> 라는 부분이 있답니다. ^^ 그 위로 아까 생성했던 큰 리더보드
애드센스 광고 코드를 삽입 하면 된답니다. ^^ 위에 처럼 말이죠..^^
그럼 결과물을 볼까요?
자~~ ^^ 위 화면과 같이 광고가 나오고 있네요 ^^ 광고는 가로가 970 이라지만 광고사에서 어떻게 이미지를 만들었느냐에
따라서 위와 같이 공간이 남기도 한답니다.^^
근데 뭔가 좀 이상하지 않으세요??
광고 위/아래 여백이 좀 보기 않좋습니다. ^^;;;;
그럼 지금 부터는 좀 보기 편하게 다시 소스를 수정하도록 하겠습니다.^^ 보기 좋은 떡이.. 뭐라고 하죠? ㅎㅎㅎ
○ 애드센스 광고 상단 여백 조정
광고 상단에 여백은 고정이 되어있는듯하더라고요.. 그래서 CSS 수정에 들어가서 고정되어있는 숫자를 고쳐야 한답니다.^^
이 "textyle.css" 입력박스는 위 "textyle.html"바로 밑에 있답니다.
자 그럼 여기서도 어느 부분을 수정해야 하는지 찾아야겠죠 ^^~
"Layout"을 찾으면 되겠네요..위 화면 처럼요~ 그리고 "margin-bottom:10px;"로 되어 있는 부분에서 "10"부분을 원하는 값으로
바꾸면 된답니다. 기존은 "40"으로 되어있었는데..제가 테스트 하느라 "10"으로 바꿔 봤습니다. ^^
적당한 제가 설정한 값은 "20"입니다....
이렇게 애드센스 광고 상단 여백을 좀 줄였으면.. 하단 여백은 좀 늘려야 겠죠^^
○ 애드센스 광고 하단 여백 조정
이 일은 정말 쉽습니다. ^^ 아까 처음에 애드센스 광고 코드 삽입한 부분있죠? 거기로 다시 가볼께요 ^^
애드센스광고 코드 맨 밑에 "<br><br>" 이렇게 두개만 넣어 주시면 된답니다. ^^ 줄 바꿈 두번하겠다는 말이죠!
좀 더 벌리고 싶으신 분들은 "<br>" 하나 더 넣어주시면 되고요 ^^
위 화면 처럼 하시면 된답니다^^
그럼 어떻게 변했는지 볼께요 ^^
에궁^^;; 그새 광고가 바꼈네요 ~~ 어떤가요? 광고 위 여백은 좀 줄고.. 밑에 여백은 좀 늘어났죠^^?
이렇게 하면 된답니다. 어려웠나요??? ㅠ,ㅠ,..?? ㅎㅎㅎ
돈 많이 많이 버세요 ^^