티스토리 Fastboot스킨 적용 후 사이드바 만들기

 

티스토리 Fastboot스킨 적용 후 사이드바 만들기 

티스토리 최적화 스킨으로 알려진 Fastboot스킨을 적용하고 나면 가정 먼저 의아한 것이 사이드바가 없다는 겁니다.
사이드바의 필요성이 없는 분이라면 상관이 없겠지만 대부분의 블로거들은 사이드바를 애용하리라 생각됩니다.

그렇다면 Fastboot스킨에서는 사이드바를 사용할 수 없을까요? 고민하던중 정보를 찾게되어 공유하여 드립니다.

 

아래 화면처럼 우측사이드바에 최신글, 베스트글 정보들이 있어서 유용한 컨텐츠와 블로그 들어와서 양질의 컨텐츠를 보여줄수 있어서 좋을듯 하다.

 

 

Fastboot스킨 적용 후 우측 사이드바 만들기

 

아래는 양질의 컨텐츠 적용과 우측 사이드바 적용한 블로그이다.

우측 사이드바가 있어서, 사용자의 정보와 배너, 최근글, 메뉴 카테고리등 블로그 정보를 한눈에 확인할 수 가 있다.

 

 

 

 

아래 그림은 Fastboot V1.6.2를 적용한 후 첫 화면입니다.
현재 포스팅 된것들이 없기 때문에 중간에는 텅 비어있고, 상단 로고와 메뉴 부분 푸터 부분에 관련 정보글 밖에 없습니다.

이번 시간에는 우측사이드 바를 적용하는 시간이기 때문에 아래 글을 따라오시면 쉽게 사이드바를 생성 할 수 있으니 걱정하지 마시고 따라해 주세요.

 

 

 

블로그관리에서 Html/Css 편집창을 열어 줍니다. Ctrl+f(검색)을 통해 document를 검색하면 document_write라는 문구로 시작되는 명령어를 찾을 수 있는데 사진의 붉은 영역부분을 수정해 주면 됩니다.

 

 

 

 

아래 내용들을 복사 해서 위의 붉은 영역부분을 삭제하고 붙여 넣기 하시면 됩니다.

 

-------------------------------------------------------------------

 

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

 

위 내용이 담긴 텍스트 파일을 다운 받으셔서 안에 내용을 복사/붙이기 하시면 됩니다.

 

내용을 변경한 후 저장하고 블로그를 열어보면 혹은 새로고침을 해보면 이렇게 우측에 없던 사이드바가 생성된 것을 확인 할 수 있습니다.
이후 사이드바의 순서 변경이나 추가/삭제는 관리자> 블로그관리홈> 꾸미기> 사이드바에서 변경 가능합니다.

 

 

 

<우측사이드바 적용된 메인화면>

 

 

티스토리 Fastboot스킨 우측 사이드바가 적용이 되었다면, 이제 한번 메인화면 첫페이지를 적용하기 위해서 티에디션을 사용해보자.

 

티스토리 Fastboot스킨 티에디션으로 첫페이지 꾸미기