메인화면에 원하는 문구 집어넣기
FastBoot 메인화면에 원하는 HTML로 꾸미기
우선, HTML에 대한 기본적인 이해를 하시고 있다는 가정 하에 시작하겠습니다. 지식이 있으심에도 FastBoot의 구조가 타 스킨과 다른 탓에 메인화면을 마음대로 커스텀하지 못하시는 분들이 많으신 것 같아 포스팅하게 되었습니다. 아시다시피, FastBoot는 다른 스킨과 다르게 RSS를 사용해서 메인화면을 가져올 수 있도록 세팅을 할 수가 있습니다. 우선 시작하기 전에 아래처럼 세팅되어 있는지 skin.html을 확인해보시기 바랍니다.
<script> /* ----------------- FastBoot Setting Variables ---------------*/ /* ---------- Category Setting 0: Gallery (Default) 1: List 2: Simple Title ------------------------------- */ var f_categoryDefaultMode = 0; /* ---------- T-Edition Enable false: Use FastBoot Index (Default) true: Use T-edition ------------------------------- */ var f_enableTedition = false; </script>
스킨을 적용하신 후에 다른 것을 건드리시지 않았다면 f_enableTedition = false;인 채로 있을 것입니다. 아무튼 티에디션을 사용하시려고 이것을 true로 해두셨다면 이 강의 내용은 적용하실 수 없습니다.
1. 환영문구 넣어보기
간단한 인삿말을 넣어보도록 하겠습니다. 다음 부분을 찾아봅시다.
<div id="coverDiv"><div class="info col-md-12 hidden"><h3>[##_title_##]</h3><p class="text-muted">[##_desc_##]</p></div><div class="loading"></div></div>
여기에서, coverDiv라고 되어있는 사이 부분이 FastBoot이 RSS를 불러오면서 추가하는 부분입니다. 여기에 인삿말을 넣으신다면 넣어지게 되는 구조입니다. 정확히는 앞부분에 밀어넣으시면 인삿말이 들어갑니다.
<div id="coverDiv"><div style="border-left: 10px solid #5ac8fa; padding: 10px; font-size:0.8em;">안녕하세요? ^^</div><div class="info col-md-12 hidden"><h3>[##_title_##]</h3><p class="text-muted">[##_desc_##]</p></div><div class="loading"></div></div>
위처럼 수정하시면 결과는 아래처럼 됩니다.
기타 소셜광고나, 메인에서만 나오는 구글 애드센스를 넣으시려고 할 때도 이 위치를 사용하시면 될 것입니다.
2. 블로그 소개 넣어보기
블로그 소개는 원래 Default로 나타나게 하려고 했습니다만, 마지막에 제가 생각을 바꿔서 hidden처리되어있습니다. 유사하지만 hidden만 제거하면 숨겨져 있던 것이 나오게 됩니다.
<div id="coverDiv"><div style="border-left: 10px solid #5ac8fa; padding: 10px; font-size:0.8em;">안녕하세요? ^^</div><div class="col-md-12"><h3>[##_title_##]</h3><p class="text-muted">[##_desc_##]</p></div><div class="loading"></div></div>
다른 것은 변한 것 없고 info, hidden 속성만 제거하였습니다. (info class가 있었던 div를 보세요)
물론 이 상태로 쓸만한 디자인은 아닙니다만, 차후에 이 부분을 어떻게 더 수정하실 수 있게되는지 더 다루도록 하겠습니다. 아쉽지만 오늘은 여기서 일단 맛보기정도로 끝내도록 하겠습니다.
'반응형 티스토리 > FastBoot' 카테고리의 다른 글
[FastBoot 2.0] 상단바 업데이트 작업 완료 (15) | 2016.05.31 |
---|---|
[공지] FastBoot스킨 티스토리 RSS URL 변경으로 인한 문제점 발생 (15) | 2016.05.26 |
메인화면 하단 이미지 하나만 나오는 현상 해결하기 (25) | 2016.02.26 |
[FastBoot] 마이너 패치 실시 안내 (35) | 2016.02.15 |
[버그패치] 툴팁이 오른쪽으로 밀려서 표시되는 현상 수정 (24) | 2014.09.24 |
메인화면에 원하는 문구 집어넣기 (13) | 2014.08.13 |
티스토리 메뉴바 패치에 따른 FastBoot 로그인/로그아웃 버튼 문제해결 (31) | 2014.07.05 |
화면 스크롤시 상단고정메뉴 고정되지 않게 하기 (11) | 2014.06.30 |
사이드바 구글 애드센스 예제소스 (27) | 2014.06.10 |
데스크탑 상단 메뉴 바꾸기 / 블로그 제목에 홈링크 넣기 (39) | 2014.06.02 |
사이드바에 추천글 넣기 (26) | 2014.05.26 |
저기 궁금한게 있는데용~
보통 티스토리 스킨의 경우 메인페이지가 최근글이자나요~
그걸 readiz님 스킨처럼 메인화면을 적용시킬려면.. html을 어떻게 구성해야하나요..ㅠㅠ
막 뜯어보고 해봐두 ㅠㅠ 어렵네용
메인페이지가 아닌경우 CoverDiv가 display:none으로 가려지는데, 광고가 로딩만 되고 보이지 않는,
애드센스에서 엄격히 금지하는 방식입니다.
애드센스를 넣으려면 메인이 아닐 때 코드를 삭제하는 스크립트도 함께 작성해주어야합니다.
모바일 버전 애드센스 하단광고는 카테고리 다른글 밑에 들어가 버리네요. 어떻게 방법이 없나요?
이상하게 글을 써봤는데 메인화면에 글이 뜨지가 않습니다? 이거 왜이럴까요 ㅠㅠ
하루씨름해서 광고 다 자리잡아 넣고 했어요
정말 좋은자료 좋은 강의 감사합니다^^
메인화면에 문구넣기로 광고를 넣었는데 잘 나오긴하는데 괜찮은가요?
위치가 좀 왼쪽으로 쏠렸는데 중앙에 넣는법 좀 가르쳐 주시면감사하겠습니다;;
버벅 거리면서 메인 화면 열심히 공사중입니다..ㅎㅎ
티에디션 기능을 쓸 수 없다더라고요ㅠㅠ