FastBoot 티스토리 추천 포스트 모듈 추가하기

FastBoot 티스토리 추천 포스트 모듈을 사이드바에 추가시켜보도록 하겠습니다. 직접 진행하면서 만들었기 때문에 따라하시기만 한다면 문제없이 무난하게 적용될 것입니다. 혹시 막히는 부분이 생기시면 댓글달아 주시기 바랍니다. (티에디션으로 티스토리 꾸미기)

테슬라의 모든 정보를 모으는 블로그,

테정원을 검색하세요!!

글, 사진 및 이미지 ▶ CopyLeft(C) 김성훈

#CopyLeft(C)는 저작권의 반대 개념으로, 카피라이트(CopyRight)와 반대되는 말입니다. '지적소유권' 이 오히려 정보의 물길을 막는 장애물이 되고 있는 현실을 극복하기 위한 운동입니다#

#사진과 이미지의 일부는 퍼온 것도 있습니다#

 블로그 

FastBoot 티스토리 추천 포스트 모듈 추가하기

당연한 이야기이지만 티스토리 반응형 스킨인 FastBoot1.6.2가 설치된 상태에서 시작합니다.

FastBoot 1.6.2 설치하는 방법 <- 클릭!

FastBoot 티스토리 사이드바에는 최신글, 카테고리 모듈 등이 들어갑니다. 그런데 이런 모듈엔 인위적으로 포스팅 글을 넣을 수 없습니다. 하지만 추천 포스트 모듈을 만들면 사이드바에 본인이 원하는 글을 노출시킬 수 있습니다.

(클릭하면 크게 보실 수 있습니다.)

사이드바에 추천 포스트 모듈을 설치한 모습입니다.

설치 시작

먼저 썸네일 작업부터 해주겠습니다. 썸네일이란 제목 앞에 나오는 이미지를 말합니다. 썸네일 이미지는 픽셀 80x80으로 해주시면 되겠습니다. 첨부파일 제목은 영어로 하셔야 업로드 됩니다.

티스토리 블로그 관리에서 (꾸미기 -> 스킨편집 -> html 편집)을 클릭합니다.

썸네일 이미지를 업로드해줍니다. (제목은 영어로!)

링크 주소를 복사해놓습니다.

첨부파일

FastBoot 사이드바 모듈.txt

이제 첨부파일을 수정해보겠습니다. 파일을 열어주세요!

(클릭하면 크게 보실 수 있습니다.)

<h4 class="panel-heading"><i class="fa fa-flash"></i> 박스제목넣기</h4>

<ul class="list-group list-group-flush">

<li class="list-group-item">

<a href="/★"><span class="thumb"><img src="■" alt=""></span>

<div style="text-indent:-4px"><i class="fa fa-angle-right"></i>  제목넣기

<span class="name"><span>●</span></span>

<div class="clearfix"></div></div></a>

수정하실 부분은 총 5군데입니다.

Ctrl+F를 이용하여 s_sidebar를 검색합니다. 빨간색 영역에 수정한 첨부파일을 붙여넣고 저장합니다.

이제 사이드바 설정으로 가서 생성된 추천 포스트 모듈을 추가해줍니다. 추천 포스트 모듈 박스엔 번개표가 적용됩니다. 전 추천글 박스에 별표 이미지 하나, 대화표 이미지 하나를 쓰려고 공지글 모듈로 만들었습니다. 

<s_sidebar_element>

<!-- 추천 포스트 모듈 -->

<div id="recommended" class="panel panel-default">

<h4 class="panel-heading"><i class="fa fa-flash"></i> 박스제목넣기</h4>

<s_sidebar_element>

<!-- 공지글 모듈 -->

<div id="notice" class="panel panel-default">

<h4 class="panel-heading"><i class="fa fa-comment"></i> 박스제목넣기</h4>

사이드바 설정에 나오는 모듈 제목은 recommended, notice에 의해서 바뀌고, 박스에 표시되는 이미지는 fa fa-flash, fa fa-comment에 의해서 바뀝니다. 참고하시기 바랍니다.

여기까지 하면 이렇게 추천 포스트 모듈이 만들어집니다.

블로그 꾸미기 관련글

FastBoot 티스토리 서식 활용하기

FastBoot 티스토리 기본 글꼴, 글자크기 설정하기

FastBoot 티스토리 추천 포스트 모듈 추가하기

FastBoot 티에디션으로 티스토리 꾸미기

FastBoot 사이드바 카운터, 방문자 그래프 합치기

FastBoot 상단바 꾸미기

FastBoot 애드디스로 SNS 공유하기 버튼 만들기

FastBoot 상단에 배경 이미지 설정하기

FastBoot 최상단 꾸미기 총정리

FastBoot 상단메뉴 영어에서 한글로 바꾸기

FastBoot 블로그 관리 설정 최적화

FastBoot 1.6.2 설치

도움이 되셨다면 로그인 없이 가능한

아래 하트♥공감 버튼을 꾹 눌러주세요!