티스토리 반응형 스킨#1 활용방법(애드센스,스킨수정)

티스토리를 시작하고, 애드센스를 시작한지도 어느새 꽤 되었다. 사람 욕심이 끝이 없는지라 어떻게 하면 좀 더 깔끔하면서 수익도 안정적인 궤도에 올라서게 할수있을까를 아직도 연구중이다. 먼저 블로그 스킨은 나는 처음부터 반응형 스킨을 사용했다.

html코드를 조금 볼 줄 알아서 이래저래 나름 연구해보고 꾸미며 사용해왔는데, 결과는... 계속 연구해봐야할거같다ㅋㅋㅋ 처음에는 티스토리에서 기본으로 제공하는 #2 스킨을 썼었고, 근래에 #1로 바꾸었는데 아직까지는 개인적으로 보기에도 깔끔하고 만족스럽다.

그런데 데스크탑에서 볼때에 양쪽 사이드가 뭔가 허전해보였고, 우측상단에 Category 버튼을 누르면 메뉴가 열리는 형식이지만, 대부분 메뉴가 한눈에 들어오지 않으면 굳이 눌러볼거 같지않아 양쪽 사이드를 활용해보기로 했다. 

수정될 화면은 현재 필자 블로그의 양쪽 사이드를 보면 알수있다. 좌측에는 메뉴, 우측에는 애드센스 광고가 스크롤을 따라다닌다.

그러해서 이 포스팅은 티스토리 블로그 스킨 #1, 스킨 코딩수정을 이용한 양쪽 사이드 부분 활용에 대한 내용이다. 참고로 데스크탑 화면에만 해당한다.

먼저 티스토리 관리자 화면에서 꾸미기 - 스킨편집으로 들어가서 우측 상단 HTML편집 버튼을 클릭한다. 복잡해보이나 어렵지 않으니, 차근차근 따라오면 된다ㅋㅋ

먼저 Html영역 부분 정리.

1. 코드창 부분에 커서를 놓고, 찾기(Ctrl+f)를 눌러, 'cMain'을 찾는다.

2. 그 위치 아래에 사진의 빨간 테두리 두 부분이 적어주어야할 부분이다.

3. 실제로 직접 타이핑해서 적어줄 부분은 연두색 부분이고, 노란색 부분은 애드센스에서 삽입할 광고코드를 가져와서 그대로 붙여넣은 부분이다. 참고로 주석부분은 보기쉽게 정리해놓기 위해 적어놓은 것이니, 굳이 따라적을 필요는 없다.

이렇게 html 코드부분은 끝.

다음은 CSS영역 부분 정리.

html 영역에 비해 다소 복잡해보이는 CSS 수정부분. 연두색 부분이 필수적으로 적어주여야 할 부분이다.(오타조심, 대소문자 구분)

CSS 같은경우는 위치 상관없이 빈줄에 적어주면 된다. 노란색으로 표시된 영역은 현재 필자의 블로그에 적용된 스타일처럼 글씨크기, 글씨색 등을 설정해준 부분이기 때문에, 연두색 부분만 적어주더라도 기능은 정상적으로 된다. 중요한 포인트는 position값과 left값 혹은 right값이다.

참고로 가장 하단에 적혀있는 media 부분은 창을 줄였을때, 양쪽 사이드영역(메뉴, 애드센스)이 가운데 컨텐츠 영역을 침범하지 않도록, 창을 줄이면 사라지게하는 부분이다.

이렇게하면 html 코드수정으로 티스토리 반응형 스킨 #1 양쪽 빈 영역에 메뉴와 애드센스 광고 추가하기가 끝난다!