IJMuAN02pVKE2uZHXG2JnZAHGfjon49GBXjko1rk

블로그스팟 썸네일 원하는 이미지로 만들기

블로그스팟으로 글을 작성하고 게시하면 썸네일 사진이 첫 번째 사진으로 지정되는데요!

본문 중간에 있는 내가 원하는 이미지, 썸네일로 보여주는 방법 없을까요?

제가 알려드리는 코드만 복붙하면 글을 쓸 때마다 자동으로 적용되니 꼭 따라해보세요

블로그스팟 썸네일 원하는 이미지로 만들기

티스토리, 워드프레스 또는 네이버 블로그를 하다가 블로그스팟으로 넘어오셨을텐데요

가장 적응안되는 부분 중 하나가 바로 이미지 업로드 부분입니다.

왜 이렇게 답답하게(?) 만들었는지 알수는 없지만, 어떡합니까.. 우리가 맞춰야지(무료니깐 참는다)

HTML 보기 > 이미지 코드 입력

블로그스팟 썸네일 사진은 글 본문에서 첫 사진이 썸네일로 만들어지게끔 설계가 되어있습니다.

그래서 이 부분을 활용해서 우리가 썸네일로 만들고 싶은 이미지를 가장 처음에 보여주면 됩니다 (끝?)

하지만 뜬금없이 갑자기 원하는 이미지를 보여주면 검색자 입장에서 이상하게 생각할수 있겠죠?

일단 설정하는 방법부터 알려드리고 자세한 설명을 드리도록 하겠습니다.

이미지 코드 복사하기

<img src="https://이미지 주소" style="display: none;" />
우선 위 코드를 복사하시고 제가 설명하는 대로 따라오시면 됩니다.

그리고 블로그스팟 설정 페이지로 이동할께요!

블로그스팟 설정 글 템플릿 메뉴

설정 > 글 > 글 템플릿(설정사항)
설정 페이지로 이동해서 스크롤 바를 조금 내리면 글 > 글 템플릿(선택사항)을 찾을 수 있습니다.

"글 템플릿(선택사항)"을 클릭하면 글 템플릿을 입력할 수 있게 됩니다.


블로그스팟 원하는 이미지 썸네일 코드 입력

글 템플릿이란? 글을 쓸 때 사용하는 미리 만들어진 틀

 글 템플릿(선택사항)이라는 글자를 클릭하고 아래 코드를 복사해서 붙여넣습니다.

<img src="https://이미지 주소" style="display: none;" />

위 img (이미지)코드는 앞서 말씀드린대로 첫 이미지가 썸네일로 지정되는 것을 역이용하는 건데요!

이 코드가 HTML 첫 줄에 나타나게 되면 내가 원하는 이미지를 썸네일로 나타낼 수 있게 됩니다.

그리고 그 이미지는 display: none 이라는 명령어로 안보이게 처리 할겁니다.
  1. 제가 알려드리는 <img src 이미지 코드>를 글 템플릿에 입력
  2. 평소대로 블로그스팟에 글(+이미지 포함)를 작성
  3. 썸네일하고 싶은 이미지 주소를 <https://이미지 주소>에 입력
  4. 글을 게시(발행)하고, 블로그스팟 썸네일 확인

정리하자면 글은 원래대로 작성하시고, 내가 원하는 이미지를 제일 앞으로 옮긴 후에 숨기는 방식입니다.

이렇게까지 해야하나 싶지만, 글을 작성하다보면 금방 적응되어서 나쁘지 않다는 걸 느끼실겁니다 😅

이상으로 블로그스팟 썸네일 원하는 이미지로 만드는 방법에 대해 알아봤습니다.