몽리, 꿈속으로

2009.03.13 19:00  인터넷/블로그팁

티스토리 상단 가로 카테고리메뉴 소스 사용법

대구사랑 님께서 제 티스토리 스킨중 헤드부분 메뉴가 마음에 드셨는지.. 소스를 부탁하셨는데.. 혹시 다른분들도 필요하실지 몰라서 올려봅니다. 제가 사용중인 스킨은 워드프레스 테마를 수정한것입니다. 원제작자의 링크는 스킨하단에 있습니다.

티스토리의 카테고리 치환자만으로는 소스의 구현이 안되서 카테고리 타이틀 링크를 수작업으로 일일이 넣어서 사용하는거라 상당히 귀찮습니다.
욜 왕짜증 작업이니 인내심이 많으신 분들만 참고하세요. 제가 현재 상단에 사용중이니 보시면 아실테고 압축파일안에 navigation.html 스샷입니다.



일단 사용중이신 스킨을 저장하시고요. 문제생기면 바로 되돌릴수 있게 반드시 저장하세요.

navigation.zip



우선 살펴볼수 있게 html 파일도 함께 올렸으니 컴에서 확인해보시고 작업하세요. 파일을 다운받으시고 스킨 HTML편집에서 파일을 업로드 하세요.

images폴더안의 menu.gif  menu.js 두개만 올리셔야 합니다. navigation.html 소스내용을 티스토리에 적용하시지 마시고 아래 소스내용을 사용하세요. 카테고리 타이틀명과 경로는 직접 본인의 계정에 맞게 노가다 하셔야 합니다..^^


<head>   </head> 사이에 아래 소스를 넣어주시고요.

 <script type="text/javascript" src="./images/menu.js"></script>


아래 소스는 style.css 창에서 추가해주시고요.

더보기



아래 소스를 원하는 위치에 넣어서 사용하시면 됩니다.

더보기


메뉴의 위치는
#navigation {
   margin:1px 0;
}
에서 설정하시면 됩니다. 사용중이신 스킨CSS와 충돌이 생길수도 있으니 자세히 살펴보시고 적용하세요.


- 2009년 6월 23일 수정 -
첨부파일 사라진것 복구했습니다.



신고
몽리, 꿈속으로의 모든 게시물은 사전 동의 없이 펌질, 재배포, 재사용을 할 수 없습니다.
직접 링크를 선호합니다. [저작권 규약]
트랙백3개 댓글 31 개가 달렸습니다.
욕설, 비방 글과 음란,사행성,상업적 광고의 댓글은 삭제와 동시에 스팸 필터링 합니다.
닉네임 및 정확한 사이트 주소 (개인블로그, SNS 또는 이메일)가 없는 댓글은 무대응 및 삭제될 수 있습니다.

  1. BlogIcon 대구사랑님의 댓글

    음, 네... 근데여, 스킨 종류마다 적용이 다르지 싶은데,,,
    괜찮을 런지여...^^
    암튼 열공으로 스터디 해 볼께여... 벌써부터 머리 아파 질라 카네여.^^
    포스트에 감사드려여.

  2. BlogIcon 윤초딩님의 답글

    사용하는 스킨마다 적용방법이 다르지요..

    대략적으로 해드부분 아래쪽 공간을 만드시고
    소스에 넣으시면 되는데요.
    사용하는 스킨마다 적용방법은 각각 달라서 뭐라고
    설명드릴수가 없네요..
    현재 사용하시는 스킨이 뭔지 알려주세요..
    시간되면 한번 넣어볼게요..
    너무 기대는 하지 마시고요.

  3. BlogIcon ★바바라님의 댓글

    아, 저도 늘 이게 궁금했는데. 스킨에 따라 다를 것 같아서 선뜻
    스킨을 바꾸지 못하고 있는데 아무 스킨에다가 적용해도 되는 건가요?

  4. BlogIcon 윤초딩님의 답글

    아..
    이런 문제가 있었군요..
    잘 모르시는 분들은 사용하기가 무척 힘들수도 있겠네요..

    스킨마다 위치와 소스를 약간신 수정해서 사용하셔야 합니다.

  5. BlogIcon 대구사랑님의 댓글

    3단짜리 팀-뉴스페이퍼??? 스킨여.
    티스토리 스킨 보시길...
    메뉴는 멀고도 험한길 인듯...

  6. BlogIcon 윤초딩님의 답글

    그리 어렵지도 않아요..
    메뉴를 소스중 반정도 잘러서 가로크기를 줄이시고
    사이드 바에 한번 넣어보세요.. css충돌생기는지..
    CSS충돌만 안생기면 자리만 잡으면 끝나는거니까요..

  7. BlogIcon fivelove님의 댓글

    제 블로그에 맞게 수정하느라 고생좀 했네요..ㅋㅋ
    그래도 상당히 유용한 팁이네요. 감사합니다
    그리고 제 블로그에 티스토리 관련 수정방법 모아놓은 글이 있어
    거기에 님 글도 추가하고 여기에 트랙백도 남기고 갑니다^^

  8. BlogIcon 윤초딩님의 답글

    감사합니다.
    그런데 이건 티스토리 수정팁은 아니고요.
    어디든지 사용은 가능한거에요.

  9. 님의 댓글

    비밀댓글입니다

  10. BlogIcon 윤초딩님의 답글

    첨부파일이 잘못되었나보네요..
    찾아서 해결해야겠네요..
    알려주셔서 캄솨합니다~~~

  11. BlogIcon kkamgun님의 댓글

    아공, 텍스트큐브 이사함서, 초딩님 블로그를 좀 모델삼아 꾸몄는데... 웹소스같은거 배워보지 못한사람이라, 느므 힘들고, 지저분하게만 되네요T.T 저 이 첨부파일 용케 찾았습니다. 근데 텍스트큐브에서는 적용을T.T 우케 하는지 .. 아직 궁금함돠~ ㅎㅎ

  12. BlogIcon 윤초딩님의 답글

    이건 별다른 팁도 필요없이 공간만 만들어주고 넣어주시면 됩니다. 텍큐나 티스토리나 마찬가지로 상단에 빈공간을 만들어주시고 넣어주시면 됩니다

  13. BlogIcon 백조트래핑님의 댓글

    스킨 수정 하려다 성격 수정되는거 같네요... 부정적으로...:D

  14. BlogIcon 윤초딩님의 답글

    이런.. 그럼 안하니만 못한거네요. ^^

  15. BlogIcon 세이홍님의 댓글

    질문 하나 드려요.텍큐닷컴에서 스킨을 저장할 수 있는 방법이 있나요?^^;;

  16. BlogIcon 윤초딩님의 답글

    티스토리 처럼 변경 사용중인 스킨을 저장해두는 기능은 없습니다.^^
    아직은 수작업으로 백업을 해야 하네요.

  17. BlogIcon 세이홍님의 답글

    그렇군요. 없는걸 어찌나 찾아 댔는지...-_-;;;

  18. BlogIcon 파초님의 댓글

    감사합니다~ 찾아헤메던 그것! 이네요 ^^

  19. BlogIcon 윤초딩님의 답글

    http://loved.pe.kr/315
    이글보시면 좀더 많은 종류의 메뉴가 있어요.

  20. BlogIcon 예스비™님의 댓글

    우훗~포스팅 하려고 맘먹고 있던 내용이다ㅠ
    스킨 바꾸고 나서 포스팅 하려고 했었는데~~먼저 올려 주셨네요.
    좋은 정보 잘 보고 가요.
    스킨바꿀때 안만들고 윤초딩님의 자료 그냥 가져다 붙여야겠어요~ㅋㅋ
    만드는 것도 구찮은데 말이지요^^&
    오늘도 즐거운 시간되세요. 화이팅~!

  21. BlogIcon 윤초딩님의 답글

    자료를 가져가서 드리는 말이 아니니 오해는 마시고요.
    스크랩이 너무 익숙해지면 나중에 문제가 발생할수도 있으니
    귀찮더라도 직접 쓰시는게 좋을거에요^^
    요즘 카피라이터로 많이들 바꾸시던데 그런거 잘못 사용하시면 좀 대략 낭패보실수도..^^

  22. BlogIcon 강진영님의 댓글

    아니욤... 제 블로그에 붙였는데 이 메뉴가 잘 안되요.ㅠㅠ 혹시 왠줄 아세욤?

  23. BlogIcon 윤초딩님의 답글

    이유는 자세히 모르겠네요. ^^
    블로그에 방문을 해보니 파이어폭스에서 왕창깨져서 살펴볼수가 없네요.

  24. BlogIcon 모피우스님의 댓글

    안녕하세요, 유초딩님...

    하루에 몇 번씩 들어와 공부하여 적용해보는데 잘 되지 않습니다.

    참다 못해 도움을 구합니다.

    현재 우측 사이드 바의 카테고리를 숨김으로 하고 상단 메뉴를 만들려고 합니다.

    일교차가 심한 요즘 감기 조심하시길 바랍니다.

  25. BlogIcon 윤초딩님의 답글

    이게 적용이 어려우시면
    http://loved.pe.kr/315
    이글 참고하시고 다른것으로 적용해보세요

    이메뉴는 그다지 추천 드리지 않네요. ^^

  26. BlogIcon 모피우스님의 답글

    바쁘신데도 불구하고 좋은 정보를 주셔서 감사드립니다.

    행복하세요.

  27. BlogIcon 윤초딩님의 답글

    메뉴 적용하시다가 정 안되시면요

    http://cdmanii.com/1022

    요기 가셔서 해당글 댓글에 스킨 수정 요청하시면
    cdmanii님이 무료로 스킨중 에러나는 부분을 수정해주니 꼭 가보세요.

  28. BlogIcon 대구사랑님의 댓글

    크리스마스 잘 지내셨나여?
    아울러, 올해 베스트 블로거로 선정되신걸 축하드려여.
    멋진 윤초딩님...
    대단하십니다.
    연말송년회 모임들 잘 다녀오시고 새해에도 멋진모습 보여주세여.
    윤초딩님이 늘 그리운 요즘 겨울 이네여...

  29. BlogIcon 낭만다람쥐님의 댓글

    안녕하세요~ ^^ 좋은 글 잘 봤습니다.

    한가지 질문이 있는데요,
    현재 링크가 모두 "http://loved.pe.kr/"로 걸려있잖아요
    이거 어떻게 수정해야 하나요?

    예를 들어 제로보드를 누르면 제로보드와 관련된 글만 보여져야 되는데
    "http://블로그주소/제로보드" 이렇게 하면 되나요? ㅠ_ㅠ

  30. 님의 댓글

    비밀댓글입니다

  31. BlogIcon 미나미32님의 댓글

    이미 오래전에 작성하신 내용이긴 하지만
    좋은팁이라 티스토리 유용한 팁으로 제 블로그에서 소개해봤습니다.
    트랙백도 걸구요. 조만간에 한번 적용해봐야겠어요. 종종 놀러오겠습니다.