Copy Coding

티스토리 사이드 바에 애드센스 광고를 추가해 봅니다.

작업 순서는 다음과 같습니다.

1. 플러그인 설치

2. 사이드바 편집

3. 애드센스 광고 생성

4. 사이드 광고 적용

3번을 맨 처음에 해도 관계없습니다.

1. 플러그인 설치

tistory에 로그인 하고 관리 페이지 좌측 메뉴에서 플러그인을 선택 합니다.

그리고 우측에 플러그인 리스트들이 있는데 아래로 쭉 내리면서 배너출력을 찾습니다.

배너출력을 클릭해 주면

적용여부 팝업 창이 나옵니다.

적용 버튼을 클릭 합니다.

그러면 배너출력이 사용중으로 변경되며 상단으로 올라 옵니다.

사용하지 않으려면 다시 배터출력을 클릭해서 해지 하면 됩니다.

2. 사이드바 편집

이제 추가한 배너출력의 위치를 편집 합니다.

좌측메뉴에서

꾸미기 > 사이드바

를 선택 합니다.

기본모듈에 보이지 않던 배너출력 모듈이 2개가 생겼습니다.

여기에서 HTML 배너출력의 우측 +기호를 선택합니다.

우측 사이드바1 상단으로 이동 됩니다.

사이드바 광고를 맨위에 있는건 보기 않좋아 아래로 내려봅니다.

앞부분을 눌러 위치를 이동하고 편집을 클릭 합니다.

그러면 사이드바 광고를 삽입할 수 있습니다.

이제 이곳 입력란에 애드센스 광고를 넣어주면 됩니다.

여기까지 해놓고 광고를 만들러 갑니다.

3. 애드센스 광고 생성

구글 애드센스에 접속합니다.

광고단위 > 새 광고 단위를 선택 합니다.

텍스트 및 디스플레이 광고를 선택 합니다.

이름만 적어주고 나머지는 기본값을 그대로 사용합니다.

광고크기를 설정 안해도 저절로 맞춰집니다.

저장 및 코드 생성 버튼을 클릭 합니다.

코드 생성 팝업 창이 나옵니다.

중간에 있는 광고 코드를 복사 합니다.

이제 복사한 코드를 적용만 하면 됩니다.

4. 사이드 광고 적용

다시 티스토리로 돌아와서

복사한 광고 스크립트를 붙여넣기 합니다.

이름은 보기 편하게 적어주고

복사해온 코드를 HTML소스에 복사 한 후 확인 버튼을 클릭합니다.

배너출력이라는 문구가 변경이 되어있네요.

변경사항 저장을 클릭 합니다.

이제 기다림만 남았습니다.

저는 메뉴가 좌측에 있어서 좌측에 애드센스 광고가 나타납니다.

생각보다 크네요. 멋도 없고...

고민되네.

일 방문자 10여명밖에 안되는데 이틀간 뭔일인지 많아졌네요.

이건 어제 캡쳐해 놓은거고 오늘은 역시나 아직까지도 0명.

프로그램쪽은 코딩도 해야하고 테스트도 해야하고 이해를 돕기위해 설명도 해야하고 하다보면

1주에서 1개월이 넘어도 못올리는 상황이 되어서 의미없는 방문자 수를 주석처리하기로 하였습니다.

은근 스트레스.

티스토리에 로그인 하고 관리자 페이지로 이동 합니다.

좌측 [스킨편집]을 선택하면 새탭에 [html 편집] 메뉴가 나타납니다.

[html 편집] 버튼을 클릭하면

자신의 티스토리 HTML 편집기가 나옵니다.

방문자 수 밑에 [press enter to search]라는 글이 있으니 저는 enter 라는 걸로 검색을 했습니다.

검색은 HTML 에서 키보드 Ctrl + F 키를 누르면 [검색]창이 상단에 나타나는데 거기서 검색합니다.

여기서 방문자수 관련 부분을 주석처리 해주고

상단 [적용] 버튼을 선택 합니다.

[적용] 버튼이 흰색이면 적용이 된것 입니다.

주석처리가 잘 되었는지 어디 볼까요?

예. 깔끔하네요.

tistory를 사용하면서 본문 내용 폰트가 너무 작아서 처음부터 변경을 하려고 생각만 하고 있다가

오랜만에 검색을 해보았지만 나오는 설명들이 나하고는 맞지가 않아 하는 수 없이

시간을 내서 직접 작업을 해보았습니다.

사용자 마다 스킨이 다를 텐데 저의 경우는 반응형 Square를 사용하고 있습니다.

폰트는 다들 나눔 고딕을 많이 사용하는 것 같은데 검색을 하다 보니 본고딕(Noto Sans)이

괜찮아 보여서 이것으로 선택을 하였습니다.

https://www.google.com/get/noto/#sans-kore

이곳에 가면 글씨의 원본을 볼 수 있습니다.

하단에는 캡쳐를 해왔는데 이미지가 작아서 별로인 것 같고 직접 가서 보시길 추천 합니다.

폰트는 다운로드를 받아서 설치를 하려고 했는데 생각보다 파일이 너무 크더군요.

요즘에 링크로도 해결이 되는데 굳이 다운받고 업로드 하기가 귀찮아 그냥 링크 방식으로 했습니다.

자. 그럼 작업을 시작 합니다.

먼저 로그인을 하고 관리자 페이지 좌측 메뉴에서 [스킨 편집]을 선택 하면

우측에 [html 편집] 버튼이 보입니다.

[html 편집] 버튼을 누르면 화면이 바뀌면서 [HTML | CSS | 파일업로드] 가 나타 납니다.

여기서는 CSS를 선택 합니다.

아래 그림을 보고 저와 내용이 다르면 더 이상 이 글을 읽을 필요가 없습니다.

저와 css 구조가 달라서 적용이 안될 수 있습니다.

먼저 사용하지 않을 폰트는 주석처리를 하고 신규로 추가를 했습니다.

/*@import url(http://fonts.googleapis.com/css?family=Ubuntu+Condensed);*/

/*@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);*/

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

그리고 font-size:를 키우고 font-family:에 폰트를 추가 해주고 사이트를 새로고침 했는데

영향이 없습니다.

textarea { font-size: 15px; font-family: 'Noto Sans KR', sans-serif; line-height: 200%; }

그래서 모든 font-family: 를 찾아서 수정하고 별 방법을 다 했는데 저하고는 하나도 맞지가 않더군요.

결국 div와 span이 좌측 메뉴 구조와 내용에 영향을 주는 tag인걸 찾아내서

그냥 아래처럼 span, div를 추가하는 것으로 마무리를 했습니다.

이제는 글씨도 좀 커지고 제가 보기에는 만족 스럽습니다.

그럼 된거죠.

- copy coding -