티스토리 border 스킨 배포
- 티스토리/스킨배포
- 2010. 5. 26. 17:32
현재 제가 사용하고 있는 스킨입니다. 이번 스킨의 설명부분과 수정해야할 부분등을 알려드리겠습니다.
우선 제가 전문적으로 코딩을 배워서 하는 사람이 아니기에 약간의 실수가 있을수 있습니다. 이점은 감안하시고 사용하시고 싶은분만 사용하시기 바랍니다.
일단 많은 브라우져에서 테스트를 해보고 난후 배포하는겁니다.
스킨의 미리보기는 http://demunkr.tistory.com 에서 하시기 바랍니다.
보더 스킨의 장점은 전체적으로 둥근 박스형태로 되어있다는 점입니다. 제가 워드프레스 스킨을 보다가 좋다고 판단되어 따라해서 만들어본것입니다.
1.둥근 네모 박스의 디자인.
보시면 아시겠지만 둥근 네모박스의 형태로 되어 있습니다.
2. 검색버튼.
디자인적으로 다른 검색버튼 보다 좋다고 판단됩니다(개인적인 생각^^;)
3. css 수평 메뉴(Horizontal CSS Menus).
자바스크립트를 적용한 드롭다운의 메뉴입니다. 저의경우 추천글이나 홍보하고 싶은글, 그리고 간편하게 관리자화면으로 갈수있는 메뉴를 구성해서 사용하는데요. 얼마든지 수정해서 사용하실수 있습니다.
위의 링크나 현재는 제 블로그에서 볼수있습니다.
4.메뉴부분을 하단으로 내렸습니다.
없어도 상관없지만 다 있는데 없으면 그러니까 일단 하단으로 내렸습니다.
5. html 상으로 본문이 먼저 코딩됐음.
이전에도 잠시 언급한 내용이지요. 구글광고는 html 상에서 제일 상위에 있는것이 광고단가가 높습니다. 그래서 본문이 제일 상위에 오도록 했습니다.
블로그 스킨을 바꿨습니다 => http://demun.tistory.com/1619
6. 퍼머링크.
글의 주소를 본문에서 보이도록 했습니다.
글의 제목아래 부분에 글의 고유주소를 출력하도록 했습니다.
7. 기타부분.
상단의 rss를 롤오버효과 적용했습니다.
상단의 css 수평 메뉴를 사용하기 위해서는 화살표의 아이콘 이미지 주소를 업데이트 시켜야합니다.
스킨을 적용하실때 모두 파일업로드를 통해 업로드하시고 down.gif 와 right.gif 를 아래 그림처럼 클릭해서 마우스 우측버튼으로 이미지 주소를 알아냅니다.
그리고 jqueryslidemenu.js 를 열어서 아래처럼 노랑색으로 되있는곳에 이미지주소를 붙여넣기하세요. 아래이미지는 제가 업로드한 이미지입니다. 현재는 아래 주소를 사용해도 잘 될겁니다.
하지만 제가 스킨을 변경하거나 그림을 수정하면 안될수도 있으니 본인의 스킨에 업로드해서 사용하세요.
아래의 down.gif 와 right.gif의 주소를 본인의 이미지주소로 변경해주시면 됩니다. 아래의 주소는 제 이미지주소입니다. 현재는 그냥 사용해도 나오지만 나중에 혹시 모르니 변경하시는걸 추천합니다.
2. 퍼머링크.
html 편집창에서 http://demun.tistory.com 을 본인의 블로그 주소로 변경해주세요.
나머지는 그냥 사용하셔도 됩니다. 스킨변경시 스킨편집에 파일업로드를 통해 업로드하시고 html은 html로 붙여넣기, css는 css창에 붙여넣기 하시고 , 다시 사이드바 설정에가셔서 사이드바를 정리하세요.
그다음 화면출력설정에서 기타 설정부분을 하면 잘 될겁니다.
짧은 글을 선택해서 전체화면의 스샷을 찍었습니다. 참고하시고 나머지는 아래 링크를 직접 방문해서 참고하시기 바랍니다.
스킨 구경가기 => http://demunkr.tistory.com
우선 제가 전문적으로 코딩을 배워서 하는 사람이 아니기에 약간의 실수가 있을수 있습니다. 이점은 감안하시고 사용하시고 싶은분만 사용하시기 바랍니다.
일단 많은 브라우져에서 테스트를 해보고 난후 배포하는겁니다.
스킨의 미리보기는 http://demunkr.tistory.com 에서 하시기 바랍니다.
보더 스킨의 장점은 전체적으로 둥근 박스형태로 되어있다는 점입니다. 제가 워드프레스 스킨을 보다가 좋다고 판단되어 따라해서 만들어본것입니다.
특이점 및 장점
보시면 아시겠지만 둥근 네모박스의 형태로 되어 있습니다.
2. 검색버튼.
디자인적으로 다른 검색버튼 보다 좋다고 판단됩니다(개인적인 생각^^;)
3. css 수평 메뉴(Horizontal CSS Menus).
자바스크립트를 적용한 드롭다운의 메뉴입니다. 저의경우 추천글이나 홍보하고 싶은글, 그리고 간편하게 관리자화면으로 갈수있는 메뉴를 구성해서 사용하는데요. 얼마든지 수정해서 사용하실수 있습니다.
위의 링크나 현재는 제 블로그에서 볼수있습니다.
4.메뉴부분을 하단으로 내렸습니다.
없어도 상관없지만 다 있는데 없으면 그러니까 일단 하단으로 내렸습니다.
5. html 상으로 본문이 먼저 코딩됐음.
이전에도 잠시 언급한 내용이지요. 구글광고는 html 상에서 제일 상위에 있는것이 광고단가가 높습니다. 그래서 본문이 제일 상위에 오도록 했습니다.
블로그 스킨을 바꿨습니다 => http://demun.tistory.com/1619
6. 퍼머링크.
글의 주소를 본문에서 보이도록 했습니다.
글의 제목아래 부분에 글의 고유주소를 출력하도록 했습니다.
상단의 rss를 롤오버효과 적용했습니다.
 |
 |
수정해야할 부분.
1. CSS 수평메뉴. 상단의 css 수평 메뉴를 사용하기 위해서는 화살표의 아이콘 이미지 주소를 업데이트 시켜야합니다.
스킨을 적용하실때 모두 파일업로드를 통해 업로드하시고 down.gif 와 right.gif 를 아래 그림처럼 클릭해서 마우스 우측버튼으로 이미지 주소를 알아냅니다.
그리고 jqueryslidemenu.js 를 열어서 아래처럼 노랑색으로 되있는곳에 이미지주소를 붙여넣기하세요. 아래이미지는 제가 업로드한 이미지입니다. 현재는 아래 주소를 사용해도 잘 될겁니다.
하지만 제가 스킨을 변경하거나 그림을 수정하면 안될수도 있으니 본인의 스킨에 업로드해서 사용하세요.
아래의 down.gif 와 right.gif의 주소를 본인의 이미지주소로 변경해주시면 됩니다. 아래의 주소는 제 이미지주소입니다. 현재는 그냥 사용해도 나오지만 나중에 혹시 모르니 변경하시는걸 추천합니다.
//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass', 'http://cfs.tistory.com/custom/blog/5/53533/skin/images/down.gif', 23], right:['rightarrowclass', 'http://cfs.tistory.com/custom/blog/5/53533/skin/images/right.gif']}
html 편집창에서 http://demun.tistory.com 을 본인의 블로그 주소로 변경해주세요.
 |
나머지는 그냥 사용하셔도 됩니다. 스킨변경시 스킨편집에 파일업로드를 통해 업로드하시고 html은 html로 붙여넣기, css는 css창에 붙여넣기 하시고 , 다시 사이드바 설정에가셔서 사이드바를 정리하세요.
그다음 화면출력설정에서 기타 설정부분을 하면 잘 될겁니다.
짧은 글을 선택해서 전체화면의 스샷을 찍었습니다. 참고하시고 나머지는 아래 링크를 직접 방문해서 참고하시기 바랍니다.
스킨 구경가기 => http://demunkr.tistory.com