[블로그] 구글 블로거, 링크에 썸네일 넣는 방법

구글 블로거는 링크 삽입 시 단순 텍스트 형태만 지원 합니다. 

텍스트로만 만들면 가독성이 떨어져 아쉬운 부분이 있는데요, 여기서는 티스토리 등에서 링크 삽입 시 보여주는 썸네일을 포함하여 링크를 삽입하는 방법에 대하여 정리 하였습니다. 

구글 블로거 링크에 썸네일 넣는 방법

아래 소스는 블로거 본문에 썸네일 포함하는 2개의 링크를 추가하는 내용입니다.

링크주소: 실제 블로그 주소

이미지주소: 썸네일의 이미지 주소(마우스 오른쪽 클릭 이미지 주소 복사)

링크제목: 블로그 글 제목 등 편하신대로

위 3개 부분을 적절하게 수정하여 사용하시면 됩니다.

<div style="margin: 0px auto; max-width: 600px; font-family: sans-serif;">

  <a href="링크주소_1" target="_blank" style="display: flex; background: #ffffff; border-radius: 10px; border: 1px solid #eeeeee; box-shadow: rgba(0,0,0,0.05) 0px 2px 5px; margin-bottom: 15px; overflow: hidden; text-decoration: none; align-items: stretch;">
    <div style="flex: 0 0 100px; width: 100px; min-height: 100px; background-image: url('이미지주소_1'); background-size: cover; background-position: center;">
    </div>
    <div style="display: flex; align-items: center; padding: 12px; flex: 1; min-width: 0;">
      <div style="color: #333333; font-size: 15px; font-weight: bold; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
        링크제목_1
      </div>
    </div>
  </a>

  <a href="링크주소_2" target="_blank" style="display: flex; background: #ffffff; border-radius: 10px; border: 1px solid #eeeeee; box-shadow: rgba(0,0,0,0.05) 0px 2px 5px; margin-bottom: 15px; overflow: hidden; text-decoration: none; align-items: stretch;">
    <div style="flex: 0 0 100px; width: 100px; min-height: 100px; background-image: url('이미지주소_2'); background-size: cover; background-position: center;">
    </div>
    <div style="display: flex; align-items: center; padding: 12px; flex: 1; min-width: 0;">
      <div style="color: #333333; font-size: 15px; font-weight: bold; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
        링크제목_2
      </div>
    </div>
  </a>

</div>

html 소스 추가하시면 아래와 같이 단순 텍스트가 아닌 썸네일이 포함된 링크가 작성됩니다