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

 

티스토리 fastboot 사이드바 제목 만들기

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

 

 

 

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

 

 

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

 

 

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

 

 

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

 

 

 

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 -> 카드모양

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

 

위 소스는 아래 파일 첨부를 다운 받으면 된다.

 

Fastboot 사이드바 HTML배너모듈.txt

 

 

 

좀전에 복사해 놓은 구글검색창 코드 소스를 복사한 후"여기에 코드를 넣으시면 됩니다" 부분에 붙여넣기를 한다.
그리고"제목"부분에 원하는 제목을 넣는다. 난"Google Translator"라고 했다.

 

참고로 위 소스중 아래 부분은 제목바에 있는 그림 아이콘 태그들이다. 그러므로 이 부분을 다 복사해서 넣으면 안된다.
꼭 위에 html소스만 복사해서 넣어야 한다는 점 유의 바란다.

 

그럼 방금 말한 아이콘을 넣어보자. 구글번역창이니 아무래도 말풍선이나을 것 같다. 말풍선 태그는 "comments"이니
이것을 위에 소스중 i class="fa fa-뒤에 credit-card를 지우고 그곳에 넣으면 된다.

이렇게 해서 소스 만들기는 다 끝났고. 이제 적용만하자.

수정한 html소스를 드래그해서 복사한후 블로그 관리페이지에 다시 들어가 구글검색창 편집 코드창에 붙여 놓고 저장하고 나오면 된다.
그리고 블로그로 들어가 보면 아래 그림처럼 머리가 잘 붙어 있는것을 확인할 수 있다.

 

 

 

이것을 토대로 추가적으로 만들 다른 배너들에 적용하면 된다.