구글 블로그(블로그스팟)의 불편한 편집기는 불편한걸까요?
한계가 없는 걸까요?
구글 블로거의 편집기는 참 불편합니다. 전에 사용 소감 포스팅에서도 기술한 적이 있지만, 사용자에게 그리 편리하게 다가오는 편집기는 아닙니다.
하지만, 반면에 굉장한 자유도를 지니고 있습니다. 일반적인 사용자로서는 범접하기 힘든 편리함이라는게 단점이긴 하지만요.
여태까지 여러가지 사용 팁들에 대해서 포스팅에서 설명했는데, 오늘은 글을 쓸 때 직접 활용할 수 있는 팁을 한가지 소개하려고 합니다. 바로 구글 블로그에서 카드뉴스 형식으로 글쓰기 팁입니다.
구글 블로그에서 카드형식으로 글쓰기
예시를 보여드리는게 가장 빠르겠죠. 아래처럼 크롬캐스트에 대한 카드뉴스를 두 가지 예시를 만들어 봤습니다.
가시성이나 모양새가 일반 글보다는 훨씬 좋은 것을 알 수 있습니다.
자 어떻게 만들어야 할까요?
구글 블로그에는 html편집 모드 기능이 있습니다. 아래 화면에서 왼쪽 맨 끝의 연필 모양 아이콘을 누르고 HTML 보기를 클릭합니다.
이곳에 제가 아래 써 놓은 특정 코드를 입력하면 위의 글과 같은 카드뉴스를 만들 수 있습니다. 먼저 아래 코드를 복사해주세요. 아래 코드는 이미지는 없거나, 이미지를 나중에 삽입하는 형태의 카드뉴스 코드입니다.
------------ 추후 입력을 위해서 입력하는 빈칸 줄입니다. 같이 복사해주세요 ---------
<div style="display: flex; justify-content: center; margin-top: 20px;">
<div style="border-radius: 10px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px; overflow: hidden; width: 48%;">
<div style="padding: 16px;">
<h3 style="margin-top: 0px;">첫번째 카드의 제목을 넣어주세요</h3>
<p>여기에 글을 넣어주세요. </p>
</div>
</div>
<div style="border-radius: 10px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px; overflow: hidden; width: 48%; margin-left: 4%;">
<div style="padding: 16px;">
<h3 style="margin-top: 0px;">두번째 제목을 넣어주세요</h3>
<p>두번째 카드의 내용을 넣어주세요</p>
</div>
</div>
</div>
------- 추후 글 아랫부분 입력을 위해서 입력하는 빈칸 줄입니다. 여기까지 같이 복사해주세요 ------
<div style="display: flex; justify-content: center; margin-top: 20px;">
<div style="border-radius: 10px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px; overflow: hidden; width: 48%;">
<div style="padding: 16px;">
<h3 style="margin-top: 0px;">첫번째 카드의 제목을 넣어주세요</h3>
<p>여기에 글을 넣어주세요. </p>
</div>
</div>
<div style="border-radius: 10px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px; overflow: hidden; width: 48%; margin-left: 4%;">
<div style="padding: 16px;">
<h3 style="margin-top: 0px;">두번째 제목을 넣어주세요</h3>
<p>두번째 카드의 내용을 넣어주세요</p>
</div>
</div>
</div>
------- 추후 글 아랫부분 입력을 위해서 입력하는 빈칸 줄입니다. 여기까지 같이 복사해주세요 ------
복사가 어려우신 분은 옆의 링크를 참조해주세요: [링크 : 카드뉴스-축약형]
자 이젠 다시 새 글 작성 보기로 돌아갑니다. 그럼 위 박스를 기준으로 원하시는 대로 편집하시면 됩니다. 일반 글의 편집 모드처럼 제목도 넣고 그림도 넣는 편집이 가능합니다.
만약 html 코드를 직접 수정하는 것이 더 편하시다면 아래 코드를 사용해 좀 더 나은 결과물을 얻을 수 있습니다. 파란색 글자 부분들을 수정하시면 됩니다.
<div style="display: flex; justify-content: center; margin-top: 20px;">
<div style="border-radius: 10px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px; overflow: hidden; width: 48%;">
<img src="삽입할 이미지의 주소를 넣어주세요" style="display: block; width: 100%;" />
<div style="padding: 16px;">
<h3 style="margin-top: 0px;">첫번째 카드의 제목을 넣어주세요</h3>
<p>여기에 글을 넣어주세요. </p>
</div>
</div>
<div style="border-radius: 10px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px; overflow: hidden; width: 48%; margin-left: 4%;">
<img src="삽입할 이미지의 주소를 넣어주세요." style="display: block; width: 100%;" />
<div style="padding: 16px;">
<h3 style="margin-top: 0px;">두번째 제목을 넣어주세요</h3>
<p>두번째 카드의 내용을 넣어주세요</p>
</div>
</div>
</div>
<div style="border-radius: 10px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px; overflow: hidden; width: 48%;">
<img src="삽입할 이미지의 주소를 넣어주세요" style="display: block; width: 100%;" />
<div style="padding: 16px;">
<h3 style="margin-top: 0px;">첫번째 카드의 제목을 넣어주세요</h3>
<p>여기에 글을 넣어주세요. </p>
</div>
</div>
<div style="border-radius: 10px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px; overflow: hidden; width: 48%; margin-left: 4%;">
<img src="삽입할 이미지의 주소를 넣어주세요." style="display: block; width: 100%;" />
<div style="padding: 16px;">
<h3 style="margin-top: 0px;">두번째 제목을 넣어주세요</h3>
<p>두번째 카드의 내용을 넣어주세요</p>
</div>
</div>
</div>
복사가 어려우신 분은 옆의 링크를 참조해주세요: [링크 : 카드뉴스 - 이미지형]
맺음말
저도 코딩 한 줄 할 줄 모르는 문과지만, 한두 번 해보니 어렵지 않게 할 수 있었습니다. 한번 도전해보세요. 구글 블로거는 참 단순하기도 하고 불편하기도 하나, 잘 활용하면 강력하고 자유도 높은 결과물을 얻을 수 있는 기능을 제공하고 있습니다.
Google Blog, Blogger, Blogspot, 구글블로그, 블로그스팟
댓글 쓰기