[블로그] FastBoot 상단바에 배너(사진) 넣기

티스토리 블로그를 하는 사람 중 많은 사람들이 FastBoot이라는 스킨을 쓰고있습니다. 그만큼 좋은 스킨이기 때문이겠죠? 하지만 너무나도 많은 사람들이 쓰고 있어 블로그에 개성이 없어지고 있다는 사실에 슬픕니다. 그래서 블로그 상단에 배너를 달아 다른사람들과 좀 차별성을 두고자 합니다.

 

FastBoot 상단바에 배너(사진) 넣기

1. 이런 배너창을 만드는 방법입니다. 우선 배너에 들어갈 사진이 한장 있어야 합니다. 가로는 1920, 높이는 100~130정도의 배너용 사진을 한장 준비해주세요. 

 

※ 해상도가 큰 디바이스로 접속을하면 사진이 두개로 나올 수 있습니다. 바로 위사진처럼요. 사진이 두개로 나오면 빨간색 박스의 안처럼 뭔가 부자연스럽게 연결이 되는것을 보실 수 있습니다. 그렇기에 사진의 왼쪽부분과 오른쪽부분이 자연스럽게 이어질수있는 배너사진이라면 베스트라고 할 수 있겠습니다. 제 블로그 배너사진도 왼쪽부분과 오른쪽부분이 자연스럽게 이어지는 배너입니다. 아는 디자이너 누나가 귀중한 시간 5분을 투자해 뚝딱뚝딱 만들어줬습니다.

 

2. 배너를 만들었으면 달아봐야겠죠?

먼저 블로그 관리 -> 스킨편집에 들어갑니다.

 

3. 파일업로드 탭에 들어가 자신의 배너사진을 추가해줍니다.

 

4. 그런뒤 해당 메모장에 있는 코드를 CSS탭에 붙여넣어줍니다. 제일 첫번째 줄에 보이는 images/자신의배너사진 을 수정해줘야합니다. 첫번째 줄의 height는 배너사진의 높이입니다. 자신의 배너 높이에 맞게 조절해주세요. 이렇게 하고 실행을 시키면 아마 배너사진이 잘 적용 될 것입니다.

FastBoot 배너.txt

다운로드

 

5. 하지만 블로그 타이틀은 흰색으로 바뀌어있지 않을텐데 이것을 흰색으로 바꾸는 방법은 메모장에 있는 소스 중간부분의 주석을 해제한 뒤 HTML의 블로그 타이틀바에 text-title이라고 클래스를 설정해주면 됩니다. 이렇게 하면 저와 같은 형태의 배너가 만들어 질것입니다.

 

저는 흰색으로 했는데 CSS를 좀 수정해서 다르게 바꾸셔도 됩니다. 또 추가로 hover를 줘서 마우스 over시 색상도 줘도 됩니다. 마우스오버 주는법이 궁금한사람은 댓글을 남기면 알려드리도록 하겠습니다.

 

 

[블로그] FastBoot스킨의 본문 크기 늘리는 방법

[블로그] FastBoot 사이드바에 링크형 구글 애드센스 설치하기

[블로그] FastBoot 사이드바에 블로그 차트(순위) 위젯 설치하기

[블로그] FastBoot 달력 모듈 색상 교체 + 커스터마이징

[블로그] FastBoot 사이드바 카운터와 방문자그래프 합치기