티스토리 fastboot 스킨 적용 후 화면에 사이드바 만들기

티스토리 fastboot 스킨 적용 후 화면에 사이드바 만들기

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

Fastboot V1.6.2를 적용한 후 첫 화면입니다. 상단에는 최신글이 하단에는 최신글 순서대로 글별 메인사진이 나열되어 있는에 우측 혹은 좌측에 있어야 할 사이드바가 없는 것을 확인 할 수 있답니다.






아래 글을 따라오시면 쉽게 사이드바를 생성 할 수 있으니 걱정하지 마시고 따라해 주세요.

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


document.write('<스타일>#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);}
')

위 내용을 마우스로 드래그한 다음 복사/ 붙이기 하시면 됩니다. 단, 소스를 임의로 변경해 놨습니다. 그렇지 않으면 HTML로 인식을해서 표시가 안되서 수정을 했네요.

블로그에 붙여 넣기 하실때에는 첫줄의 스타일을 style로 변경해 주시면 됩니다.

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