메인화면에 원하는 문구 집어넣기

Posted by Readiz
2014.08.13 23:59 반응형 티스토리/FastBoot



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를 보세요)





 물론 이 상태로 쓸만한 디자인은 아닙니다만, 차후에 이 부분을 어떻게 더 수정하실 수 있게되는지 더 다루도록 하겠습니다. 아쉽지만 오늘은 여기서 일단 맛보기정도로 끝내도록 하겠습니다.



저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 잘보고 갑니다^^
    저기 궁금한게 있는데용~
    보통 티스토리 스킨의 경우 메인페이지가 최근글이자나요~
    그걸 readiz님 스킨처럼 메인화면을 적용시킬려면.. html을 어떻게 구성해야하나요..ㅠㅠ
    막 뜯어보고 해봐두 ㅠㅠ 어렵네용
    • 기본적으로 그렇게 나옵니다
    • 2014.08.14 14:29
    비밀댓글입니다
  2. 여기서도 애드센스 부분은 좀 위험합니다!
    메인페이지가 아닌경우 CoverDiv가 display:none으로 가려지는데, 광고가 로딩만 되고 보이지 않는,
    애드센스에서 엄격히 금지하는 방식입니다.
    애드센스를 넣으려면 메인이 아닐 때 코드를 삭제하는 스크립트도 함께 작성해주어야합니다.
  3. pc버전에서는 애드센스 하단광고가 카테고리 다른글 좌측에 잘 위치해 있는데
    모바일 버전 애드센스 하단광고는 카테고리 다른글 밑에 들어가 버리네요. 어떻게 방법이 없나요?
  4. 안녕하세요! 반응형스킨을 설치했습니다 메뉴설정도다했는데요

    이상하게 글을 써봤는데 메인화면에 글이 뜨지가 않습니다? 이거 왜이럴까요 ㅠㅠ
  5. 메인화면의 글제목 하늘색과 댓글달기 버튼하늘색은 어떤걸 건드려줘야 수정이될까요..?
  6. 진짜 HTML아에 할줄 모르는데
    하루씨름해서 광고 다 자리잡아 넣고 했어요
    정말 좋은자료 좋은 강의 감사합니다^^
    메인화면에 문구넣기로 광고를 넣었는데 잘 나오긴하는데 괜찮은가요?
    위치가 좀 왼쪽으로 쏠렸는데 중앙에 넣는법 좀 가르쳐 주시면감사하겠습니다;;
  7. 완전 감사합니다..
    버벅 거리면서 메인 화면 열심히 공사중입니다..ㅎㅎ
  8. 하단에는 못넣나요
  9. http://gilyoung.tistory.com/ 저는 티스토리 메인이 왜 옛날글이 먼저 나오는지 모르겠어요 ㅠㅠ
    • 앗 해결했네요 다른글참고하여 제가 작성한 게시물을 발행눌렀더니 됩니다 ! 감사합니다 스킨너무이뻐요 ㅎㅎ

티스토리 툴바