반응형 스킨: 2개의 글



일목요연한 티스토리 블로그 만들기! [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





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

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

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







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

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

감사합니다. ^_______^





이 포스트 공유하기

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

모바일에서 타이틀 클릭시 홈으로 이동하게 설정하기[FastBoot 스킨 사용자/ 티스토리]

Posted by HAPPYJINI
2018.06.03 05:24 Blog 101/Tistory

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

반응형 스킨인 FastBoot 스킨을 사용하시는 분들이라면 모바일에서 자신의 티스토리 블로그로 접속해서 포스팅 글들을 보다가, 블로그의 타이틀을 클릭하여 홈화면으로 이동하려 해도 이동이 되지 않는 것을 알게 되실거에요. 그 것은 반응형 스킨인 패스트붓(FastBoot)을 사용하시기 때문입니다. 그래서  FastBoot 사용자라면 설정을 따로 해주셔야 하는데, 어렵지 않습니다.



모바일에서 타이틀 클릭시 홈으로 이동하게 설정하기[패스트붓 스킨 사용자/ FastBoot 스킨 사용자/ 티스토리]


[글을 보다가 모바일 상단의 타이틀(HAPPYJINI.COM)을 클릭하여도 메인으로 돌아가지 않습니다.이 부분을 설정하는 포스팅입니다. 위의 이미지는 변경 한후의 캡쳐 사진이여서 타이틀이 파란색으로 보이지만 설정하기 전에는 타이틀은 흰색입니다.]




티스토리 모바일에서 타이틀 클릭시 홈으로 이동하게 설정하기 [Fast Boot 스킨 사용자]



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



모바일에서 타이틀 클릭시 홈으로 이동하게 설정하기[FastBoot 스킨 사용자/ 티스토리]1


2. 핑크색 화살표가 가리키고 있는 'html편집'을 클릭합니다.



모바일에서 타이틀 클릭시 홈으로 이동하게 설정하기[FastBoot 스킨 사용자/ 티스토리]2



3.HTML에서 Ctrl + F키를 누르면 검색 창이 뜹니다. 그 곳에 fixedNav 를 검색합니다.



모바일에서 타이틀 클릭시 홈으로 이동하게 설정하기[FastBoot 스킨 사용자/ 티스토리]3


모바일에서 타이틀 클릭시 홈으로 이동하게 설정하기[FastBoot 스킨 사용자/ 티스토리]4



==> 상단의 검색창에 fixedNav를 검색되어지면 아래 부분을 보시면 (핑크색 화살표) [##_title_##] 부분을 찾을 수 있습니다.


4.[##_title_##]을 →  <h4><a href="/">블로그이름</a></h4>로 변경합니다.




모바일에서 타이틀 클릭시 홈으로 이동하게 설정하기[FastBoot 스킨 사용자/ 티스토리]5


(제 블로그 이름인 HAPPYJINI.COM을 넣어 변경했습니다.)


5. 변경 사항을 저장한 후 모바일에서 확인합니다.




모바일에서 타이틀 클릭시 홈으로 이동하게 설정하기[FastBoot 스킨 사용자/ 티스토리]7



모바일로 가서 타이틀(HAPPYJINI.COM)을 클릭하면 홈으로 이동되는 것을 확인하실 수 있습니다.

설정이 제대로 됐을 경우 타이틀이 파란색으로 바뀌게 됩니다.

하지만 이 부분도 설정으로 원하는 컬러로 바꿀 수는 있습니다. 나중에 다른 포스팅에서 함께 올리도록 하겠습니다.






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

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

감사합니다. ^_______^



이 포스트 공유하기

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

티스토리 툴바