티스토리 fastboot 우측 사이드바 배너 위 제목바 만들기

티스토리 쉽게 따라하기 - fastboot 우측 사이드바 배너 위 제목바 만들기

우측에 사이드바가 있는데 각종 메뉴들을 넣을 수 있는 자리이다. 이곳의 기본 메뉴들을 보면 위에 지붕이 덮여 있고 그곳에 제목이 있다. fastboot스킨을 적용하면 기본적인 사이드바들은 아래 그림처럼 잘 되어 있는데 문제는 새로운 사이드바 메뉴를 HMTL배너출력을 이용해서 만드는 경우에 배너위 제목바를 따로 설정해 주어야 한다는 것이다. 사실 이부분은 fastboot스킨 뿐만 아니라 기본 스킨을 쓰고 있어도 마찬가지다.

바로 전 포스팅에 구글맞춤검색엔진인 구글검색창달기를 이야기 했었는데, (안보신 분들은 아래 링크를 참고하시길 바라고 )

티스토리 우측 사이드바 구글 검색창<Google Search bar> 넣기

구글검색창 코드를 넣어서 사이드바에 넣으면 아래 그림처럼 보인다. 그래서 추가로 설정을 해주어야 다른 사이드 바처럼 완전체의 모습을 갖출수가 있다.

그럼 사이드바 배너위 제목바를 만들어 보자.

fastboot 사이드바 배너위 제목바 만들기

저번 포스팅의 구글 검색창 위에 제목바를 넣어 보겠다.

블로그관리로 들어가서 블로그관림홈> 꾸미기> 사이드바 로 들어간다.

그럼 그림과 같이 저번에 만들어 놓은 구글검색창이 보인다. 꼭 검색창이 아니더라도 만들어 놓은 배너가 있다면 그것에 적용해도 되고 새롭게 하나 만들어가면서 실행해 보아도 된다.

구글검색창 오른쪽 편집을 클릭하면 창이 생기면서 그곳에 구글 검색창 코드가 있는것이 보인다.

편집하기 좋게 그 안에 있는 소스를 모두 선택해서 복사 혹은 잘라내기를 하고 메모장을 열어서 그곳에 붙여 넣는다.

이제 그 코드를 아래 소스 중간에 넣기만 하면 된다.

<s_sidebar_element>
<div class="panel panel-default">
<h4 class="panel-heading"><i class="fa fa-credit-card"></i> 제목 </h4>
<div class="panel-body" style="text-align:center;">

여기에 코드를 넣으시면 됩니다.

</div>
</div>
</s_sidebar_element>

============================

위에 코드만 적용

============================

아이콘 태그

comments -> 대화모양(2개)
flash -> 번개모양
pencil -> 연필모양
comment -> 대화모양(1개)
category -> 목록모양
default -> 새파일모양
tags -> 책갈피모양
calendar -> 달력모양
folder -> 폴더모양
random -> 랜덤재생모양
link -> 연결고리모양
chart-o -> 그래프모양
rss -> 와이파이모양
search -> 돋보기모양
credit-card -> 카드모양