작성일자
카테고리 CMS/티스토리 가이드



데모 블로그는 http://saaien.tistory.com/


이전 공개 스킨에 비해서 좋아졌습니다. 그래서 기부 금액을 증액합니다. 이곳의 글을 참고하시고 1만원을 기부한 다음 스크린샷을 첨부해주시면 이메일로 보내드립니다. 저는 포토샵 전문가이니 뽀샵처리하면 다 보입니다. ^^ 


이메일--> martian36@naver.com


이 스킨은 트위터 부트스트랩의 Fork 프로젝트인 Fbootstrapp을 기반으로 만든 것으로 초기화면에서 티에디션을 사용할 수 없는 문제로 인해 모바일용으로 만들지 않았습니다. 페이스북의 타임라인 형태입니다.


사용법은 다음과 같습니다.



http://martian36.tistory.com/841 <-- 이글을 참고해서 설치한 다음 주메뉴에서 사이드바를 클릭하면 위와같은 화면이 나옵니다. 사이드바 1은 블로그 이미지와 아이디가 나오는 모듈입니다. 블로그 이미지는 기본정보 메뉴에서 설정합니다. 


사이드바 2는 구글광고 리더보드 728 사이즈를 입력할 수 있습니다. 플러그인 설정에서 HTML 배너 출력기를 설치하고 모듈을 이동해서 광고 소스코드를 입력하고 저장하면 됩니다. 블로그 화면에서 이미지 슬라이더의 바로 아래 나타납니다.


사이드바 3과 4는 본문 제목 바로 아래에 300픽셀용 구글 광고를 삽입할 수 있습니다. 동시에 두개 사용할 것을 권장합니다. 하나만 사용하면 글이 광고 우측에 나타나서 가독성이 좋지 않습니다. 애드박스를 사용하는 경우 좌측 하나만 사용하세요. 애드박스와 같이 사용할 경우 두개의 박스 사이에 글이 삽입될 수도 있는데 현재 제가 애드박스를 사용하지 않아서 어떻게 나올지 모르겠네요. 사이드바 5는 실제의 사이드바로서 티스토리의 기본 모듈을 배치하면 됩니다. 블로그 설명 모듈이 두개 있는데 메인에 사용할 경우 사이드바용은 제거하세요. 사이드바 5에 구글광고를 삽입하려면 300픽셀 사이즈를 삽입하고 코드의 상하에 아래의 코드를 추가해줘야 합니다. 구글광고는 3개까지만 가능하므로 위치를 선택해서 사용합니다. 사이드바 6은 희망나눔 위젯을 설치하는 곳으로 6개를 설치합니다. 하나 설치하는데 다음커뮤니케이션에서 1천원씩 기부한다고 합니다. 이 스킨을 사용하면 합쳐서 만육천원을 기부하는 것이 되겠죠.


사이드바의 경우

<div class="google widget">

<i class="pointer"></i>

광고코드

</div>


사이드바 광고는 블로그 상단의 메뉴와 겹치면 안되므로 위 그림처럼 최상단에 배치하지 말고 좀 내려서 배치하세요.


본문 광고의 경우

<div class="google300">

광고코드

</div>



카테고리 메뉴는 코드를 직접 수정해야합니다. 방법은 다음과 같습니다.



우선 자신의 카테고리중 하나를 선택하면 주소창에 위처럼 나옵니다. "워드프레스"가 1차 카테고리이고 "워드프레스 일반" 서브 카테고리입니다. 공백은 %20으로 표시됩니다. 이 카테고리를 메뉴에 입력하려면 다음과 같이 합니다.



메뉴에서 HTML/CSS 편집을 선택하고 menu 부분을 찾습니다. a 태그에서 1차 카테고리인 "워드프레스"를 입력하는데 글자 앞에 한칸 띄워야 아이콘하고 간격이 생깁니다. li 태그안의 a 태그에서 #를 지우고 "[##_blog_link_##]category/"를 입력한 다음 추가로 "워드프레스/워드프레스 일반"을 입력합니다. 한칸 띈 곳이 있으면 반드시 띄워야합니다. 그다음 Secondary link에 워드프레스 일반을 입력합니다. 이곳은 한칸 띄지 않아도 됩니다. 코드를 처음 다루시는 분은 천천히 하셔야합니다. 


이미지 배너


이미지 배너는 원하는 수만큼 넣을 수 있으나 코드를 수정해야합니다. 



이미지 배너에서 li 태그 부분이 하나의 이미지를 담당합니다. href는 이미지를 클릭했을 때 이동하는 카테고리나 글의 URL입니다. 자신의 블로그 주소창에서 복사해서 붙여넣으면 됩니다. 이미지는 파일을 업로드하고 파일이름을 변경하면 되지만 파일이름을 001, 002.. 이런 식으로 수정해서 업로드하면 코드를 수정하지 않아도 됩니다. 가로세로 사이즈는 740*300픽셀입니다.

class의 영어 이름은 애니메이션 되는 효과입니다. 


상하 이동버튼 


본문의 좌측에는 스크롤하면 같이 따라서 움직이는 상하 이동 버튼이 있습니다. 이곳에 뷰온버튼을 설치할 수 있습니다. 이곳의 글을 참고하세요.


기타 내용은 문의가 있으면 올리겠습니다. 이 티스토리 스킨은 모든 웹브라우저를 지원하지만 IE 7에서는 일부가 잘 안나옵니다. 아직도 IE 7을 사용하는 분들이 있죠.


스킨 파일-->

Facebook-ts(2013-08-11).zip



저작자 표시 비영리 변경 금지
신고
BlogIcon 루습히

와.. 데모블로그 들어가니까 상당히 좋네요!!
그리고 디자인과 스킨제작으로 재능기부와 나눔을 하시는듯 하여, 멋지십니다.
저도 키보드 무료수리등으로 유니세프나 굿네이버스 기부영수증등을 받곤 했는데...
http://pinchocodia.tistory.com/notice/283
다음 희망해 기부방법도 알게되고 여러모로 생각도 하게되고, 도움이 되었습니다.
언제나 응원하겠습니다!

BlogIcon 베누시안

안녕하세요. 그러고 보니 재능기부가 되기도 하는군요. ㅎㅎ 좋게 봐주시니 감사합니다.

비밀댓글입니다

BlogIcon 베누시안

네 언제든 질문 주세요. 저는 바꿀려면 여러가지 변경해야되서 시간이 걸리겠네요. 수정한 것 다시 보내드리겠습니다. 욕심이 나서 이것저것 기능을 추가하게 되네요.ㅎㅎ

BlogIcon 글쓴이입니다

이미 유료로 스킨을 구입해서 사용중이라.
좋은 취지로 스킨을 나누시는 모습이 ~ 굿~ :-)

BlogIcon 베누시안

안녕하세요. 반갑습니다. 좋게 봐주셔서 감사합니다.

BlogIcon Kolon

매번 놀러오지만, 베누시안님 역시 대단하십니다 ㅎㅎ.

잘 보고 갑니다 ^^

나중에 블로그 하신다는분 계시면 꼭 추천해 드리고 싶군요 :D

BlogIcon 베누시안

좋게 봐주셔서 감사합니다.

비밀댓글입니다

BlogIcon 베누시안

안녕하세요. 메일 안왔습니다. 이메일 주소 확인하고 다시 보내주세요.

비밀댓글입니다

BlogIcon 사아람

베누시안 님,
나눔위젯을 가로로 쭉 세우려면 어떻게 해야 하나요?

BlogIcon 베누시안

같은 곳에 계속 배치하면 됩니다. 다른 부분 설정 어려우면 제가 해드릴게요.

BlogIcon 사아람

베누시안 님, 이제야 찾아뵙습니다.
번거롭게 해드려 죄송합니다.
말씀하신대로 해보면 일자로 쭉 서더라고요.
염치없지만 배치를 좀 부탁드려도 될까요?;;

BlogIcon 베누시안

안녕하세요. 로그인 아이디하고 비번을 이메일로 알려주세요. martian36@naver.com 몇가지 추가적으로 수정할 것도 있습니다. 그리고 광고는 좌우로 깉 것은 배치 안하실 거죠? 그리고 추가로 수정할 것 있으면 말씀해주세요.

BlogIcon 다섯콩

베누시안 님, 염치 불구하고 아이디와 비번 메일로 보내드렸습니다.
죄송해서 몸 둘 바를 모르겠네요.

BlogIcon hisapa

좋은 스킨 잘보고 갑니다.스킨 바꾼지 얼마 않되서 당장은 힘들겠네요. 앞으로도 좋은자료 잘부탁할게요. 좋은 하루 되세요~~

BlogIcon 쿠아우어

관리자의 승인을 기다리고 있는 댓글입니다

BlogIcon TISTORY

관리자의 승인을 기다리고 있는 댓글입니다

티스토리 툴바