네이버 블로그, 인스타그램 배너 위젯 설정 방법(초보자도 가능!)

현재 브랜드 블로그만 있고 인스타 계정은 없다.

최근에 인스타 계정을 새로 만들게 되었다.

방문자들이 자연스럽게 채널을 넘나들게 하려면 네이버 블로그에

아무래도 사이드 위젯을 활용해야 할 것 같아서 오늘은 사이드 위젯을 설정해 봤다.

 

1. 배너 이미지 준비 

 

가장 먼저 위젯에 넣을 이미지를 준비했다. 이때 무료 디자인 툴인 '칸바(Canva)'를 활용했다.

 

 

네이버 블로그 사이드 위젯은 가로크기가 170px로 정해져 있다.

 

하지만 원본 파일 자체를 꼭 170px에 맞출 필요는 없다.

1080px 같은 고화질 정사각형으로 준비해도 괜찮다.

실제 보이는 크기는 코드에서 width="170"으로 지정해 주면 자동으로 조절되기 때문에,

원본 화질이 좋은 편이 블로그에서 더 깨끗하게 보인다.

 

2. 이미지 공개 주소 만들기 

 

다음은 이미지의 공개 주소(URL)를 얻는 과정이다.

여기서 약간의 절차가 필요하다.

개인 PC나 이메일에 있는 이미지 주소는 다른 사람이 볼 수 없기 때문에,

블로그에 이미지를 올려서 모두에게 공개되는 주소를 새로 만들어야 한다.

 

• 먼저, 블로그 [글쓰기] 화면으로 들어가 글을 [비공개]로 설정한다.
• [사진] 기능을 이용해 준비한 배너 이미지를 글 본문에 업로드 한다.
• 글쓰기를 마치고 [발행] 버튼을 눌러, 비공개 상태로 포스팅을 완료한다.
• 발행된 비공개 글을 열어, 본문에 있는 이미지 위에서 마우스 오른쪽 버튼을 클릭해 '이미지 주소 복사'를 선택한다

누구나 볼 수 있는 이미지 주소가 복사된다.

 

 

3. 위젯 코드 적용 

이제 준비된 재료들을 HTML 코드로 엮어줄 차례다.

코드는 간단하다.

<a href="본인 인스타그램 주소" target="_blank">
  <img src="위에서 복사한 이미지 주소" width="170">
</a>

 

위 구조에 맞춰 href에는 내 인스타그램 주소를,

src에는 2번 과정에서 얻은 이미지 주소를 넣는다.

 

이 완성된 코드를 들고 블로그 [관리] > [꾸미기 설정] > [레이아웃·위젯 설정] 경로로 이동한다.

우측 하단의 [+ 위젯 직접등록]을 눌러, 위젯명과 코드를 입력하고 등록을 마친다.

새로 생긴 위젯을 원하는 곳으로 옮기고 마지막으로 [적용] 버튼을 누르면 모든 과정이 끝난다.

 

---

 

진행하면서 한 가지 알게 된 점이 있다.

만약 미리보기에서 이미지가 깨진다면,

그건 거의 대부분 이미지 주소(src)를 잘못 넣은 경우다.

 

이럴 때는 2번 과정으로 돌아가

...pstatic.net으로 시작하는 주소를 정확히 복사했는지 다시 확인해 볼 필요가 있다.

나도 처음에는 개인 메일함의 이미지 주소를 사용해서 미리보기 오류가 몇 번 발생했지만,

올바른 방법으로 다시 시도해서 성공할 수 있었다.