본문 바로가기

반응형 티스토리/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를 보세요)





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



  • 알 수 없는 사용자 2014.08.14 00:38

    잘보고 갑니다^^
    저기 궁금한게 있는데용~
    보통 티스토리 스킨의 경우 메인페이지가 최근글이자나요~
    그걸 readiz님 스킨처럼 메인화면을 적용시킬려면.. html을 어떻게 구성해야하나요..ㅠㅠ
    막 뜯어보고 해봐두 ㅠㅠ 어렵네용

  • 익명 2014.08.14 14:29

    비밀댓글입니다

  • BlogIcon 뭐하라 2014.08.14 17:08 신고

    여기서도 애드센스 부분은 좀 위험합니다!
    메인페이지가 아닌경우 CoverDiv가 display:none으로 가려지는데, 광고가 로딩만 되고 보이지 않는,
    애드센스에서 엄격히 금지하는 방식입니다.
    애드센스를 넣으려면 메인이 아닐 때 코드를 삭제하는 스크립트도 함께 작성해주어야합니다.

  • - 2014.08.16 15:43

    pc버전에서는 애드센스 하단광고가 카테고리 다른글 좌측에 잘 위치해 있는데
    모바일 버전 애드센스 하단광고는 카테고리 다른글 밑에 들어가 버리네요. 어떻게 방법이 없나요?

  • BlogIcon 해인. 2014.08.31 09:38 신고

    안녕하세요! 반응형스킨을 설치했습니다 메뉴설정도다했는데요

    이상하게 글을 써봤는데 메인화면에 글이 뜨지가 않습니다? 이거 왜이럴까요 ㅠㅠ

  • 알 수 없는 사용자 2014.09.02 23:17

    메인화면의 글제목 하늘색과 댓글달기 버튼하늘색은 어떤걸 건드려줘야 수정이될까요..?

  • BlogIcon 윌리엄디갠 2014.11.30 02:42 신고

    진짜 HTML아에 할줄 모르는데
    하루씨름해서 광고 다 자리잡아 넣고 했어요
    정말 좋은자료 좋은 강의 감사합니다^^
    메인화면에 문구넣기로 광고를 넣었는데 잘 나오긴하는데 괜찮은가요?
    위치가 좀 왼쪽으로 쏠렸는데 중앙에 넣는법 좀 가르쳐 주시면감사하겠습니다;;

  • BlogIcon elisha2672 2015.01.14 03:20 신고

    완전 감사합니다..
    버벅 거리면서 메인 화면 열심히 공사중입니다..ㅎㅎ

  • BlogIcon 대혀니_ 2015.05.02 23:45 신고

    하단에는 못넣나요

  • BlogIcon 길영 2015.07.09 20:39 신고

    http://gilyoung.tistory.com/ 저는 티스토리 메인이 왜 옛날글이 먼저 나오는지 모르겠어요 ㅠㅠ

    • BlogIcon 길영 2015.07.09 20:47 신고

      앗 해결했네요 다른글참고하여 제가 작성한 게시물을 발행눌렀더니 됩니다 ! 감사합니다 스킨너무이뻐요 ㅎㅎ

  • BlogIcon 리타군 2019.05.03 13:15 신고

    스킨 커버기능이 업로드되면서 신규 티스토리 유저들은
    티에디션 기능을 쓸 수 없다더라고요ㅠㅠ