접었다폈다하는 링크롤 소스 배포합니다 2007/10/03 13:58
needs...
태터 앤 미디어 링크롤 같이 접였다 폈다하는 링크롤
태터 앤 미디어 링크롤 같이 접였다 폈다하는 링크롤
소스를 가지고 싶어하시는 분이 많으셔서, 급조해봤습니다.
일단은 기본 스킨을 배포합니다.
디자인을 자유롭게 고쳐서 사용하시면 될 듯 합니다~
일단은 기본 스킨을 배포합니다.
디자인을 자유롭게 고쳐서 사용하시면 될 듯 합니다~
소스 퍼가기
기본 스킨 01 - 기본 닫힘
소스보기
기본 스킨 01 - 기본 열림
소스보기
기본 스킨 02 - 기본 닫힘
소스보기
기본 스킨 02 - 기본 열림
소스보기
블로그에 소스 붙이기
기본적인 링크 디자인은 하지 않았습니다.
(블로그 자체 css에서 디자인을 상속받기 위해서요.. 그래야 잘 어울리겠죠)
따라서 단독 소스로 보면 대부분 깨지고
블로그에 삽입하셔야 디자인이 제대로 뜹니다..
위의 기본 디자인 4 개 중에서 원하는 디자인의 소스를
내 블로그의 원하는 부분에 통째로 붙여넣으시면 됩니다.
웹표준이기 때문에, 크로스브라우징이 되는 소스입니다.
웹표준을 준수한 스킨에 붙여넣기 하면
모든 브라우저에서 깔끔하게 출력되어 나옵니다.
만약 브라우저 별로 디자인이 상이하거나 깨지면
블로그의 css 소스 최상단에 * { margin: 0; padding: 0; } 선택자를 넣어주세요.
(기존 디자인이 깨질 위험이 있습니다)
태터나 티스토리 유저분들게서는 사이드바에 삽입시
치환자안에 포함해 주셔야 합니다~
링크롤 디자인 수정하기
디자인은 자유롭게 수정하실 수 있습니다.
기본적인 수정가이드를 안내해드리겠습니다.
ul의 display를 none 하면 링크를 접고, block 하면 링크를 엽니다.
기본 옵션을 이것으로 설정할 수 있습니다.
더불어 css 디자인으로 자유자재로 디자인을 수정할 수 있습니다.
블로그에 어울리는 링크롤을 달아보세요^^
하다가 잘 안되시거나 궁금한 점 이 있으시면,
제 블로그에 오셔서 언제라도 질문해주세요~
기본 스킨 01 - 기본 열림
기본 스킨 02 - 기본 닫힘
기본 스킨 02 - 기본 열림
블로그에 소스 붙이기
기본적인 링크 디자인은 하지 않았습니다.
(블로그 자체 css에서 디자인을 상속받기 위해서요.. 그래야 잘 어울리겠죠)
따라서 단독 소스로 보면 대부분 깨지고
블로그에 삽입하셔야 디자인이 제대로 뜹니다..
위의 기본 디자인 4 개 중에서 원하는 디자인의 소스를
내 블로그의 원하는 부분에 통째로 붙여넣으시면 됩니다.
웹표준이기 때문에, 크로스브라우징이 되는 소스입니다.
웹표준을 준수한 스킨에 붙여넣기 하면
모든 브라우저에서 깔끔하게 출력되어 나옵니다.
만약 브라우저 별로 디자인이 상이하거나 깨지면
블로그의 css 소스 최상단에 * { margin: 0; padding: 0; } 선택자를 넣어주세요.
(기존 디자인이 깨질 위험이 있습니다)
태터나 티스토리 유저분들게서는 사이드바에 삽입시
치환자안에 포함해 주셔야 합니다~
링크롤 디자인 수정하기
디자인은 자유롭게 수정하실 수 있습니다.
기본적인 수정가이드를 안내해드리겠습니다.
<div class="linkroll_wrap" style="display: block; border: 1px solid #e2e2e2; width: 165px; margin: 20px 0 0 0; padding: 10px; font-size: 12px; font-family: Dotum,돋움,thahoma,verdana;">
링크롤 전체를 묶고 있는 div 박스입니다.
width을 조정하여, 링크롤의 가로크기를 설정할 수 있습니다.
width을 조정하여, 링크롤의 가로크기를 설정할 수 있습니다.
<li style="border-bottom: 1px dashed #eaeaea; padding: 0 0 3px 10px; list-style-type: none;"><a href="http://ceo.blogcocktail.com" target="_blank">하늘이의 생각나무 <span style="font-size: 11px; color: #aaa;">하늘이</span></a></li>
li 가 링크 한 묶음 입니다. <ul id="linkroll_list01"
ul 이 링크 목록 한 묶음입니다. id 값을 h2 의 자바스크립트에서 컨트롤 하면 열었다 닫았다를 할 수 있습니다.ul의 display를 none 하면 링크를 접고, block 하면 링크를 엽니다.
기본 옵션을 이것으로 설정할 수 있습니다.
background: url(http://junjin21.golbin.net/box/bl.gif) 0 0 no-repeat;
background 부분을 수정해서 블릿 아이콘을 입맛대로 고칠 수 있습니다.더불어 css 디자인으로 자유자재로 디자인을 수정할 수 있습니다.
블로그에 어울리는 링크롤을 달아보세요^^
하다가 잘 안되시거나 궁금한 점 이 있으시면,
제 블로그에 오셔서 언제라도 질문해주세요~
http://monoeyes.com/trackback/353
