구글 블로그(블로그스팟) 멋지게 꾸며 활용도 높이기 - 펼쳐보기 / 접기 박스 만들기

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

구글 블로그에서 첫 글을 쓰던 날
가장 아쉬웠던 기능은  펼쳐보기 / 접기 기능이었습니다. 

초창기에 티스토리를 쓸때,  가시성을 높이기 위해 종종 사용했던 기능이었습니다.  

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

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

메뉴를 아무리 찾아봐도, 

펼쳐보기 / 접기 기능은 없었습니다. 

무언가를 상자안에 숨겨 둘래야 둘수가 없었습니다. 

그런데, 이 역시도 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;">이곳에 숨겨진 내용을 입력하세요. 예: HTML 편집기에서 스타일을 적용하는 방법은 인라인 CSS로도 충분히 조절이 가능합니다.</p>

</details>

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

<div style="display: flex; justify-content: center; margin-top: 20px;">

  <!-- 가운데 정렬된 카드 -->

  <div style="background-color: white; border-radius: 8px; border: 1px solid rgb(204, 204, 204); box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px; overflow: hidden; width: 48%; max-width: 600px;">

    <div style="padding: 16px;">

      <h3 style="margin-top: 0px;">HTML 코드 삽입 팁</h3>

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

      <details style="border-top: 1px solid rgb(221, 221, 221); margin-top: 12px; padding-top: 12px;">

        <summary style="cursor: pointer; font-weight: bold;">HTML 코드 보기</summary>

        <pre style="background-color: #f9f9f9; border-radius: 4px; font-size: 14px; margin-top: 10px; overflow-x: auto; padding: 10px;">&lt;div style="font-weight:bold;"&gt;강조 텍스트입니다&lt;/div&gt;

        </pre>

      </details>

    </div>

  </div>

</div>

이런 식으로 깔끔하게 글을 작성하고 활용 할 수 있습니다. 

이번에는 또 다른 활용 방법입니다.  

이번에는 접히는 박스 안에 YouTube의 노래를 삽입해 보겠습니다. 

YouTube의 공유 버튼을 누르고, <  >  퍼가기  아이콘을 눌렀을 때 나오는 코드를 

HTML보기 모드에서 붙여 넣으면 됩니다.  

오늘의 음악 듣기

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

노래 듣기

맺음말 

필요에 따라 다양한 방법으로 글을 작성 할 수 있는 것이 
구글 블로그의 큰 장점입니다. 

물론..  머리는 좀 아픕니다. 
그냥 쉽게 템플릿으로 공유해주면 안되는 걸까요.