구글 블로그 내용 접기/펼치기 (Hide/Show) 기능 추가하기 ~ Kanadel의 블로그!

2017년 9월 14일 목요일

구글 블로그 내용 접기/펼치기 (Hide/Show) 기능 추가하기

구글 블로그에는 기본적으로 포스트 내용을 숨기고 보여주는 접기 기능이 없기 때문에 블로그 템플릿에 접기 기능을 정의한 스크립트를 구현한 뒤 사용할 수 있습니다.

템플릿에 추가로 작성한 스크립트이기 때문에 기능을 구현한 뒤에도 포스트에 접기 기능을 사용할 때마다 매번 HTML 태그를 일부 수정해야하는 불편함이 있습니다.

1. 템플릿에 접기 함수 스크립트를 추가하기

function layer_toggle(obj) {

if (obj.style.display=='none') obj.style.display = 'block';

else if (obj.style.display=='block') obj.style.display = 'none';

}

</script>

템플릿에 추가할 스크립트 입니다

호출되면 해당 태그의 디스플레이 스타일을 토글에 따라 바꿔주는 기능을 가지고 있습니다.

해당 코드를 복사 합니다

템플릿을 수정하기 위하여 내 블로그 관리 화면에서 테마 텝을 선택한 뒤 HTML 편집을 클릭 합니다.

복사한 스크립트는 <head>태그 안 아무 곳에 붙여넣으신 뒤 테마 저장을 합니다.
(위의 스크립트를 그대로 복사하고 저장한 뒤 다시 코드를 보시면 위 그림과 같이 코드에 ' 같은 문자가 자동으로 추가되어 있습니다. 해당 수정은 템플릿을 적용하기 위하여 저장 과정에서 자동으로 수정된것으로 잘못된 것이 아닙니다.)

2. 접기 기능 사용하기
포스트 작성시 실제로 접기 기능을 사용하기 위하여 필요한 과정 입니다.
접기 기능을 사용 할때 마다 적용해야 함으로 번거롭습니다.

</a>

</div>

</a>

</div>

접기 기능을 사용하기 위하여 매번 적용할 HTML 코드 입니다.
앵커가 들어간 두개의 <div>태그로 이루어져 있으며 각각의 앵커들은 템플릿에 정의한 함수를 호출하여 디스플레이 스타일을 변경시키는 구조를 가지고 있습니다

태그 아이디를 받아서 실행하기 때문에 한 포스트에서 여러번의 접기 기능을 사용하게 된다면 <div>태그의 아이디인 kanadel001-1, kanadel001-2 을 kanadel002-1, kanadel002-2 이런식으로 바꿔가며 사용하시면 됩니다.
(<div style="display: block" id="kanadel001-1"> <div style="display: none" id="kanadel001-2"> 부분)

태그 아이디가 겹치면 한번에 모든 접기 기능이 동시에 실행되거나 브라우저에 따라선 오류가 발생할 수 있습니다.

=========================
<위 코드를 적용한 테스트>
접힌 상태 요약 문장

=========================

⧫템플릿에 적용한 코드와 마찬가지로 HTML 코드도 저장 과정에서 소스 코드가 변형이 생깁니다.