블로그스팟도 티스토리처럼 펼쳐보기 / 접기 박스 만들기

펼쳐보기 / 접기 기능이 아쉬웠습니다.

구글 블로그에서 첫 글을 쓰던 날 가장 아쉬웠던 기능은 펼쳐보기 / 접기 기능이었습니다.
초창기에 티스토리를 쓸 때, 가시성을 높이기 위해 종종 사용했던 기능이었습니다.

세부적인 자잘한 내용은 박스 안에 접어두고, 큰 줄거리만 밖에 꺼내두는 방식이 제법 좋았었기 때문입니다.

구글 블로그에서는 이 기능이 없었습니다.

메뉴를 아무리 찾아봐도 펼쳐보기 / 접기 기능은 없었습니다. 무언가를 상자 안에 숨겨 둘래야 둘 수가 없었습니다.
그런데, 이 역시도 HTML 편집 기능으로 충분히 구현이 가능합니다.

💡 만약 구글 블로그(블로그 스팟)에서 HTML 편집 모드를 어떻게 들어가는지 모르시는 분은 제가 기존에 포스트 했던 [가이드 링크]를 참조해 주세요.

▼ 아래는 간단한 샘플입니다.

(샘플1) 자세한 내용을 더 보고 싶으시면 클릭하세요.

티스토리의 이 기능이 너무 부러웠습니다. 그런데 구글 블로그에서도 가능하군요.
세부적인 내용이 주저리 주저리 있을 때 사용하면 아주 유용한 기능입니다.

(샘플2) HTML 코드 삽입 팁

구글 블로그의 HTML 보기 기능을 사용하면 더 자유롭게 스타일을 적용할 수 있습니다.

HTML 코드 보기

<div style="font-weight:bold;">강조 텍스트입니다</div>

이런 식으로도 구현이 가능합니다. 자, 이제 코드를 공유드리겠습니다.

아래 박스를 클릭하시면 코드를 보실 수 있습니다.

※ 코드 복사가 어려우신 분은 구글 문서를 확인해 주세요: [구글 문서 링크]

샘플 1의 HTML 코드를 보실 분은 클릭해 주세요

<details style="margin-bottom: 16px; border: 1px solid #ccc; padding: 12px; border-radius: 8px;">
  <summary style="font-weight: bold; cursor: pointer;">이 부분을 클릭하면 내용을 확인할 수 있습니다</summary>
  <p style="margin-top: 12px;">이곳에 숨겨진 내용을 입력하세요.</p>
</details>

샘플 2의 HTML 코드를 보실 분은 클릭해 주세요

<div style="display: flex; justify-content: center;"> <div style="width: 100%; max-width: 400px; border: 1px solid #ddd; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); background-color: #fff;"> <div style="padding: 20px;"> <h3 style="margin-top: 0;">제목</h3> <details style="margin-top: 12px; border-top: 1px solid #eee; padding-top: 12px;"> <summary style="font-weight: bold; cursor: pointer;">펼치기</summary> <pre>코드 내용</pre> </details> </div> </div> </div>

반응형

이번에는 또 다른 활용 방법입니다. 접히는 박스 안에 YouTube 음악을 삽입해 보겠습니다.
YouTube의 공유 버튼을 누르고, < > 퍼가기 아이콘을 눌렀을 때 나오는 코드를 붙여 넣으시면 됩니다.

오늘의 음악 듣기

Must Say Goodbye를 재즈로 듣고 싶은 비가 오는 밤입니다.

🎵 노래 듣기

맺음말

필요에 따라 다양한 방법으로 글을 작성할 수 있는 것이 구글 블로그의 큰 장점입니다.
물론 직접 코드를 만지는 게 조금 복잡할 수 있지만, 한 번 익혀두면 나만의 스타일을 자유롭게 꾸밀 수 있습니다.

#Google Blog #Blogger #Blogspot #구글블로그 #블로그스팟