Blogger | 사진 순서 상관 없이 썸네일(대표이미지) 지정하기

구글 블로거 유저분들이라면 아시겠지만 블로거(blogger)는 글쓰기 기능이 너무 빈약하다는 것이 단점인데, 그 중 하나가 썸네일을 지정할 수 없다는 것입니다. 자동으로 첫 번째 사진이 썸네일이 되는 시스템이죠.
그러다보니 글의 내용을 대표한다기엔 조금 애매한 이미지가 썸네일이 되는 경우가 발생하는데요, 하지만 블로거에서도 순서 상관없이 원하는 이미지를 썸네일로 지정할 수 있는 방법이 있어요!
그럼 지금부터 그 방법을 알려드릴게요~!

구글블로거(blogger)에서
사진순서 상관없이 썸네일 지정하기

본론으로 들어가기 전에 먼저 구글블로그와 네이버 블로그의 글쓰기 환경을 비교해 보겠습니다.

네이버 블로그(위)와 구글블로그(오른쪽) 글쓰기 환경

보시면 네이버는 "대표사진"이라고 사진 순서 상관없이 원하는 사진을 지정할 수 있는 기능이 있는데, 구글 블로거(Blogger)는 그런 기능은 없고 첫번째로 나오는 사진이 썸네일로 지정됩니다. (네이버는 과하다 싶을 정도로 많은 기능이 있는데, 구글 블로그는 너무하다 싶을 정도로 단순하죠..ㅎ 사실상 방치수준..;;)
하지만 아래 보이는 코드를 활용하면 원하는 이미지로 썸네일을 지정할 수 있다는 사실~!

<img src="이미지주소(Image-link)" style="display:none;"/>

그럼 지금부터 어떻게 적용하는지 자세히 알아보도록 할게요~!

STEP1. 이미지주소 복사하기

이미지 추가 - 이미지 주소 복사

먼저 글쓰기 상단에 있는 "이미지 삽입" 아이콘을 클릭하고 썸네일로 보여질 이미지를 삽입해 주세요.
그리고 오른쪽 마우스를 눌러 "이미지주소 복사하기"를 클릭한 뒤 이미지는 "delete" 키나 "삭제"버튼을 클릭하여 지워주세요~
(혹은 그냥 HTML 모드에서 "이미지 파일명.jpg"로 끝나는 이미지주소를 찾아도 돼요.)

STEP2. HTML 모드에서 코드 삽입

HTML 모드 전환 후 코드를 상단에 추가

글쓰기 상단에 "HTML" 버튼을 클릭하여 HTML 모드로 전환해해 주세요.

<img src="이미지주소(Image-link)" style="display:none;"/>

그리고 위 코드에서 아까 복사한 이미지 주소를 "이미지주소"라고 적힌 부분에 붙혀넣고, 완성된 코드를 맨 위(첫 번 째줄)이나 사진이 시작되는 부분에 추가해주세요.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh52sBQJJJLkgTGF-aPVtZkXTo30oIl7LUw4wjY3ukzguB2IsWydKFn1LFkNSqFCmSL8g4dfPiUI1K5MrsdDNAiZddMmI_TovpVXcH6DHz7PQx5MpqSoGzGDXjgRpnNkal1myW7RWoZ104/s400/IMG_20190726_023000.jpg" style="display:none;"/>

참고로 이미지 주소 뒤에 나오는 style="display:none;"는 이미지를 화면상에서 사라지게 만들어주는 css 스타일 입니다.
그래서 화면상에서는 보이지 않는데요, 코드상에서는 첫번째 이미지로 인식하더라구요~

결과물

글쓰기 모드에서는 코드로 삽입한 이미지가 보이지 않음

위 예시를 보면 앞서 썸네일용 이미지(풍경사진)를 가장 상단에 추가해 주었지만, css 스타일로 숨겨 놓았기 때문에 글쓰기 모드에서는 보이지 않는걸 확인하실 수 있습니다.
그래서 화면상으론 지하철역 사진이 첫 번째로 나오죠.

목록에선 코드로 삽입한 이미지가 썸네일로 나타남

하지만 글 목록을 보면 이렇게 풍경사진이 썸네일로 나오는걸 확인할 수 있어요~!
코드를 가장 상단에 추가시켜주었기 때문이죠!
참 쉽죠?ㅎ
이 방법을 알게 된 후 부터는 사진 순서에 구애받지 않고, 포스팅 안에서 원하는 이미지를 골라 썸네일지정할 수 있어서 자주 활용하고 있어요~
블로거, 티스토리 유저분들 참고하시면 좋을 것 같습니다.^^