노션처럼 콜아웃(call out) 박스를 블로그스팟에 달기 - 구글 블로그 꾸미기 10

노션(Notion)의 콜아웃 박스

노션 쓸때 콜아웃 박스를 종종 씁니다.
강조할 사항이 있을때 한눈에 딱 들어오는 편의성이 좋습니다.

구글 블로그에는 이런 기능이 있을까요?

당연히 구글에서 제공하는 기능은 없습니다.

하지만, 만들어 쓸 수 있습니다.

구글 블로그스팟에서 노션(Notion)의 콜아웃 박스 만들어 쓰기

HTML보기 모드에서 편집하기

이전 포스팅에서 구글 블로그의 html 편집 기능에 대해서 설명 했었습니다.

그런데, 자주 쓰지 않는 기능이다보니 쉽게 익숙해 지질 않습니다.

혹시 html 편집 기능을 더 알고 싶으신 분은 아래 박스를 눌러 펼쳐 주세요.

익숙하신 분들은 생략해주세요.

구글 블로그(Blogger)의 html 편집기능 사용 방법을 보시려면 클릭하세요

1. 좌측 상단의 연필 모양 아이콘 클릭

2. HTML보기 클릭

3. html코드 넣기

뭔가 굉장히 어려워 보이지만,
맨 아래 붙여 넣으면 됩니다.

붙여 넣으신 다음에는 위의 화면 캡처에서 'html보기'메뉴의 바로 아래인

'새글 작성 보기'로 돌아가 주세요.

콜아웃 박스 실제 삽입 예시

html보기 편집 화면에서,

제가 아래에서 공유드리는 html코드를 복사해서 붙여 넣으시면,

아래와 같은 콜아웃 박스를 만드실 수 있습니다.

💡

구글 블로그에서도 Notion의 콜아웃 박스를 사용하실 수 있습니다.

일단 박스를 만드시면,

안의 텍스트는 얼마든지 수정이 가능합니다.

콜아웃 박스 HTML 코드

HTML 코드입니다.

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

구글 블로그스팟용 Callout 박스 html 코드입니다. 클릭해서 펼쳐 주세요

아래 점선까지 다 복사해서 붙여 넣어주세요.

점선이 있으면 이후 편집이 쉬워집니다.

--------

</div>

--------

복사해서 붙여 넣으신 후 문구는 얼마든지 수정이 가능합니다.

혹시라도 코드 조회 및 복사에 어려움이 있으신 분은 옆의 링크에서 확인해주세요 : [링크]

편하게 한번에 등록하고 쓰기

기능이 있다고 하더라도,

매번 HTML 보기를 눌러가면서 코드를 복사해 붙여 넣는 것은 참 번거로운 일입니다.

이를 손쉽게 하는 방법을 한번 포스팅 했었습니다.

자세한 설명이 필요하신 분은 위의 포스팅을 방문해주세요.

간략한 설명을 드리면,

아래 사진처럼, 1. 설정 --> 2. 글 템플릿(선택사항) --> 3. html코드 붙여넣기 순서로 하시면 됩니다.

위의 3번에 제가 공유드린 HTML을 넣어주세요.

위와 같이 하시면,

새 글을 작성을 누르시면, 아래와 같이 콜아웃 박스가 매번 자동으로 세팅되어 나옵니다.

맺음말

구글 블로그는 처음에는 정말 기능이 없다. 라고 좌절하다가고,

알면 알 수록 다양한 활용이 가능합니다.

하지만, 그냥 자동으로 해주면 안될까하는 아쉬움도 큽니다.