[FastBoot]03.사이드바, 어디갔니?

---

모두 FastBoot 스킨을 다운받고 자기 블로그에 스킨적용을 했나요? 그렇데 첫화면에 사이드바가 없습니다. 사이드바의 유무에 대한 것은 개인 취향입니다. 하지만 사이드바의 역할은 보기보다 많습니다. 카테고리, 공지사항, 프로필, sns연동, 방문자수, 구글 애드센스, rss 등 여러 모듈이 한 공간에서 관리가 되기 때문이죠. Readiz 선생님께서 FastBoot는 사이드바가 기본적으로 나오지 않게 설정하셨습니다. 이 부분은 메인 CSS를 수정해주시면 쉽게 사이드바를 메인 화면에 삽입할 수 있습니다.

· 사이드바를 나타나게하기 위해서 메인 CSS를 수정하자 

 

 자세한 내용은 여기를 클릭하면 나와 있습니다. FastBoot를 쉽게 접근하기 위해서 본 포스팅에서도 삽입하도록 하겠습니다. 일단 메인 CSS로 들어가야겠죠. 처음하시는 분들은 메인 CSS를 잘 모르실 수도 있습니다. 첨부파일로 차근차근 따라오세요.

 자신의 블로그 '관리자 페이지'에 들어가서 '꾸미기→HTML/CSS 편집'을 클릭합니다. 네이버에서도 '레이아웃·위젯 설정'에 들어가 제약적인 HTML/CSS를 수정할 수 있지만 티스토리만큼 자유롭지 못합니다. 자유로운 스킨 수정만큼은 티스토리 블로그가 절대적인 우위에 있습니다.

---

 이렇게 미리보기 페이지와 정체모를 코드들이 난무하는데요. 우측 상단 빨간 테두리 안에 'HTML'를 클릭합니다. 이 부분을 바로 메인 전용 CSS 를 수정할 수 있는 공간입니다. 잘 모르시면 패스하셔도 됩니다.

---

 다음 찾기 단축기, [Ctrl + F]를 눌러  ' FastBoot Index by Readiz '를 삽입해서 찾아줍니다. 위 이미지 파일을 보면 빨간색 네모 테두리가 있는데요. 맨 위에는 <script>, 맨 밑에는 </sctipt>가 있습니다. 일반적으로 코드는 열기·닫기로 코딩을 해야합니다. 저기 안에 있는 코드는 javascript(자바스크립트)로 코딩되어 있습니다. 코드 옆에 번호, 49번을 보시면 "document.write('<style>~중략~</style>')"로 되어있습니다. 'document.write('')'는 텍스트를 화면에 출력해주는 명령어 입니다. 그 안에 CSS를 삽입되어 있는 것이죠. 잘 모르면 모두 패스합니다. 

       document.write('<style>#sidebar,#content{display:none}#coverDiv{min-height:100%;margin-bottom:50px;display:block;}#coverDiv img{float:right; padding-left:10px; max-width:100%}#coverDiv .info p{margin-bottom:50px;}#coverDiv .col-md-12,#coverDiv .col-md-6{padding:10px}#coverDiv .col-md-3 img{float:none;display:block;margin:auto;padding:0;}#coverDiv .col-md-12 img{max-height:200px;}#coverDiv .col-md-6 img{max-height:150px;}#coverDiv p.des{font-size:12px;}#coverDiv .col-md-12 img{float:left;padding-left:0;padding-right:10px;}#coverDiv div.thumbImages{margin:30px 10px;height:185px;overflow:hidden;text-align:center;}#coverDiv div.thumbImages img{padding:0;margin:5px;float:none;}#coverDiv h5{margin-bottom:5px;}#coverDiv .pubDate{float:right;font-weight:bold;}#coverDiv .loading{height:1080px;}#coverDiv img{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}#coverDiv img:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}#outer_btn_left,#outer_btn_right{display:none !important;}@media screen and (max-width: 767px) {#coverDiv .col-md-12 p.des, #coverDiv .col-md-6 p.des{display:none}#coverDiv .col-md-12 img, #coverDiv .col-md-6 img{padding:0;width:100%;height:auto;max-height:none;}}.contentPadding{background-color:#ffffff;padding:10px;margin:5px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);box-shadow: 0 1px 2px rgba(0, 0, 0, .2);}</style>')

 이 명령어를,

document.write('<style>#leftContent{display:none;}#coverDiv{float:left;width:75%;margin-top:-15px;}@media screen and (max-width: 991px){#coverDiv{width:100%;margin-top:0}}#coverDiv{min-height:100%;margin-bottom:50px;display:block;}#coverDiv img{float:right; padding-left:10px; max-width:100%}#coverDiv .info p{margin-bottom:50px;}#coverDiv .col-md-12,#coverDiv .col-md-6{padding:10px}#coverDiv .col-md-3 img{float:none;display:block;margin:auto;padding:0;}#coverDiv .col-md-12 img{max-height:200px;}#coverDiv .col-md-6 img{max-height:150px;}#coverDiv p.des{font-size:12px;}#coverDiv .col-md-12 img{float:left;padding-left:0;padding-right:10px;}#coverDiv div.thumbImages{margin:30px 10px;height:185px;overflow:hidden;text-align:center;}#coverDiv div.thumbImages img{padding:0;margin:5px;float:none;}#coverDiv h5{margin-bottom:5px;}#coverDiv .pubDate{float:right;font-weight:bold;}#coverDiv .loading{height:1080px;}#coverDiv img{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8;}#coverDiv img:hover{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);-moz-opacity:1;opacity:1;}#outer_btn_left,#outer_btn_right{display:none !important;}@media screen and (max-width: 767px) {#coverDiv .col-md-12 p.des, #coverDiv .col-md-6 p.des{display:none}#coverDiv .col-md-12 img, #coverDiv .col-md-6 img{padding:0;width:100%;height:auto;max-height:none;}}.contentPadding{background-color:#ffffff;padding:10px;margin:5px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);box-shadow: 0 1px 2px rgba(0, 0, 0, .2);}</style>') 

 이 명령어로 바꾸어 줍니다. 제 블로그는 링크가 되지 않기 때문에 아래 메모장을 다운로드 하셔서 복사·붙혀넣기 하시면 됩니다.

사이드바 나타나게 하기.txt

작업이 완료되었으면 꼭 저장을 클릭해주세요.

 그렇게 하고나서 자신의 블로그의 메인 페이지에 들어가시면 사이드바가 나타난 것을 확인할 수 있습니다. 코딩자체는 어렵지만 Readiz 선생님께서 만들어놓으신 코드를 삽입만 해주면 끝나는 간단한 작업입니다. 하지만 처음이니까 차근차근 따라해보세요. 다음 시간에는 '사이드바 좌측으로 옮기기'와 사이드바 삽입 및 제거'하는 방법을 살펴보도록합시다. 가능하다면 '사이드바 색상 변경'까지 해보아요. 감사합니다:)

관련글

[FastBoot]02.FastBoot 스킨등록 방법

[FastBoot]01.제 블로그 스킨은?

[Tistory Tip]브랜드 블로그의 첫걸음, 도메인

포스터 사진 Readiz Logo