#1 스킨 수정하기 - 광고 설정

 

기존에 쓰던 유료 스킨을 넣어두고

무료 스킨인 #1 스킨으로 바꿨다. 

유료스킨은 디자인이 깔끔하고 예뻐서 잘 사용했었는데, 

이미지 위주의 스킨이다 보니

페이지 속도가 느려지는 단점이 있었다. 

 

2020/01/18 - [인터넷/티스토리 블로그] - 웹사이트, 블로그 페이지 속도 높이기 : 이미지 용량 줄이기

웹사이트, 블로그 페이지 속도 높이기 : 이미지 용량 줄이기

 

내 블로그는 모바일 유입이 많은 블로그라

모바일 페이지 속도가 빠르길 원했는데, 

지금 사용하는 #1 스킨은 다른 스킨들과 비교해본바

페이지 속도가 제일 빨랐다! 굿.

 

하지만 보완해야할 게 몇 개 있어서 수정해보았다. 

 

1. 사이드바 광고

 

사이드바 광고를 넣으면 옆에 배치되어있어야 하는데 

블로그 하단에 세로로 길게 배치되어 있었다. 

미관상 보기 좋지 않아 수정하기로 했다. 

 

티스토리 블로그 관리 - 플러그인 - 배너 출력 에 들어가서 적용을 누른다.

 

관리 - 꾸미기 - 사이드바에 들어간다.

 

1. 배너 출력을 적용시켰으면 기본모듈에

[플러그인] HTML 배너출력이 있는 것을 확인할 수 있다.  

그 옆의 + 버튼을 누르면 사이드바 1에

HTML 배너출력 항목이 하나 생긴다. 

 

2. - 옆에 커서를 대면 편집버튼이 뿅 하고 생긴다. 클릭!

 

3. 이름을 사이드 광고로 바꿔주고

넣고 싶은 사이드바 광고 코드를 복사해서 

HTML소스에 붙여넣기 해준다. 

(난 애드핏 사이드바 광고를 넣었다) 

그 다음 사용자 모듈에 저장을 체크한 뒤 확인을 누르자.

 

아직 끝난게 아니다. 

 

사이드 광고문.txt

0.00MB

 

위 메모장 파일을 다운 받은 후 열어준다.

 

회색 네모 상자부분이 사이드바 광고 코드다

 

<!--광고단위 소스 코드--> 아래에

사이드바 광고 코드를 복사 붙여넣기 해준다. 

그 다음 처음부터 끝까지의 내용을 복사해서 

티스토리 블로그 관리 - 스킨 편집 - html 편집으로 들어간다. 

 

빨간색 박스 아래로 붙여넣기 해준다

 

html편집 상자 안을 아무데나 클릭해주고 Ctrl + F 을 눌러준다.

그럼 위에 노란색 검색창이 뜨는데 거기에다가 dkcontent를 치면 

<div id="dkContent" class="cont_skin" role="main"> 을 찾을 수 있을 것이다.

그 아래에 복사한 메모장의 전체 내용을 붙여넣기 하면 된다. 

 

그럼 이렇게 사이드바 광고가 블로그 우측에 나타난다. 모바일 버전에서는 볼 수 없고 PC버전에서만 볼 수 있다.

 

애드핏 광고는 원래 블로그 하단에 있었는데,

애드핏 PC광고를 블로그 상단이나 하단에 넣으니

모바일로 볼 때 PC광고가 반쯤만 나오더라.

이건 찾아보니 수정할 수 있는 방법이 따로 없어서 

나머지 다 버리고 사이드바 광고 하나만 붙여넣었다. 

 

2. 광고 짤림 현상 해결

 

모바일로 들어가니 애드센스 광고가

조금씩 잘려 나와서 보기 좋지 않았다. 

 

티스토리 블로그 관리 - 플러그인 - 구글 애드센스(반응형) 으로 접속 

 

상단이랑 하단에 달린 광고의 내용 중

<data-full-width-responsive="true"> 라고 적혀있는 부분이 있을 것이다.

true 부분을 false 로 바꿔주면 완료!

 

 

잘리는 것 없이 깔끔하쥬?

 

다음에는 폰트를 수정해보자.