구글 Blogger(블로그스팟) 사진 순서 상관없이 대표이미지 설정하는 방법
구글 Blogger(블로그스팟) 대표이미지 설정
 |
| 블로그스팟-대표이미지-설정 |
블로그스팟으로 블로그를 운영하다보면 다른 블로그 플랫폼(네이버블로그, 티스토리 등)과 다르게 불친절한 환경이 몇 가지 있습니다. 그 중 대표적인 것이 대표이미지 설정인데요. 블로그스팟은 네이버블로그나 티스토리와 다르게 대표이미지를 설정하는 기능이 없습니다. 따라서, 순서와 상관없이 원하는 사진을 대표이미지로 설정하기가 어렵습니다.
블로그스팟은 무조건 첫번째 사진이 대표이미지로 설정되는 구조입니다. 하지만, 우리가 작성하는 글이 모두 첫번째 사진이 대표이미지일 수는 없습니다. 그래서 사진 순서에 상관없이 대표이미지를 설정하는 방법에 대해 설명해드릴게요. 코드를 다루기는 하지만 아주 간단하니까 미리 겁내지말고 잘 따라해보세요.😊
순서와 상관없이 대표이미지 설정하는 방법
앞서 블로그스팟은 무조건 첫번째 사진이 대표이미지로 설정되는 구조라고 설명드렸습니다. 따라서, 우리는 대표이미지로 하고 싶은 이미지를 첫번째로 넣어주고 사람들 눈에는 보이지 않게하는 작업을 해야합니다. 즉, 아래와 같은 구조를 만들어 주어야 합니다.
(A)-B-C-A
여기서 A는 내가 대표이미지로 설정하고 싶은 사진입니다. 코드상으로는 A가 첫번째 사진이지만 사람들은 볼 수 없어야 합니다. 그러면 화면상에서는 안보이는데, 코드상 첫번째 이미지이기 때문에 구글이 A를 대표이미지로 설정하게 되는 방식입니다. 순서는 아래와 같습니다.
- 대표이미지로 원하는 이미지를 삽입한 뒤 이미지를 우클릭하여 이미지 주소를 복사합니다.
👉 [대표이미지 삽입] - [우클릭] -[이미지주소 복사] - 이미지를 지우고, 'HTML보기'에 들어가서 아래 코드를 글 내용의 첫부분에 붙여넣습니다. * 'HTML보기'는 왼쪽 상단에 연필처럼 생긴 아이콘을 클릭하시면 됩니다.
코드 : <img src="이미지주소(Image-link)" style="display:none;"/> - 위 코드에서 이미지주소에 1번에서 복사한 이미지 주소를 붙여 넣습니다. 이 때 " "는 그대로 살려서 넣으셔야 합니다.
예시) <img src="https://blogger.googleusercontent.com/img/b/어쩌고저쩌고.jpg" style="display:none;"/>
참고로 style="display:none;" 코드는 이미지를 화면상에서 사라지게 만들어주는 css스타일입니다.
자 이제 대표이미지 설정이 끝났습니다! 생각보다 쉽죠? HTML보기에서 나와서 원래 쓰던대로 글을 쓰고 발행하시면, 대표이미지가 원하는 사진으로 들어가 있는 것을 확인할 수 있습니다. 이제 블로그스팟에서도 어렵지 않게 대표이미지를 바꿀 수 있는 능력을 갖추게 되셨습니다. 다음에 더욱 유용한 정보로 찾아뵙겠습니다.😊