[블로그] 티스토리 fastboot 홈 화면 설정 변경, 홈 화면 광고 넣기
안녕하세요. 개발자 드리머즈입니다.
요즘은 모바일을 통한 블로그 방문이 PC보다 많기에 모바일 화면에서도 블로그 내용이 잘 보이도록 해야 합니다. 그래서 저는 현재 Readiz님이 만드신 fastboot 이라는 반응형 스킨을 쓰고 있습니다. 잘 사용하고 있지만 저는 fastboot의 기본 Home 화면이 마음에 들지 않았습니다. 거기다 구글 애드센스 승인이 나고나서 본문 상하단에 광고를 넣으니 fastboot의 기본 홈 화면은 더욱 이상해 보였습니다.
위의 사진은 제 블로그의 Home 화면입니다. 사진의 빨간색 부분을 보시면 구글 애드센스 광고 출력 코드가 함께 나오는 것을 알 수 있습니다. 그리고 기본 홈 화면의 아래 쪽을 살펴보면 아래 사진처럼 최근 글들이 아주 작은 섬 네일로 나오는 부분이 있습니다.
하지만 사실 이 영역은 별로 도움이 되지 않는 것 같습니다. 글의 제목 없이 작은 사진만으로는 블로그 방문자가 글의 내용을 파악하기 어렵습니다.
이를 해결하기 위해서
- FastBoot 스킨에서 기본적으로 켜져있는 FastBoot Index를 사용하지 않도록 설정하고,
- 티스토리 블로그 설정에서 티에디션을 사용하도록 설정하고,
- 티에디션 설정을 변경하면 됩니다.
아래에 자세한 과정이 있습니다.
이 문제를 해결하기 위해서 [관리자] -> [꾸미기] -> [HTML/CSS편집] 을 클릭합니다.
그러면 새로운 창이 뜹니다.
- 여기서 Ctrl+f키를 누르면 검색이 가능합니다. f_enable을 입력하고 엔터를 칩니다.
- var f_enableTedition = false;로 되어있습니다. false(기본값)으로 되어있으면 FastBoot Index를 사용하는 것이며 true로 되어있으면 T-edition을 사용하는 것입니다. T-edition을 사용해야 하므로 false를 true로 수정합니다.
- 저장 버튼을 누릅니다.
여기까지 완료한 다음에 새 창에서 블로그의 홈 화면으로 가보면 홈 화면이 변경된 것을 알 수 있습니다.
이전에 보이던 기본 홈 화면이 아니라 그냥 최근 포스트부터 요약없이 원본 그대로 포스트가 나열되어 보여집니다. 하지만 전체 글이 주루룩 나열되어 보여지므로 방문자들에게 도움이 되는 형태가 아닙니다. 조금 더 수정이 필요합니다.
[관리자] -> [꾸미기] -> [설정] 을 클릭합니다.
- 티에디션을 사용합니다로 수정합니다.
- 변경사항 저장 버튼을 누릅니다.
- 티에디션 설정하기 버튼을 클릭합니다.
그러면 아래의 화면이 뜹니다.
바로 여기서 티에디션을 사용하여 홈화면을 수정할 수 있습니다. 왼쪽의 설정창을 이용해서 원하는 대로 홈 화면을 꾸미시면 됩니다. (왼쪽 상단의 추천세트를 통해 더욱 쉽게 수정할 수 있습니다)
여기서는 홈 화면이 변경되는지 확인하기 위해 우측 상단의 적용하기 버튼을 클릭하겠습니다.
나중에 제대로 된 티에디션 설정하게 된다면 보관함에 저장하면 됩니다. 지금은 적용버튼을 클릭합니다.
홈 화면이 제대로 변경된 것을 확인할 수 있습니다.
이제 티에디션 설정에서 원하는 형태로 홈화면을 꾸미면 홈화면이 원하는 대로 변경됩니다.
홈화면에 구글 애드센스 광고를 추가하기 위해선 아래의 과정이 필요합니다.
구글 애드센스 광고를 나타내고 싶은 공간을 만들기 위해 원하는 영역의 +버튼을 클릭합니다.
그러면 +버튼을 누른 곳에 빈 공간이 생깁니다.
- 여기서 왼쪽의 빨간색 테두리에 있는 아이템을 아무꺼나 하나 선택합니다.
- 그래야 디자인 버튼을 클릭할 수 있습니다. 디자인 버튼을 클릭합니다.
바뀐 화면에서 HTML버튼을 클릭합니다.
그러면 지금 수정하고 있는 영역의 HTML코드가 나옵니다.
- 여기에 있던 기존의 코드를 모두 삭제한 다음에 광고하고자 하는 구글 애드센스 코드를 넣습니다.
- 적용 버튼을 누릅니다.
그 다음에 우측 상단에 있는 적용하기 버튼을 눌러 티에디션 설정이 적용되게 하면 됩니다.
댓글 영역