오늘은 현재 사용중인 CCZ-CROSS 반응형스킨 사이드에 애드센스 광고게재하는 방법을 알아볼까합니다. 잉? 시작한지 얼마되지않은 사람이 광고를 어떻게 게재를 하느냐?라고 생각할지 모르지만 저는 다른계정으로 작년에 애드고시를 이미 치뤄서 광고게재를 할 수 있답니다. 그럼 구글 애드센스 광고를 넣어보겠습니다.
구글 애드센스 새 광고 만들기 및 광고 게재
1. 사이드바에 구글 애드센스 광고를 게재하기위해 우선 애드센스에서 새 광고를 하나 만듭니다.
2. 새 광고 단위 화면에서 '이름' 본인이 알 수 있도록 설정, '광고크기' 기본설정은 반응형인데 이번에는 수직배너를 사용하고자합니다. 본인이 반응형으로 사용하고 싶으면 사용해도 무방해요.
3. 수직배너 중 300x600 크기의 '큰 스카이스크래퍼'를 선택하고, 광고유형은 '텍스트 및 디스플레이 광고'를 선택한 후 아래 저장 및 코드생성 버튼을 누릅니다.
4. 코드가 생성완료! 해당 코드를 드래그 복사하여 메모장에 붙여놓도록합니다.
5. 자신의 티스토리로 이동하여 [환경설정 - 꾸미기 - 스킨편집] 순서로 이동합니다.
6. 스킨편집 창에서 'html편집'버튼을 클릭하여 코드창으로 진입.
7. 좌,우측 창이 나타나는데 좌측은 미리보기 창, 우측은 html 및 css코드 편집창입니다. 'HTML' 선택하고, 소스코드에 마우스 커서를 한번 클릭해준 후에 'CTRL+F'를 눌러서 '검색: s_sidebar'입력하세요.(화면에 마우스 클릭하는 이유는 검색할때 소스코드창이 아닌 익스플로러 창에서 검색이 이루어지기 때문에 코드창에 클릭해주는거예요)
8. s_sidebar와 관련된 구문들이 나옵니다. 스크롤바에 노란색 줄이 보일텐데 관련 s_sidebar가 있는곳이랍니다. <s_sidebar_element> ~ </s_sidebar_element>에 코드가 들어가야합니다. 아래로 스크롤바를 내려보면 이해가 되실꺼예요
9. 이제 구글 애드센스에서 복사한 광고코드를 삽입할껀데요 그전에 아래 첨부파일을 다운을 받아주세요. 코드를 살짝 변경해줘야 하거든요. 아래 이미지를 보시면 빨간 박스가 있습니다. 요게 이번에 사이드 광고로 들어갈 코드입니다. 블러처리한 부분에 자신만의 광고번호를 입력하면 됩니다. 동일한 문구가 있을꺼예요.
사이드바광고 코드.txt
여기까지 하셨으면 저장을 눌러주시고 메인화면으로 가보세요. 광고 노출이 시작됩니다. (단, 애드센스에서 새 광고를 만든 후 30분~1시간이 지나야 정상적으로 노출이 됩니다. 그전에는 광고가 들어갈 공간 표시만되고 빈화면으로 나오니 참고하세요.)
앗! 문제가 발생되었습니다. 위 애드센스 광고를 보시면 우측으로 쏠림현상이 있습니다. HTML 코드창에서 <CENTER>코드를 입력해봤지만 도움이 안되었구요, CSS에 코드를 추가함으로써 해결이 되었습니다. 다시 [스킨편집 - html편집]으로 들어가서 CSS 선택 후 'CTRL+F'를 눌러 이번엔 '사이드바'를 입력하여 찾아줍니다.
/*사이드바 검색이 되면 아래 @media 위에 다음 코드를 입력.(편의를 위해 메모장파일 첨부합니다)
다시 메인으로 돌아와서 확인해보세요. 다행히 중앙정렬로 깔끔해졌습니다. 글 작성하다보니 너무 긴 글이 되어버렸네요. 끝까지 잘 읽어주셔서 감사합니다.
'IT여행 > Blog' 카테고리의 다른 글
| 티스토리 네이버 웹마스터도구 사이트 등록으로 유입늘리기 (0) | 2018.06.23 |
|---|---|
| [티스토리] CCZ-CORSS 반응형 스킨 적용하기 (2) | 2018.06.20 |
