이전에 3.1버젼에서 약간의 버그를 수정하고 디자인과 기능을 추가했습니다.

사용자들이 요구에 맞게 선택의 폭을 넓혔습니다. 이전보다 다양한 기능이 있으니 업데이트 내용을 꼭 확인하시고 사용하시기 바랍니다.


스킨 배포에 대해서는 여러번 이야기 했으니 공지사항의 스킨 배포에 대한 글을 읽어보시고 메일로 신청하시기 바랍니다.

업데이트가 단순한 업데이트가 아니네요.

3.1버젼이 이전에 비해 바뀐것이 없어서 이번에는 좀 많이 다듬었습니다.

그래서 재탄생한 Bootstrap_TS_ver.3.2 입니다.


이번에 초점을 맞춘것은 광고입니다.

부트스트랩은 반응형 레이아웃입니다.

브라우져의 너비에 따라 레이아웃이 맞게 변합니다.

특별한 마크업 요소를 넣지 않는한 bootstrap-responsive.css 에서 다 잡아주기 때문이지요.

반응형이다보니 고정너비의 광고를 넣으면 딱맞게 떨어지지가 않았습니다. 

그래서 이번에는 데스크탑에서는 딱맞게 떨어지도록 너비를 조정했습니다.


다양한 크기와 다양한 위치에 넣을수 있도록 하였으니 변경된 점을 잘 보시고 수정하시기 바랍니다.

안되는분은 꼭 댓글로 질문하세요.


먼저 전체 스샷을 참고하시기 바랍니다. 어느 위치에 광고가 들어가고 어떤 크기가 들어가는지 이미지로 표시되어 있기 때문에 보면 금방 알 수 있습니다.



더보기


자 갑니다.

1. 블로그 제목.

이전에 부트스트랩 스킨은 해더에 고정되어 있는 메뉴바를 사용했기 때문에 로고(타이틀) 부분이 좀 강조가 안된듯이 보였습니다.

그래서 이걸 보강하고, 선택할 수 있게 했습니다.


아래에서 보듯 상단 메뉴가 아래 제목 부분과 제목아래 블로그 설명부분을 넣었습니다.



이 부분이 싫은 분을 위해 사이드바에서 삭제할 수 있도록 했습니다.

사이드바에서 보여지는 부분은 s1-블로그제목 입니다.


2. 구글광고 728-90.

총 3군데에 넣을 수 있습니다.

위에 스샷을 첨부했으니 어느 위치인지는 참고하세요.

사이드바에서 관리가 가능합니다. 이름은 s2-본문최상단730광고 , s3-댓글위730광고 , s5-맨아래730광고 입니다.

사이드바 스샷은 아래에서 참고하세요. 같이 설명하겠습니다.


3. 탭 추천 포스트.

블로그에 관련 포스틀를 사용하고자하면 사용하시면 됩니다. 

단 링크는 수동으로 수정해줘야 합니다.

수정할때는 skin.html 을 에디터에 붙여넣기한 다음 작업하세요. 탭 추천 포스트를 검색하셔서 아래의 링크와 제목만 수정하시면 됩니다.





만약 사용하지 않는다면 사이드바에서 제거하시면 됩니다.


4. 사이드바 구글광고.

사이드바에서 구글광고를 넣을 수 잇는 사이즈는 총 3가지 입니다.

스샷을 보시면 알겠지만 125-125, 300-250, 336-280 총 3가지 형태입니다.

125-125는 광고대신 배너로 사용해도 됩니다.

사용안하시면 마찬가지로 사이드바에서 제거하면 됩니다.


수정하는 법.

제가 코드를 넣기 편하게 주석을 달아놨습니다.

주석 중간에 있는 코드를 광고 코드나 배너코드로 변경만 해주시면 됩니다.





5. 사이드바 관리.

자 이게 제일 중요합니다.

사이드바 관리에서 s1, s2, s3.... 등으로 나가는 머릿말은 사이드바1, 사이드바2, 사이드바3 .... 등을 의미합니다.

곧 메뉴들은 각각 같은 위치에 들어가야만 에러가 안납니다.


s2-본문최상단730메뉴가 사이드바 3 위치에 가면 안된다는 말입니다. 아시겠지요.

아래 스샷을 보시면 사이드바에 대한 이해가 가실겁니다.




6. SNS 링크.

사이드바에 sns 링크가 있습니다. 이걸 사용안하시면 사이드바에서 제거하면 됩니다.

만약 사용하실려면 링크를 본인것으로 수정해줘야 합니다.

사진을 첨부하니 참고하세요.


7. 자바스크립트 코드 최적화.

스킨에는 자바스크립트가 별로 안들어갑니다.

만약 부트스트랩에서 사용하는 코드를 사용하고 싶다면 스킨에 포함된 script.js 를 수정하면 됩니다.

여기에는 부스트트랩에서 제공하는 자바스크립트 모두와 코드하이라이트 기능을 하는 prettify.js 도 모두 포함이 되어 있습니다.

물론 css 에 다 들어가 잇습니다.

사용할건지 안할건지만 판단하면 됩니다.


배포하는 스킨에는 스킨에 포홤된 스크립트느 모두 주석처리햇으니 사용할려면 주석을 해제하면 됩니다.

주석처리한 코드


사용할려면 아래처럼 맨앞에 // 주석을 해제하면 됩니다.




한가지 더.

사이드바에서 처음부터 보여지는 사이드바 메뉴는 사이드바의 광고와, 공지사항, 카테고리, 최근글, 태그, RSS 입니다.

이 순서를 변경하고 싶다면 skin.html 을 수정하면 됩니다.

수정하는 방법도 간단하니 잘 보세요.


skin.html 에서 sidebar_show 를 검색합니다.

아래 스샷에서보듯 widget_content sidebar_show 게 같이 있으면 처음부터 보이는것이고, widget_content 만 있으면 안보이는 겁니다.

처음부터 보이고 안보이고의 순서를 바꾸고 싶다면 sidebar_show 만 넣고 빼면 됩니다.




8. 검색부분.

빠뜨려서 다시 작성합니다. ㅎㅎㅎㅎ.

기본 스킨에는 티스토리 검색을 사용할수 있도록 배포됩니다.

만약 구글검색을 사용하고자하면 주석을 그대로 바꿔주시면 됩니다.




해당 스킨의 배포는 공지사항을 참고하세요.



1 현재 쓴글에서 자바스크립트 부분이 업데이트 되었습니다.
2 댓글 보이고 감추기 부분에서 숫자 부분이 약간 수정되었습니다.. 수정된 것은 아래를 참고하세요.
3 배포파일에 태그 클라우드를 표시해주는 tagcloud.swf가 빠져서 추가했습니다.

tagcloud.zip



댓글보이고 감추기부분 html

<!-- 기본 마크업 -->
<a href="#rp" onclick="[#\#_article_rep_rp_link_##]" class="btn" id="aComment">
	<i class="icon-comment"></i> COMMENT
	<s_rp_count> 
		<span>[#\#_article_rep_rp_cnt_##]</span>
	</s_rp_count>
</a>
<a href="#tb" onclick="[#\#_article_rep_tb_link_##]" class="btn">
	<i class="icon-share"></i> TRACKBACK
	<s_tb_count> 
		<span>[#\#_article_rep_tb_cnt_##]</span>
	</s_tb_count>
</a>

<!-- 수정된 마크업, COMMENT TRACKBACK 의 위치가 변경되었습니다. -->
<a href="#rp" onclick="[#\#_article_rep_rp_link_##]" class="btn" id="aComment">
	<i class="icon-comment"></i> 
	<s_rp_count> COMMENT
		<span>[#\#_article_rep_rp_cnt_##]</span>
	</s_rp_count>
</a>
<a href="#tb" onclick="[#\#_article_rep_tb_link_##]" class="btn">
	<i class="icon-share"></i> 
	<s_tb_count> TRACKBACK
		<span>[#\#_article_rep_tb_cnt_##]</span>
	</s_tb_count>
</a>


댓글

  1. 2012.10.20 06:33 신고 BlogIcon 스마트 메신저  댓글주소  수정/삭제  댓글쓰기

    얼마 전부터 3.1을 쓰기 시작했는데요, 3.2 버전도 기다려 지네요.

    프로그램의 크기를 따지기 이전에 공개 버전이라 신경이 많이 쓰이셨을 텐데...
    고생 많이 하셨겠네요.

    • BlogIcon 대문 demun 2012.10.20 22:24 신고  댓글주소  수정/삭제

      매번 만들고 나면 후회합니다. 더 잘만들걸하고....

      그래서 또 업데이트 하곤 합니다....지겹죠..ㅎㅎㅎㅎ

      이번에는 제가 이전에 실수한것도 있고, 버그도 잡을겸....그리고 반응형에서 고정된 광고를 넣기 쉽게 제작되었습니다.

      한가지 시만틱마크업이 빠져서...한번더 업데이트 하고 싶은 맘이 잇네요..

    • BlogIcon 스마트 메신저 2012.10.22 23:39 신고  댓글주소  수정/삭제

      네, 고생하신 만큼 상당히 좋아진 것 같습니다.(완성도가 더 높아진 것 같습니다.)
      저는 아직 광고 부분은 필요한 것 같지 않아서 적용 하지 않고요, 제목 부분만 적용해 보려고 합니다.
      구글 맞춤검색도 3.1에서 쓰던 블로그 내에서 검색하는 부분을 그대로 쓰다가 나중에 적용해 볼 생각입니다.
      아직은 3.1을 더 연구해 보고 난 후 더 개선해 보려고요 ^^
      수고 많으셨습니다. ^^

  2. 2012.10.20 20:39 신고 BlogIcon 니나잘해™  댓글주소  수정/삭제  댓글쓰기

    3.2 버전으로 업데이트 되었네요!!

    더욱더 좋아졌네요!

  3. 2012.10.21 22:17 신고 BlogIcon 라임's  댓글주소  수정/삭제  댓글쓰기

    스킨 정말 멋지네요.. 예전에 쭉 대문님 스킨 써오다가 지금은 다른분 스킨 사용중인데, 이번 스킨도 너무 탐납니다.. 대문님은 정말 티스토리 스킨 만드는데 엄청나게 공을 들이시는 것 같네요.. 대단하십니다 :-)

  4. 2012.10.23 21:07 신고 BlogIcon Seunghyuni  댓글주소  수정/삭제  댓글쓰기

    심플하고 깔끔한 스킨 맘에드네요.^^
    요즘 블로그 운영을 천천히 다시시작하고 있어서
    다운받기는 불가능하겠네요.ㅠ ㅠ

    좀 더 많이 활성화 된 이후에 다운로드 신청해봐야겠습니다.ㅎ

    • BlogIcon 대문 demun 2012.10.24 13:24 신고  댓글주소  수정/삭제

      블로그 글 갯수에 대한 이야기는 테스트로 스킨을 사용하는 분들때문입니다.
      정상적으로 블로그를 하시는 분들에게는 걍 배포합니다.
      원하시는 스킨을 말씀해주세요.

  5. 2012.10.25 11:59 신고 BlogIcon 비톤  댓글주소  수정/삭제  댓글쓰기

    본문글 너비 조절을 할수있는건가요??
    심플해서 스킨 너무 맘에들어요~

    • BlogIcon 대문 demun 2012.10.26 12:03 신고  댓글주소  수정/삭제

      부트스트랩은 반응형 디자인입니다.
      그리드 시스템을 사용합니다.
      본문에 해당하는 곳은 span8로써 기본은 770px 인데요. 브라우져를 좁히면 사이즈는 좁아집니다.

      자세한 내용은 http://twitter.github.com/bootstrap/scaffolding.html#gridSystem 를 참고하시면 될겁니다.

      결론은 늘릴수도, 줄일수도 있다라는 점입니다.

  6. 2012.10.30 15:39 신고 BlogIcon 니나잘해™  댓글주소  수정/삭제  댓글쓰기

    Bootstrap_TS_ver.3.2 배포 압축파일에 tagcloud.swf 빠져있습니다.

    이상하게 안되서.. 소스를 보고 프로그램 리스트를 보니
    tagcloud.swf 없는걸 발견했습니다.

    좋은 스킨 잘 사용하겠습니다.

  7. 2012.10.31 15:28 신고 BlogIcon 코세이  댓글주소  수정/삭제  댓글쓰기

    감사합니다 ^^

    잘쓰겠습니다.

  8. 2012.11.07 21:04 신고 BlogIcon LINE-POXY  댓글주소  수정/삭제  댓글쓰기

    대문님 스킨 잘 받았습니다. ^^

    오늘 7일 포스팅 올렸습니다.

    09일에 부트랩 html코드 넣도록 하겠습니다. 갑작스럽게 일정이 많아져서 어쩔 수 없었습니다.. 이해해주시고 양해바랍니다. 즐거운 한주 보내세요!

  9. 2012.11.24 21:03 신고 BlogIcon gold box  댓글주소  수정/삭제  댓글쓰기

    진짜로 배포 중단하시나요? 지금 쓰고있는 것은 옛날꺼라 스크롤이 부드럽지 않은것 같아서 바꿔볼려고 하려는데요 ㅠㅠ ..지금 쓰고 계시는 것도 정말 좋은것같은데요?

  10. 2013.02.02 10:29  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • 2013.02.02 10:31  댓글주소  수정/삭제

      비밀댓글입니다

    • BlogIcon 대문 demun 2013.02.02 11:06 신고  댓글주소  수정/삭제

      개발자만을 위한 스킨을 제작하기에는 다소 무리가 있어 보입니다.
      전반적으로 사용하는 스킨에 개발자에게도 좋은 스킨을 만들면 몰라도...

      허나 이 또한 무엇이 개발자에게 좋은 스킨인지?
      잘 몰라서 만들수 있을지 모르겠네요...

      부트스트랩 스킨에서 오류가 난다면 아마도 뭐가 잘못되었을겁니다.
      제가 배포할때 잘못 배포한적도 있거든요...

      현재는 제가 스킨을 배포하고 있지 않습니다.
      아마도 이전에 배포한 스킨은 배포를 안할거 같아요...

      다만 이전 스킨을 업데이트 한다면 업데이트후에 배포할겁니다.

      업데이트가 시간적으로 주어진다면...말씀하신 사이트 참고하겠습니다.
      제가 대략 둘러보니 티스토리 하고는 거리가 있어 보입니다.레이아웃이....어떻게 푸느냐가 문제인것 같네요...

  11. 2013.02.02 13:14  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  12. 2013.02.02 13:17  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  13. 2013.04.11 22:13 신고 BlogIcon 마법고양이  댓글주소  수정/삭제  댓글쓰기

    아 ㅠㅠ 이거 상당히 스킨이 탐나는데, 혹시 아직도 배포 중지 상태인가요?

  14. 2013.05.20 22:42 신고 BlogIcon 새하얀구름  댓글주소  수정/삭제  댓글쓰기

    아직 배포 안하시나요 ? ㅠㅠ

    부트 스트랩 스킨 한번 사용 해 보고 싶습니다 ..ㅠ

  15. 2013.05.22 14:57 신고 BlogIcon shaking  댓글주소  수정/삭제  댓글쓰기

    이제 Bootstrap 스킨 베포 중단 공지가 안보이는데 Bootstrap_TS 스킨 배포 신청할수 있나요? 다운받고싶어서 언제 다시 배포시작하나 매번 와서 확인했는데 어느순간 에드센스 스킨 배포하시고ㅋㅋㅋㅋㅋ Bootstrap 스킨 쓰고싶어요!

  16. 2013.06.29 14:55 신고 BlogIcon Menkent  댓글주소  수정/삭제  댓글쓰기

    고생 많으십니다. 아 스킨 부탁한다고 멜일 보내고 댓글을 보니 배포 중단하셨군요...
    이론.. 아직도 배포 중단이신가요? 너무 깔끔하고 이뻐서 쓰고 싶었는데..
    언제쯤 배포 예정이신지요? 꼭 써보고 싶어요 부탁드려요...

  17. 2014.12.30 16:27 신고 BlogIcon TISTORY  댓글주소  수정/삭제  댓글쓰기

    안녕하세요. TISTORY입니다.

    티스토리 블로거가 제작한 스킨을 홍보할 수 있는 공간을 마련하였습니다.
    티스토리 홈에 ‘스킨’ 게시판입니다.

    제작한 스킨을 ‘스킨’에서 홍보해보세요~!

    감사합니다.