블로그에 펼치기/접기 (Show/Hide) 기능을 넣기

블로그에 펼치기/접기 (Show/Hide) 기능 넣기

Blogger 블로그에 펼치기/접기(Show/Hide) 기능을 추가하겠습니다.

1. 첫째 단계

- Blogger에 입장하여 블로그 페이지를 만들었다고 가정합니다.
- '내 블로그'의 글목록으로 찾아갑니다.
- '템플릿'을 마우스로 선택합니다.
- 템플릿의 '사용중인 디자인'이 보입니다.
- 'HTML 편집'이란 단추가 있습니다.
- 'HTML 편집'이란 단추를 누릅니다.
- 그러면 사용중인 템플릿 디자인의 HTML 프로그램 코드가 나타납니다.
- Ctrl+F를 누르면 코드 안의 특정 코드를 찾는 검색창이 나타납니다.
- </head> 를 입력하면 코드 안에 </head> 부분이 색깔이 변형됩니다.
- </head> 바로 위에 아래와 같은 코드를 넣습니다.

<script language='JavaScript' type='text/javascript'> function layer_toggle(obj) {    if (obj.style.display==&#39;none&#39;) obj.style.display = &#39;block&#39;;    else if (obj.style.display==&#39;block&#39;) obj.style.display = &#39;none&#39;; } </script> Colored by Color Scripter

cs

- 마지막으로 '템플릿 저장'을 반드시 눌러야 합니다.

접힌 상태

펼친 상태

내용을 적습니다

2. 둘째 단계

- 둘째 단계는 글 작성시에 사용합니다.
- 글 작성시에 매번 사용해야 하므로 꽤 번거로울 수 있습니다.
- 코드를 Ctrl+C 다음 Ctrl+V 하도록 코드를 따로 저장해 두는 것이 좋습니다.
- 글 작성할 때에 아래의 코드를 '글쓰기' 상태에서 'HTML' 상태로 바꿉니다.
- 아래의 코드를 원하는 위치에 붙여 넣습니다.
- '여기에 내용을 적습니다'가 있는 곳에 쓸 내용을 작성하여 넣습니다.
- '글쓰기' 상태에서 '접힌 상태'의 내용을 볼 수 없으니 주의합니다.

<div style="display: block" id="more01a"> <a onclick="layer_toggle(document.getElementById('more01a')); layer_toggle(document.getElementById('more01b')); return false;" href="#"> <p> 접힌 상태</p> </a></div> <div style="display: none" id="more01b"> <a onclick="layer_toggle(document.getElementById('more01a')); layer_toggle(document.getElementById('more01b')); return false;" href="#"> <p> 펼친 상태</p> </a><p> 내용을 적습니다</p> </div>  Colored by Color Scripter

cs

-펼치기/접기를 한 페이지에 여럿 사용할 땐 more01a, more01b를 바꾸어 사용해야 합니다.





HTML 소스코드와 내용 출처
http://naaams.blogspot.kr/2010/12/showhide.html

펼친 상태