2014년 8월 7일 목요일

구글 블로그에서 펼치기/접기 Show/Hide 기능 추가하기

구글 블로그에서 펼치기/접기 Show/Hide 기능 추가하기
1. 대시보드 –> 꾸미기 –> HTML 편집 –> 스킨수정
Ctrl+F를 눌러 </head>를 찾고, </head> 윗줄에 아래의 소스 삽입
&#39; 는 작은따옴표(')를 의미하는데 그냥 삽입해도 상관없습니다.

<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
>



2. 글 작성시 HTML 편집에서 아래와 같이 사용

여러 개의 펼치기/접기를 이용할 땐 밑줄 친 more01a, more01b를 바꾸면서 추가해 줍니다. 
<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
>


3. 사용 예


참고자료 –> 
http://blog.naver.com/dionly/120034759268

댓글 없음:

댓글 쓰기