demun(대문블로그)

티스토리스킨수정/사이드바2013. 9. 22. 01:00

티스토리 사이드바에 위치한 카테고리를 접고 펴는 방식에 대한 포스팅입니다. 예전에 발행한 글인데 실수로 비공개로 발행이 되어서 공개로 전환합니다. 1. html 을 수정합니다.2. css 를 수정합니다.3. jquery 를 추가합니다. 에드센스 스킨에 적용되었던 방법입니다.기존의 자바스크립트를 이용하는 방법은 아래의 링크를 참고하세요. 카테고리 펼쳐보이기 -> http://demun.tistory.com/919 원하는 곳만 펼치거나 접거나 할 수 있습니다.아이콘을 클릭하면 접거나 펼쳐지고, 카테고리 텍스트를 클릭하면 기존의 카테고리로 이동이 되는 방식입니다. 펼쳐진 카테고리는 리스트 아이콘 이미지가 보이고, 접혀진 곳은 플러스 아이콘이 보여집니다. 먼저 결과 화면을 보여드리겠습니다.에드센스 스킨에 적용된..

티스토리스킨수정/사이드바2012. 10. 6. 12:09

비지니스 블로그 스킨인 BusinessBlogSkin을 사용법을 제작하다가 혹 모르시는분들이 있을까해서 이렇게 포스팅하게 됐습니다.이 스킨뿐만 아니라 사이드바의 특정부분을 사이드바의 모듈로 사용하고자 하는데 잘 모르시는분은 이 글을 참고하시면 됩니다.사이드바의 모듈로 사용하면 언제든 쉽게 수정할 수 있고 추가 삭제가 편합니다. 자주 사용하는 사이드바의 광고 같은 경우를 들 수 있습니다.스킨마다 사이드바의 너비가 다르니 스킨을 자주 변경하시는분은 광고코드를 모듈로 저장해놓으면 사이드바의 너비에 따른 광고코드 삽입이 용이합니다. 자 이제 시작합니다.비지니스 블로그 스킨인 BusinessBlogSkin 을 예로 들어보겠습니다.제가 배포할때 고정된 하단글에 사용자가 수정할 수 있도록 공간을 마련해놨습니다. 아래..

티스토리스킨수정/사이드바2011. 12. 18. 11:26

제글에는 사이드바에 관련한 글들이 많이 있습니다. 기존의 스킨에서 변경할때 똑같은 스타일이 적용되게끔 변경하는 방법 말이죠. 이것도 그와 관련한 글입니다. 즉 해더에 배치된 검색창을 사이드바에 넣은 방법입니다. 질문으로 들어왔지만 글이 길어 포스팅하고 그와 관련한 방법도 참고가 되니 여기에 씁니다. 해결방법은 대략 이렇습니다. 1. 해더에 있는 html 검색코드를 지운다. 2. 사이드바에 검색창을 넣는다. (여기서 티스토리의 태그입력,모듈추가로 입력합니다. 또는 html 입력창에서 입력해도 상관은 없습니다.) 3. 관련 스타일 코드를 추가해준다. 대략 이렇습니다. 자 시작해볼까요???. 먼저 해더쪽에 있는 검색창 코드를 지우고 사이드바 설정에서 모듈추가를 합니다. Search 여기서 한가지 value="..

티스토리스킨수정/사이드바2011. 3. 13. 11:00

이번에는 사이드바를 수정하는 방법을 알려드리겠습니다. 질문도 있고 해서 본인의 스킨에서도 수정할수 있도록 알려드리겠습니다. 사이드바에 최근글, 최근댓글, 최근트랙백, 카운터, 태그...... 등등 많은 것이 있지요. 이는 스킨을 제작할때 어느정도는 스킨에 어울리도록 만들지만 그렇지 않은경우나 , 또 본인의 스타일대로 변경하고자 할 경우 아래처럼 수정하면 됩니다. 우선 html 부터 살펴봅니다. html 이 일정해야 css 스타일이 간단합니다. 티스토리에서 사이드바의 html 은 아래와 같습니다. 티스토리 스킨가이드에서 알려준 html 형식입니다. 최근글만 좀더 자세하게 표시하였습니다. ... 최근에 올라온 글 . . . ... ... ... ... 여기서 좀더 들어가보면 각각의 메뉴 즉 최근글, 최근댓글..

티스토리스킨수정/사이드바2011. 1. 19. 19:28

이글은 이전에 작성한 글과 많은 부분이 일치하지만 스킨을 적용하고 나머지 광고나 기타 링크를 삽입하는데 있어 모르는 부분을 매우기 위해 재작성 합니다. no.16 스킨의 사이드바는 박스형태로 되어 있습니다. 여기에 광고나 기타 링크등을 삽입할때 그냥 삽입하면 아래와같은 모습이 나옵니다.(흉보는것 아니니 기분나뻐하지 마세요.) 사이드바의 박스와 박스 사이에 광고가 위치하게 됩니다. 박스 즉 테두리에 넣어지지 않고 밖에 위치하게 됩니다. 이걸 스킨과 어울리게 자연스럽게 삽입해보도록 하겠습니다. 사이드바의 html 코드를 복사합니다. 아무부분이나 상관없습니다. 아래는 링크에 해당하는 부분이고 대략 아래처럼 되어있습니다. Link [#\#_link_site_##]. ADS 단지 id를 하나 생성합니다. id 는..

티스토리스킨수정/사이드바2010. 12. 16. 16:08

이글은 이전에 발행된 글이지만 코드수정을 하면서 다시 갱신해서 발행합니다. 사이드바는 로 시작해서 끝이납니다. 또 다음에 써주는 주석이 곧 사이드바 제목이 됩니다. 자세한것은 티스토리 치환자를 살펴보세요. 그리고 하나의 메뉴 즉 카테고리,최근글,최근댓글등은 라는 치환자로 감싸집니다. 즉 카테고리 최근글 최근댓글 ....이런 형태입니다. 이건 어느 스킨이다 다 똑같습니다. 사이드바에서 클릭하면 보여지고 , 다시 클릭하면 감쳐지는 부분 즉 본문에서 더보기 기능과 같은 기능을 알아보겠습니다. 이건 사이드바의 내용이 길때 아주 유용한 기능입니다. 우선 소스는 아래와 같습니다. 클릭하는부분 감쳐지는부분 코드하이라이팅이 완전치않아 텍스트 파일 첨부합니다. 이제 사이드바에 적용하는 법을 알아보겠습니다. 사이드바의 대..

티스토리스킨수정/사이드바2010. 11. 26. 20:36

블로그를 하다보면 다른 사람한테는 안보이게 하고 카테고리를 하나쯤 만들어서 작성중인 포스트나 비공개 파일을 업로드하는 포스트정도를 만들일이 있게 됩니다. 그냥 비공개로 하면 문제는 간단이 해결이 됩니다. 허나 하다보면 비공개 글이 많아지게 되고,,,,또 작성중인 포스트가 하나 둘 쌓이게 되면 나중에는 정말 비공개 카테고리 폴더하나쯤 있었으면 하는 바램이 듭니다. 여기서는 비공개 카테고리를 만들고 스킨의 원래 스타일을 그대로 표현하면서 사용하는 방법을 알려드립니다. 또한 다른사람한테는 안보이고, 나만 아는 비공개 카테고리를 만들어봅니다. 간단이 하기 위해 파이어폭스의 파이어버그를 사용했습니다. 필요하신분들은 다운로드 받아서 사용하세요. 아마도 많은 분들이 사용하실거라 생각되지만 혹 모르시는 분을 위해 링크..

티스토리스킨수정/사이드바2010. 9. 27. 00:48

이글은 이전에 배포한 스킨에 대한 수정방법입니다. 어느정도는 다른 스킨의 카테고리 수정방법과도 일치합니다. adsense v2 스킨을 사용하다가 카테고리가 많아서 접어야 할때가 있습니다. 간단하게 카테고리를 접는 법을 알려드리겠습니다. 처음에는 아래의 그림처럼 카테고리가 펼쳐져 있습니다. 카테고리를 접고싶을 때는 아래처럼 하면 됩니다. 첫번째 html 수정. 아래 하이라이팅 된 곳을 아래처럼 수정합니다. Category [#\#_category_##] 7번째 줄에 list_ 를 뺀 모양입니다. 위처럼 수정하면 html 은 수정 끝입니다. 두번째 css 수정. css 도 간단하게 수정할수 있습니다. 코드를 아래처럼 수정해주세요. /* 카테고리 */ #category {} #category ul,#categ..

티스토리스킨수정/사이드바2010. 9. 12. 12:06

스킨을 제작할때 가장 유용하게 사용할수 있는 레이아웃이 바로 3가지 형태의 사이드바이더군요. 그래서 그러한 형태로 만들었는데 어느날 한가지 레이아웃을 더 추가하면 좋겠다싶어 급수정에 들어가서 4가지 형태로 만들었습니다. 참고 링크studiopress_adsense ver_2 티스토리 스킨배포 재 포스팅을 합니다. 먼저 스킨을 배포할때의 사이드바는 아래와 같습니다. 사이드바를 수정한후는 아래와 같습니다. 제가 수정하는것을 글로 쓸려고 하니 코드로는 얼마 안되는데 이걸 이해시킬려고 글을 작성하니 넘 많아서 그냥 코드를 변경해서 업로드합니다. div id="sidebar 부터 여기까지 모두 지우세요. 그리고 아래의 코드를 삭제한곳에 넣으세요. 다음에 css 부분입니다. /* ===== 사이드바 ====== *..

티스토리스킨수정/사이드바2010. 6. 2. 14:31

이전에 작성한 글이 있는데 스킨 수정에 어려움을 겪고 있는 분들을 위해 비교적 쉽게 정리하겠습니다. 사이드바의 링크나 글 보관함 , 또는 추가적으로 링크를 추가하실때 사용하시면 좋은 팁입니다. 참고로 아래 참고사이트를 링크했고 제가 사용할때는 이정도만 하면 head부분에 자바스크립트 추가 없이 html 수정만으로 사용할수 있습니다. 혹시 안되시거나 하시면 댓글 바랍니다. 사이드바의 html 은 대략 이렇습니다. 링크 모듈 수정하기 링크 [#\#_link_site_#\#] 위의 강조된 부분을 아래처럼 수정합니다. 링크 --- 블로그 이웃 --- ▶대문블로그 --- 링크 ---▶ 스킨 수정팁 width, color...등등은 본인이 원하는것으로 수정해도 됩니다. 그럼 아래처럼 변경됩니다. 글 보관함 모듈 수..