서브메뉴

Spider's Web - 텍스트큐브, 티스토리, 워드프레스 HTML5 & CSS3 스킨 공유합니다

by minordev-openID

Spider's Web Skin


사용자 삽입 이미지

ver 2.0 업데이트 2013.1.24. - 모든 브라우저 지원

Spider's Web 스킨은 HTML5와 CSS3로 제작 됐습니다. 파이어폭스 , 크롬, 오페라  등의 모던브라우저를 사용해주시기 바랍니다. IE 6~8 지원을 하지 않았으나, 여러 분들이 지속적으로 IE 하위버전 브라우저에서도 적용하고 싶다는 요청을 해주셔서 ver 2.0부터 모든 브라우저 테스트를 했습니다. 

IE 6~8 버전에서 CSS3를 표현하기 위해 PIE.js 를 사용했습니다. 완벽하지는 않지만 큰 차이는 없습니다. 그리고 이미지 슬라이더를 변경했습니다. github에서 commits 변경사항을 체크하시기 바랍니다. 텍스트큐브 버전은 업데이트 하지 않습니다. 티스토리 스킨의 변경된 파일과 코드를 따라 수정하세요.  

github에서 업로드/다운로드 페이지 서비스를 중단했습니다. github에서 ZIP 버튼을 누르시면 스킨을 다운로드 받을 수 있습니다. 기존의 다운로드 링크를 삭제했습니다.   좀더 자세한 사항은 스킨 블로그에 방문해주시기 바랍니다.


Spider's Web 블로그 - http://spidersweb.tistory.com








슬라이드 & 링크 아이콘 이미지 PSD 파일 다운로드 : PSD 파일 

사용자 삽입 이미지




Usage


  • Tistory : 스킨 선택 -> 새스킨 등록 -> 스킨 저장명 입력 -> 파일 업로드 -> 적용
  • Textcube : FTP 연결 -> skin - blog 폴더에 업로드 -> 스킨 선택

1. 컨텐츠 620px, 사이드바 300px로 가로 사이즈가 최적회되어 있습니다.

2. 슬라이드 배너 이미지 사이즈는 980x270 픽셀입니다. <div></div>에 img 태그를 넣으세요. <a href=""></a>로 링크를 설정할 수 있습니다. 이미지 외에도 텍스트를 넣을 수도 있습니다.

<div>
<img src="./images/slide1.jpg" alt="블로그 슬라이드 이미지" width="980" height="270" />
</div>


3. 사이드바에서 검색과 카테고리의 위치를 변경하지 마세요.

4. 사이드바에 최근 글 목록, 최근 댓글 목록, 최근 트랙백 목록 외의 모듈은 스타일링 하지 않았습니다. 태그, 달력 등의 모듈을 추가하는 것은 유저가 커스터마이징하길 바랍니다. 요소가 많아지면 디자인에 영향을 미칠 가능성이 있으니 주의해주세요.

5. 하단의 트위터 모듈에 유저의 ID를 넣어주세요. 디폴트 스킨에서는 HTML5 쿼리로 검색이 되어 있습니다. skin.html에서 제일 밑으로 내려간 후 다음의 코드를 수정하세요.

searchParams: ['q=html5'],

그리고 skin.html에서 앞부분에 있는 src="http://platform.twitter.com/anywhere.js ... 부분의 appID를 넣어주세요. appID는 https://dev.twitter.com/apps/new 에서 앱 등록 후 키를 발급받을 수 있습니다.

<script type="text/javascript" src="http://platform.twitter.com/anywhere.js?id=YOUR_appID&v=1"></script>

6. About 모듈은 skin.html에서 About 부분을 찾은 후 <p></p> 사이의 텍스트를 수정할 수 있습니다. 또한 페이스북 좋아요 버튼은 https://developers.facebook.com/docs/reference/plugins/like/ 에서 소셜플러그인을 사용할 수 있습니다.

Get Code를 누르면 HTML5 코드로 첫번째 창의 소스는 <body> 태그 바로 다음에 붙여넣고,

...
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ko_KR/all.js#xfbml=1&appId=YOUR_appID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

...

두번째 창의 소스는 앞서 수정한 About의 <p></p>태그 다음에 넣어주세요.

<div ... data-href="http://spidersweb.tistory.com/" data-send="true" ...></div>

7. Links 모듈은 블로그 관리 페이지 내 링크에서 수정합니다.

8. 타이틀과 댓글에 띄우는 유저 이미지 또는 블로그 이미지는 관리 페이지에서 설정합니다. 출력되는 사이즈는 70x70 픽셀입니다.  

로고 이미지


 * 티스토리 : 환경설정 -> 기본정보 -> 이미지, 아이콘

* 텍스트큐브 : 설정 -> 로고 그림







9. Spider's Web의 레이아웃은 Layout Project 스킨을 바탕으로 만들었습니다.

레이아웃 스킨 - http://layoutproject.tistory.com/



Contact

문의사항 및 버그리포트 또는 제안사항은 페이스북으로 연락바랍니다. 블로그에 댓글로 남겨주시면 확인할 수 없습니다. 시간 관계상 답변을 드릴 수 없을 때는 공지를 하겠습니다.


License and Copyright

Spider's Web 스킨은 개인에게 공유하지만, 어떠한 경우에도 영리 목적으로 스킨을 사용할 수 없습니다. 개인 블로그에 구글 애드센스와 같은 광고를 게재하는 것은 영리 목적에서 제외합니다. 스킨 수정은 가능하나 반드시 모든 유저들에게 공유해야 합니다. 더 좋은 스킨으로 업데이트할 수 있도록 동참해주시면 감사하겠습니다. 수정한 스킨을 재배포 시 Github에 릴리즈 될 수 있도록 skin.html과 style.css를 보내주세요. 공유를 부탁드리며 동의 없이 재배포 불가합니다. 


사용자 삽입 이미지

2012/07/20 04:21 2012/07/20 04:21
Rated 4.83/5 (96.67%) (12 Votes)
받은 트랙백이 없고   10개의 댓글이 있습니다.
이 글의 댓글/트랙백 RSS : http://www.textcube.org/theme/rss/response/969
이 글의 관련글(트랙백) 주소 : http://www.textcube.org/theme/trackback/969