패스트부트 스킨: 1개의 글



일목요연한 티스토리 블로그 만들기! [Fastboot 스킨 사용자 사이드바 설정하기]

Posted by HAPPYJINI
2018.06.04 02:05 Blog 101/Tistory


안녕하세요. HAPPY JINI 입니다.


반응형 스킨 FastBoot(패스트붓)을 적용했다면, 메인에서 사이드바가 없는 것을 알게 될 것 입니다. 사이드바가 필요 없을 수도 있겠지만 아무래도 사이드바가 있는 것이 효율적이고 편리합니다. 물론 개인적인 제 의견입니다. 

티스토리에 최적화 되어 있는 스킨이라고 해서 패스트부트 스킨을 적용한 것이였는데 솔직히 살짝 번거롭긴 합니다. 이 것 저것 설정해야 되는게 은근히 있는 편이라 ^^ 하지만 처음에 이렇게 설정해놓고 나면 관리하는 입장에서도 편하고 보는 입장에서도 한 눈에 블로그가 눈에 들어와 효율적이기는 합니다.




그럼 편리함을 위해서 우측에 사이드바를 적용해 보도록 하겠습니다.


FastBoot 스킨으로 설정 후 우측 사이드바 설정하기



현재 HAPPYJINI>COM은 우측 사이드바 설정이 되어있기 때문에 사용자 정보, 카테고리,최근글 등의 정보가 일목요연하게 정리되어 있습니다.

한결 보기에도 편하시지요. ^^




일목요연한 티스토리 블로그 만들기! [패스트붓 스킨 사용자/Fastboot 스킨 사용자 사이드바 설정하기]


일목요연한 티스토리 블로그 만들기! [Fastboot 스킨 사용자 사이드바 설정하기]2



일목요연한 티스토리 블로그 만들기! [Fastboot 스킨 사용자 사이드바 설정하기]3


[HAPPYJINI>COM은 이미 사이드바와 티스토리의 티에디션이 적용된 후의 블로그 상태이기 때문에 서로 다를 수도 있습니다. 이 점 참고하시길 바랍니다.]






저의 블로그처럼 사이드바 설정을 원하신다면 따라해 주시면 됩니다.


1.블로그 관리(manage) => 꾸미기 => 스킨편집 버튼을 클릭합니다.



일목요연한 티스토리 블로그 만들기! [Fastboot 스킨 사용자 사이드바 설정하기]4


==>html편집 버튼을 누르시면, 아래와 같은 화면이 뜹니다.



일목요연한 티스토리 블로그 만들기! [Fastboot 스킨 사용자 사이드바 설정하기]5



==>Ctrl +F를 누르면 검색창이 뜹니다. 검색창에  document 라고 검색합니다.

그러면 위와 같이 doument.wirte 로 시작하는 html 소스들이 나옵니다.회색으로 칠해져 있는 부분의 소스들을 삭제하고 그 자리에 아래의 내용(파란상자 안의 내용)들을 복사해서 붙여 넣고 저장합니다.





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>')


FastBoot SideBar.txt


↑↑↑ [위의 파란 상자 안에 있는 내용의 텍스트 파일입니다. 다운로드 받으신 후 복사해서 => 붙여넣기 해주셔도 됩니다.]



저장까지 마치고, 새로고침을 하여 우측에 사이드바가 생성되었는지를 확인하시면 됩니다.




일목요연한 티스토리 블로그 만들기! [Fastboot 스킨 사용자 사이드바 설정하기]7


2. 추후 사이드바의 순서 변경, 메뉴 추가를 원하시면 블로그 관리(manage)  => 꾸미기 => 사이드바를 클릭합니다.



일목요연한 티스토리 블로그 만들기! [Fastboot 스킨 사용자 사이드바 설정하기]8





==> 좌측에 기본 모듈이 있고 우측에 사이드바가 있습니다.

지금 이미지는 제 블로그의 이미지이니 참고만 하시고, 추가할 것 이 있으면 좌측 기본 모듈에서 플러스 버튼을 눌러 추가해주시면 우측 사이드바로 추가가 됩니다. 사이드 바의 메뉴, 순서 변경 등을 원하시는대로 설정해주신 후 변경사항 저장 버튼을 클릭하면 됩니다.

패스트 부트 스킨의 장점은 티스토리에 최적화되어 일목요연한 블로그를 만들어 주는 것입니다. 단순 블로그 느낌이 아니라, 잘 활용하면 웬만한 사이트 보다 나은 듯 합니다. ^^







눌러주시는 공감 () 은 큰 힘이 됩니다.

로그인하지 않으셔도 공감은 가능합니다.

감사합니다. ^_______^





이 포스트 공유하기

페이스북
트위터
구글+
네이버
밴드
카스

티스토리 툴바